The document discusses the concept of boxes in web page design using CSS. It explains that all HTML elements are boxes by default that can be styled with properties like width, height, padding, margin, and borders. It also introduces terminology like padding, margin, and the relationship between element width, padding, borders, and the total occupied space. The document provides examples of how to style boxes and notes the importance of consistency and grids for page layout. It discusses the concept of inheritance in CSS and how more specific rules override general ones.
13. Boxes take up space
By default they
• inherit their width
• inherit their height
• inherit their padding
• inherit their margin
• have no borders, but can
Tuesday, April 16, 13
14. Boxes take up space
By default they
• inherit their width
• inherit their height
• inherit their padding
• inherit their margin
• have no borders, but can
Tuesday, April 16, 13
15. Boxes take up space
By default they
• inherit their width
• inherit their height
• inherit their padding
• inherit their margin
• have no borders, but can
Tuesday, April 16, 13
16. Boxes take up space
By default they
• inherit their width
• inherit their height
• inherit their padding
• inherit their margin
• have no borders, but can
Tuesday, April 16, 13
17. Boxes take up space
By default they
• inherit their width
• inherit their height
• inherit their padding
• inherit their margin
• have no borders, but can
Tuesday, April 16, 13
18. Terminology
ome m at h!)
(and s
boxes.html
Tuesday, April 16, 13
104. body {
background-color: #ffffff;
}
Tuesday, April 16, 13
105. unless told otherwise, a child element inherits
applicable rules from its parents
Tuesday, April 16, 13
106. body{
background-color: #ffffff;
}
Tuesday, April 16, 13
107. <body>
<p>Because this paragraph is inside the body tag (like all page elements) it inherits the
text properties of the body. </p>
</body>
Tuesday, April 16, 13
108. But what about the other element
backgrounds that aren’t white?
Tuesday, April 16, 13
113. p{
color: #FF0000;
background-color: #000000;
}
Unless a more specific rule applies to a
paragraph, this “type” selector defines how all
paragraphs in your document will look.
Tuesday, April 16, 13
114. .alert {
color: #00FF00;
background-color: #0000FF;
}
<p class=“alert”>
This is a paragraph with the “alert” class rules applied to it.
Where its rules conflict with a less specific “type” selector, the
class selector takes precedence.
</p>
Tuesday, April 16, 13
116. CSS Selectors have weight
High Value Low Value Tie Breaker
ID | Class | Type Position
(#nav) (.byline) (p)
SELECTOR CONFLICTS
CSS SELECTORS
Tuesday, April 16, 13