HTML and CSS Reference
In-Depth Information
Individually, we visually pick out the components of a CSS rule:
Property Name
Value
Declaration Separation
h1 {font-size: xx-large; color: red;}
Declaration
Declaration Block
Declaration
Rule
Selector
N
OTE
The final declaration in a style rule block does not require the semicolon. However, for good
measure and easy insertion of future properties, page authors should always use semicolons after
all style properties.
CSS property names are separated by dashes when they are multiple words—for example,
font-face
,
font-size
,
line-height
, and so on. Allowed values come in many forms; from
simple keywords like
xx-small
, strings like “Arial”, plain numbers like 0, numbers with units
like 100px or 2cm, and special delimited values such as URLs—
url(../styles/fancy.css)
.
All allowed values will be covered in upcoming sections in this chapter.
Property names and many values are not case sensitive but some values may be, as may
selectors, depending on the language CSS is applied to. Web developers should assume that
all components of CSS rules are case sensitive, just to be safe.
CSS rules are applied to markup, and the various style values applied to a particular
element may be inherited from its parent or even a more distant enclosing element. For
example, a rule like:
p {color: red;}
applies the color red to paragraph elements. When applied to
<body>
<h1>
Test
</h1>
<p>
This is a
<strong>
Test
</strong>
!
</p>
not only is the paragraph element set as red but so too is the
<strong>
tag enclosed in
the
<p>
tag because the
color
property value is inherited from the parent element, as
shown here:
p {color:red;}
body
h1
p
Red
strong
Red
Whereas most elements can inherit the style features of their parents, some style properties,
such as borders, do not.
