Width and height part 2

Width and Height Measurement



The width and height of an element can be also assigned using percents. 
In the example below the width of an element is assigned in percentages, the height is in pixels. 

The HTML:<div>The total width of this element is <strong>100%</strong> and the total height is <strong>100px</strong> .</div>
The CSS:
div {
border: 5px solid green;
width: 100%;
height: 90px;
}Try It Yourself

Result:
Tap Try It Yourself to play around with the code!

Comments

Post a Comment

Popular posts from this blog

font-family part 1

Image
The font-family Property The font-family property specifies the font for an element.  There are two types of font family names:  -  font family : a specific font family (like Times New Roman or Arial) -  generic family : a group of font families with a similar look (like Serif or Monospace) Here is an example of different font styles: The HTML: <p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p> The CSS: p.serif { font-family: "Times New Roman", Times, serif ; } p.sansserif { font-family: Helvetica, Arial, sans-serif ; } p.monospace { font-family: ...
Read more

Word-spacing part 1

Image
The word-spacing Property The word-spacing property specifies the  space between words  in a text. Just like the letter-spacing property, you can set the word-spacing values as  normal ,  length , and  inherit .  The HTML: <p class="normal">This paragraph has no additional word-spacing applied.</p> <p class="px">This paragraph is word-spaced at 30px.</p> The CSS: p.normal { word-spacing: normal ; } p.px { word-spacing: 30px ; } Try It Yourself Result: When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the  normal option is usually used.
Read more

Background attachment part 1

Image
The background-attachment Property The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. Even if an element has a scrolling mechanism, a "fixed" background doesn't move with the element. The CSS: body { background-image: url("css_logo.png"); background-repeat: no-repeat; background-attachment: fixed ; } Try It Yourself Result: Tap  Try It Yourself  to play around with the code!
Read more