Back to Syllabus

Cascading Style Sheets

Cascading Style Sheets act as a "template" that can control the layout and design of your pages. They work separate from HTML, giving you easier maintainability. They can define everything from your link and text colors to page margins, backgrounds colors, font weights and sizes etc. Here is how they work:

Rules, Selectors and Declarations:

H1 { color: blue }

The example above is a simple CSS rule. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue').

The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors.

Placing a 'STYLE' element inside the 'HEAD' element.

Style information can be stored in an external file and referenced by any number of Web pages. This is useful if you are developing an entire website and would like your style to remain consistent over many individual webpages. Since we focus on designing a single webpage, we will instead place our "STYLE" element within the "Head" element of our document. This allows you to change the appearance of a single Web page. The <STYLE> element has one paremeter, TYPE, which specifies the internet media type as "text/css."

The <STYLE> tag is followed by any number of STYLE definitions and terminted with the </STYLE> tag. Older browsers will ignore the <STYLE> element, and will treat the tag as part of the document body and render it as such. To avoid this, we will "hide" our style definitions as "comments" <!-- style definitions here -->.

The following example, embedded within the <HEAD> element of a webpage will yield a page with a black background and white text in the Garamond font face.

<STYLE TYPE = "text/css">
<!--
BODY { background: black; }
TEXT { color: white; font-family: Garamond; }
-->
</STYLE>

Style Sheets with Colors and Fonts:

Color can be defined within the style definition as either a keyword or a hexidecial color value. There are 16 color keywords that can be used: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

There are four common font properties that are commonly defined in a style sheet:

  1. font-family -- sets the actual font.
    Examples of font family names include:
    Arial, Verdana, Courier, Helvetica, Times Roman, Garamond etc.
  2. font-style -- normal/italic/oblique selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.
  3. font-weight -- bold/normal. Normal is the default. Font weight only needs to be set when you want a bold typeface.
  4. font-size -- attribute vastly expands the size limits of the tag. Sizes can be expressed in points, pixels, inches, absolute or relative sizes, or percentage of default (i.e. 40pt, 60px, 1.5in, or 200%).
    absolute sizes: [ xx-small | x-small | small | medium | large | x-large | xx-large ] On a computer screen a scaling factor of 1.5 is suggested between adjacent indexes; if the 'medium' font is 10pt, the 'large' font could be 15pt.
    relative sizes: [ larger | smaller ] interpreted relative to the table of font sizes and the font size of the parent element. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'.
    standard point sizes: 10-12 pt is the standard point size for (letter, term paper etc) documents.

Style Sheet Examples

Here is a rule that will set general defaults, e.g. text and background colors, and fonts:

<STYLE TYPE = "text/css">
<!--
BODY {background:blue; color:red; font-family:ariel, helvetica, courier;} --> </STYLE>

Note that I have defined three font families. Remember that for a font to display it must be installed on the user's system. To work around this, you can specify a single type, or alternative font families.

Here is an example of a rule defining the font family, style, weight and size for the <H1> element:

<STYLE TYPE= "text/css">
 <!--
H1 {font-family: Helvetica; font-style: italic; font-weight: bold; font-size:25pt;} --> </STYLE>

For More Information See These CSS LINKS: