When a
style is applied to an element, its descendants??”those elements nested within it??”often
take on CSS property values, unless a more specific style has been applied. However, not
all CSS style properties are inherited. See the CSS reference section of this book for more
details.
The CSS box model explained
The box model is something every designer working with CSS needs a full understanding
of, in order to know how elements interact with each other and also how various properties
affect an element. Essentially, each element in CSS is surrounded by a box whose
dimensions are automated depending on the content. By using width and height properties
in CSS, these dimensions can be defined in a specific manner.
You can set padding to surround the content and add a border and margins to the box. A
background image and background color can also be defined. Any background image or
color is visible behind the content and padding, but not the margin. The effective space an
element takes up is the sum of the box dimensions (which effectively define the available
dimensions for the box??™s contents), padding, border, and margins. Therefore, a 500-pixelwide
box with 20 pixels of padding at each side and a 5-pixel border will actually take up
550 pixels of horizontal space (5 + 20 + 500 + 20 + 5).
Note that in some cases, margins between two elements ???collapse,???
leading to only the larger margin value being used.
Note that it??™s possible to import or link multiple style sheets in a web page??™s head section.
Pages:
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75