JavaScript: The Definitive Guide, 6th Edition

Overview of CSS

There are many variables in the visual display of an HTML document: fonts, colors, spacing, and so on. The CSS standard enumerates these variables and calls them style properties. CSS defines properties that specify fonts, colors, margins, borders, background images, text alignment, element size, and element position. To define the visual appearance of HTML elements, we specify the value of CSS properties. To do this, follow the name of a property with a colon and a value:

font-weight: bold

In order to fully describe the visual presentation of an element, we usually need to specify the value of more than one property. When multiple name:value pairs are required, they are separated from one another by semicolons:

margin-left: 10%;      /* left margin is 10% of page width */
text-indent: .5in;     /* indent by 1/2 inch */
font-size: 12pt;       /* 12 point font size */

As you can see, CSS ignores comments between /* and */. It does not support comments that begin with //, however.

There are two ways to associate a set of CSS property values with the HTML elements whose presentation they define. The first is by setting the style attribute of an individual HTML element. This is called the inline style:

<p style="margin: 20px; border: solid red 2px;">
This paragraph has increased margins and is 
surrounded by a rectangular red border.
</p>

It is usually much more useful, however, to separate CSS styles from individual HTML elements and define them in a stylesheet. A stylesheet associates sets ...