CSS Style Sheets

There are several types of selectors. Let us first look at the Type Selector, the selector that selects a particular type of XHTML element.

Type Selectors have the following syntax:

body
{element name: element value;
element name: element value;} body
{
element name: element value;
element name: element value;
}

Notice there are two parts to that statement. The first part contains the word "body", and the second part, inside the braces, contains the elements that are formatted by this statement.

The word "body" is known as the selector, and it tells the browser that the HTML elements are in the <body> of the file. The selector could also be "p" for paragraph or "h1" for header type 1, for example, or "block quote"thus allowing us to specify formatting for all of the structural elements of a web page.

The declaration contains the name of the elements and the values the elements should have. The names are connected to their values by a colon (:). These name/value combinations are known as the properties of the declaration. All properties end with a semicolon (;). Actually, the last property doesn't have to end with a semicolon, but it is a good idea to be consistent by ending all properties with semicolons.

For example, here is a CSS statement for the background color of the body and the font to be used in the body. The separator is "body", and there are two elements in the declaration. The browser parses the list of fonts and uses the first one that it finds on the system. If none of the fonts are found, the browser uses its default sans-serif font.

body
{background-color: white;
font-family: arial, verdana, helvetica, geneva, sans-serif;
font-size: 1em;}

The font size of 1em is a relative way of expressing the font size. It means that the font size is the same as size already in use. Notice there is no space between the 1 and the em. 1.3em would mean that the font size is 1.3 times the actual height of the font being used. Absolute sizes of fonts are not recommended, because one of the important characteristics of CSS is that font height can be changed by the user.

Element Names

We have seen that CSS Type Selectors consist of a selector and a declaration. The selectors are the names of the XHTML elements that provide the scope of the Type Selector. The following list gives the selectors that are in common use.

body	The XHTML <body> element
h1, h2, h3, h4, h5, h6	The XHTML header elements
p	The XHTMLparagraph element
em	The XHTML emphasis element
q	The XHTML quote element
blockquote	The XHTML blockquote element

Selectors can be grouped. For example, suppose you want both 3rd level headers and paragraphs to be formatted the same. You could group the selectors and write a CSS rule that applies to both structures.

h1, p
{background-color: white;}

Element Values

The declaration consists of element names and corresponding element values. The following list gives declarations that are in common use.

The `font-family` property to give the name of a font	Separate names of fonts with commas. The browser examines the list from left to right. Include the generic font-family (serif, sans serif) as the last font. Example font-family: Arial,Verdana,Helvetica,sans-serif;
The `font-size` property to give the size of the font	`Absolute sizes: xx-small, x-small, small, medium, large, x-large, xx-large` Relative sizes: `smaller, larger` `Character length:` points (pt), ems (em), exs (ex), picas (pc), pixels (px), inches (in), millimeters (mm), centimeters (cm) Example font-size : 1.4em; [1.4 or 40% larger than default size. Notice there is no space between the 4 and the em]
The `text-decoration` property	`Possible values are none, underline, overline, line-through, blink` Example text-decoration: underline;
The `font-style` property	Possible values are `normal, oblique, italic` `Example font-style: italic;`
The `font-weight` property	Possible values are normal, bold, bolder, lighter. Also, numbers 200, 300, 400, 500, 600, 700, 800, 900. 400 is the same as normal, and 700 is the same as bold. Some browsers may not accurately support the numbers.

Case Sensitivity

CSS as a language is not case sensitive. HTML is not case sensitive. However, XHTML is case sensitive, and all element names and values must be in lower case. Thus, to avoid future problems with browsers that will enforce the case of XTML, make all CSS selectors and declarations lower case. Every rule seems to have an exception, and so it is with CSS and case. Some font names are case sensitive, and you should observe that case sensitivity in your declarations.

Background Properties

CSS gives you the ability to have backgrounds for any element. You can give any element a background color and/or a background image. If an image is used, you can specify if the image is displayed one time or the image tiles or repeats horizontally, vertically, or both. In addition, you can specify where the image should be positioned. And, you can specify whether the image scrolls or doesn't move when the page is scrolled.

The background-color property to specify the background color	The 16 possible colors are aqua (00ffff), black (000000), blue (0000ff), fuchsia (ff00ff), gray (808080), green (008000), lime (00ff00), maroon (800000), navy (000080), olive (808000), purple (800080), red (ff0000), silver (c0c0c0), teal (008080), white (ffffff), yellow (ffff00) The hex values are in parenthesis. See the color page of this site for details about color. Example using a color name background-color: navy
The color property to specify text color	Example using hex color #ffffff
The background-image property to give the path to the image	The path can be relative or absolute. Relative paths are relative to the style sheet not the HTML page. Example background-image: url(dog.gif)
The background-repeat property to repeat the image.	Possible values are no-repeat, repeat, repeat-x, repeat-y
The background-position property to position the image.	Possible values are top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right. Two values can be given, comma separated. The first value is horizontal, and the second value is vertical. If only one value is given, the other value is set to center.
The background-attachment property to control scrolling of the image.	Possible values are fixed or scroll. Example background-attachment: scroll;

[ Home ] [ Up ] [ Intro to CSS ] [ Type Selectors ] [ Inheritance ] [ Learning XHTML ][Ref. Type Selectors]