The address for this web page is:   http://fishcaro.crosswinds.net/day_42_css_basics.htm
On to the next lesson!
Back to the COURSE SYLLABUS

42. CASCADING STYLE SHEET BASICS

In this lesson, we begin learning how to write the code for style sheets. Basically, you choose something (like a paragraph) that you want to specify a stylistic element for (like its font-size), and then you give the specifics about that stylistic element (like you want the font-size to be 12 pt).

INDEX CARD #42:

SYNTAX FOR STYLE SHEET RULES (42a)

Each style "rule" takes the following form:
selector {property: value}
The selector identifies the element that is being "selected" to have something specified about its style.
The property is something that can be specified for the selector.
The value gives specific information about the property.
Together, a   property: value   pair is called a declaration.
Be sure to put a space after the colon in each   property: value   pair.
Multiple declarations are separated by semicolons, as in the next example.

Here's an example:

P {font-size: 12 pt; color: red}
P is the selector; paragraphs have been "selected" to specify some information about.
There are two declarations:    font-size: 12 pt   and   color: red .
In the first declaration, the property is font-size and its value is 12 pt; this sets the font-size of paragraphs to be 12 pt.
In the second declaration, the property is color and its value is red; this makes all paragraphs appear in red.

SAME INFO FOR MORE THAN ONE SELECTOR (42b)

Sometimes you want to specify the same information for several selectors. There's a shortcut for doing this. Suppose you want to make level-1 headings, level-2 headings, and paragraphs all appear in blue. You could write: 
H1 {color: blue}
H2 {color: blue}
P {color: blue}
or you could use the following shortcut: 
H1, H2, P {color: blue}
Much easier!
Notice that the selectors must be separated by COMMAS for the shortcut to work.


CONTEXTUAL SELECTORS (42c)

Sometimes you want certain things to happen in a certain context: for example, you may want emphasized text inside list items to be colored green. You could accomplish this by saying:
LI  EM {color: green}
Here,  LI  EM  is called a contextual selector.
The order is important: the list item (LI) must come first; then the emphasized text (EM) must appear inside the list item.
The individual selectors (here, LI and EM) must be separated by WHITE SPACE ONLY (no commas) for this to work.

Sometimes you want more than one contextual selector to have the same declaration. For example, suppose you want bold text to be colored red whenever it appears inside level-1 headings, level-2 headings, and level-3 headings. Then, you could write:

H1 B, H2 B, H3 B {color: red}
Notice that each contextual selector is separated from the other by a comma.

EMBEDDING STYLE INFO IN A SINGLE DOCUMENT (42d)

When you want to apply style information to a single HTML document, you put the info in the <HEAD> </HEAD> container, as in the next example: 
<HEAD>
<STYLE TYPE="text/css">
<!--
  H1 {color: red}
   P {font-size: 12pt; color: green}
-->
</STYLE>
</HEAD>
  • The only style TYPE right now is "text/css"; however, you must include this attribute and value in the STYLE tag or some browsers may ignore the style information.
  • By commenting out the information inside the <STYLE> </STYLE> container, you are hiding the information from older browsers.


Printable version of Index Card 42a

Printable version of Index Card 42b

Printable version of Index Card 42c

Printable version of Index Card 42d

WORKSHEET #42:

ASSIGNMENT #42:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2001 Carol J.V. Fisher    All Rights Reserved