HTML and CSS Reference
In-Depth Information
CSS rules can be placed directly within most (X)HTML tags by setting the core attribute
style
to the rule. For example, to set the color and alignment of an
h1
heading, we might use
<h1 style="color: red; text-align: center;">
Big Red CSS Text!
</h1>
Such direct use of CSS is called
inline style
and is the least favorable form of CSS because of
its tight coupling to the actual (X)HTML tags.
Instead of placing rules directly within markup elements, we might more appropriately
create a rule that binds to a particular element or set of elements, which will lend itself for
future reuse. CSS rules not found within a particular tag consist of a
selector
followed by its
associated style declarations within curly braces. Similar to being used inline, a style rule is
composed of property names and property values separated by colons, with each style
declaration (property/value pair) in turn being separated by a semicolon. In general, the
syntax is
selector {property1 : value1; ... propertyN : valueN;}
An example rule conforming to correct CSS syntax broken out into its individual
components is shown here:
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)
.
Given this brief CSS syntax overview, to create a style dictating that all
h1
elements are
red and centered, use the following rule:
h1 {color: red; text-align: center;}
As rules are added, you may take advantage of the fact that CSS is not terribly
whitespace sensitive, so
h1 {font-size:xx-large;color:red;font-family:Arial;}
