HTML and CSS Reference
In-Depth Information
reuse them in another section of the site. Having them in their own file provides this addi-
tional flexibility.
Creating a Style Sheet
CSS syntax is quite simple: we're dealing with nothing more than a list of rules. A simple style
sheet might look something like this:
h1 {
color: blue;
}
h2 {
color: green;
}
Save those two lines into a text file and give it a name ending in
.css
, and you've got your-
self a perfectly valid (albeit simple) external style sheet. Put those two lines in a
<style>
element within the head of your (X)HTML document, and you've made an embedded style
sheet.
Each style rule is made up of two parts: a
selector
and one or more
declarations
—each of
which consists of a property and a value.
Declarations
Let's go about this in reverse order. Declarations are property/value pairs that define visual
styles.
Properties
are things like background color, width, and font family.
Values
are their
counterparts, such as white, 400 pixels, and Arial—or, in the proper syntax:
background-color: white;
width: 400px;
font-family: Arial;
Declarations are always formatted as the property name, followed by a colon, followed by
a value, and then a semicolon. It is common convention to put a space after the colon, but this
is not necessary. The semicolon is an indication that the declaration is concluded. Declara-
tions are grouped within curly brackets, and the wrapped group is called a
declaration block
.
Selectors
Selectors define which part(s) of your (X)HTML document will be affected by the declarations
you've specified. Several types of selectors are available in CSS. Note that some of them are not
supported in all browsers, as you will learn in Chapter 4.
