The P element is the selector, text-align: is the property and justified is the value. The property:value declarations are enclosed with { } (curly-braces). Multiple properties may be specified on one line separated by ';' (semi-colon) or split over several lines each ending with ';'.

P.sp {margin-left: 24px; text-align: justified; color: navy} H1 { font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 160%; font-family: Times New Roman, serif; text-align: center; }

1.2 Classes

A selector can have different classes:

CODE.html {color:teal} CODE.css {color:fuchsia}

Only one class can be declared per selector definition, but multiple class selectors may be defined for any element. Only one class attribute may be used per element-tag in HTML.

Classes may be declared as generic:

.note {font-size:small}

Now this ".note" class can be used with any element.

1.3 ID's

ID selectors are used for individual occurrences of elements. Each ID may be used only once per document.

#par401 {text-indent:3em}

For example:

<P id="par401">Indented text...</P>

1.4 Contextual Selectors

One or more selectors separated by white space:

P EM {color:red}

Thus, EM (emphasized) text within a P (paragraph) element would be red, elsewhere it would be normal.

1.5 Groups

Selectors may be grouped, separated by commas, to avoid repetition:

H1, H2, H3, H4 {color:green; font-family:serif; font-variant:small-caps}

1.6 Properties & Values

Properties are assigned to selectors to change their styles - color, font, alignment, etc. - and values are assigned to the properties to specify styles: color:red; font-family:Arial; etc. Properties defined under CSS1 are detailed below.

1.7 Pseudo-Classes and Elements

1.7.1 Anchor Pseudo-Classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link { color: blue } A:active { color: red; font-size: 125% } A:visited { color: green; font-size: 85% }

1.7.2 First Line Pseudo-Element

Often in newspaper articles, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.) An example of a first-line pseudo-element would be:

P:first-line { font-variant: small-caps; font-weight: bold }

1.7.3 First Letter Pseudo-Element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

2.0 Using Style Sheets

Following are examples of the four main ways to include style sheets in HTML documents. All style sheet declarations are placed in a STYLE element within the HEAD element, except for inline use of the style attribute. As far as I can tell, external style-sheet files are simply plain-text files containing the same selector information as is used in an HTML embedded STYLE element (without the HTML tags or comments.)

2.1 Linked External Style Sheet

<HEAD> ... <LINK rel=stylesheet href="style.css" type="text/css"> ... other HEAD statements </HEAD>

2.2 Imported (Combined) Style Sheets

<HEAD> ... <LINK rel=stylesheet href="main.css" type="text/css"> <STYLE type="text/css">  </STYLE> ... other HEAD statements </HEAD>

2.3 Embedded STYLE Element

<HEAD> ... <STYLE type="text/css">  </STYLE> ... </HEAD>

2.4 Inline Style Attribute

<P style="text-indent: 10pt; color:teal">Indented (first line) paragraph</P>

3.0 Properties

Following is a summary of the style sheet properties currently defined under CSS1. Property names as used in selector declarations are shown in bold, followed by possible values. The default or initial value is listed in bold type. Values which represent a category (units or another property) for which a real value must be substituted are shown in italics. Color and length units are described in detail separately below. '¦' indicates only one of the values listed is used at a time; '¦¦' indicates values which may be combined, usually in the order listed. All properties are inherited under cascading style sheet rules and may be used with all elements unless specifically noted.

If you have trouble remembering the top-right-bottom-left order for property values, think Css = Clockwise. ~wrp

3.1 Box Properties

None of the Box properties are inherited.

3.1.1 General

width: length ¦ percent ¦ auto: Applies to block-level and replaced elements
height: length ¦ auto: Applies to block-level and replaced elements
float: left ¦ right ¦ none: Allows text to wrap around an element
clear: left ¦ right ¦ both ¦ none: Forces the element below any floating elements on its sides

3.1.2 Margins

margin-top: length ¦ percent ¦ auto
margin-right: length ¦ percent ¦ auto
margin-bottom: length ¦ percent ¦ auto
margin-left: length ¦ percent ¦ auto
margin: margin-top margin-right margin-bottom margin-left: One to four values specified in the order listed; Negative values permitted

3.1.3 Padding

padding-top: length ¦ percent
padding-right: length ¦ percent
padding-bottom: length ¦ percent
padding-left: length ¦ percent
padding: padding-top padding-right padding-bottom padding-left: One to four values specified in the order listed; Default value 0

3.1.4 Borders

border-top-width: thin ¦ medium ¦ thick ¦ length
border-right-width: thin ¦ medium ¦ thick ¦ length
border-bottom-width: thin ¦ medium ¦ thick ¦ length
border-left-width: thin ¦ medium ¦ thick ¦ length
border-width: border-top-width ¦ border-right-width ¦ border-bottom-width ¦ border-left-width: One to four values specified in order listed
border-color: color: One to four values (if one, applies to all sides, otherwise border-top, -right, -bottom, -left, in that order
border-style: dotted ¦ dashed ¦ solid ¦ double ¦ groove ¦ ridge ¦ inset ¦ outset ¦ none: One to four values; if one, applies to all sides, otherwise border-top, -right, -bottom, -left, in that order
border-top: border-top-width ¦¦ border-style ¦¦ color
border-right: border-right-width ¦¦ border-style ¦¦ color
border-bottom: border-bottom-width ¦¦ border-style ¦¦ color
border-left: border-left-width ¦¦ border-style ¦¦ color
border: border-width ¦¦ border-style ¦¦ color
Examples: H2 { border: groove 3em }; A:link { border: solid blue }; A:visited { border: thin dotted #800080 }; A:active { border: thick double red }

3.2 Classification

display: block ¦ inline ¦ list-item ¦ none: block (a line break before and after the element); inline (no line break before and after the element); list-item (same as block except a list-item marker is added); none (no display); Not inherited
white-space: normal ¦ pre ¦ nowrap: Applies to block level elements; normal (collapses multiple spaces into one); pre (does not collapse multiple spaces); nowrap (does not allow line wrapping without a <BR> tag)

list-style-type: disc ¦ circle ¦ square ¦ decimal ¦ lower-roman ¦ upper-roman ¦ lower-alpha ¦ upper-alpha ¦ none
list-style-image: url ¦ none
list-style-position: inside ¦ outside
list-style: list-style-type ¦¦ list-style-position ¦¦ url: For simplified declaration, use one or more list-style property values in the order shown
Examples:: P.list {display:list-item; list-style: upper-roman inside}; LI {display:list-item; list-style: outside url(ball.gif)}

List-style properties only apply to elements with the display:list-item property.

3.3 Color and Background

color: colorname ¦ #rrggbb ¦ #rgb ¦ rgb(n,n,n) rgb(n%,n%,n%)
background-color: color_value ¦ transparent
background-image: url(url) ¦ none: This property is not well supported; use the combined background: color url(url) instead
background-repeat: repeat ¦ repeat-x ¦ repeat-y ¦ no-repeat
background-attachment: scroll ¦ fixed
background-position: percent ¦ length ¦ top ¦ center ¦ bottom ¦¦ left ¦ center ¦ right: Default/initial value is 0% 0% (horizontal vertical)
Position can be specified with horizontal or horizontal and vertical keywords
background: color_value ¦¦ url(url) ¦¦ background-repeat ¦¦ background-attachment ¦¦ background-position

3.4 Font

font-family: family_name, generic_name: Specify one or more names separated by commas; names containing white space may be quoted for clarity, but not required
Common generic names are: serif, sans serif, cursive, fantasy, monospace
Default value determined by browser/user settings
font-style: normal ¦ italic ¦ oblique
font-variant: normal ¦ small-caps
font-weight: normal ¦ bold ¦ bolder ¦ lighter ¦ 100 ¦ 200 ¦ 300 ¦ 400 ¦ 500 ¦ 600 ¦ 700 ¦ 800 ¦ 900: Numeric values interpreted according to available weights of font-family and may be converted to next higher or lower value by browser
font-size: absolute-size ¦ relative-size ¦ length ¦ percent: absolute-size: xx-small ¦ x-small ¦ small ¦ medium ¦ large ¦ x-large ¦ xx-large; relative-size: larger ¦ smaller; length: length; percent: n%
font: font-style ¦¦ font-variant ¦¦ font-weight ¦¦ font-size[/ line-height] ¦ font-family: For example,
P {font: italic bold 12pt/14pt Times, serif}
specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

3.5 Text

word-spacing: normal ¦ length
letter-spacing: normal ¦ length
text-decoration: none ¦[ underline ¦¦ overline ¦¦ line-through ¦¦ blink]: Not inherited
vertical-align: baseline ¦ sub ¦ super ¦ top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom ¦ percent: baseline (align baselines of element and parent); bottom (align bottom of element with lowest element on the line); middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent); sub (subscript); super (superscript); text-top (align tops of element and parent's font); text-bottom (align bottoms of element and parent's font); top (align top of element with tallest element on the line); Not inherited
text-transform: none ¦ Capitalize ¦ UPPERCASE ¦ lowercase
text-align: left ¦ right ¦ center ¦ justify: Applies to block-level elements; Default is usually 'left' but is defined as browser-determined
text-indent: length ¦ percent: Default 0; Applies to block-level elements
line-height: normal ¦ number ¦ length ¦ percent

4.0 Units

4.1 Color

A color is a either a keyword or a numerical RGB specification. The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in the CSS1 specification.

BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive }

The RGB color model is used in numerical color specifications. These examples all specify the same color:

EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values in the range of 0-255, or three percentage values in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values.

4.2 Length

Relative Units:

em (ems, the height of the element's font)
ex (x-height, the height of the letter "x" in the current font)
px (pixels, relative to the canvas resolution)

Absolute Units:

in (inches; 1in=2.54cm)
cm (centimeters; 1cm=10mm)
mm (millimeters)
pt (points; 1pt=1/72in)
pc (picas; 1pc=12pt)

Percentage Units:

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value. Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

4.3 URL's

Uniform Resource Locators (URL) specify the addresses of external files linked to current document. They are specified with the keyword url followed by the actual URL in parentheses. They can be absolute:

url(http://www.somedomain.com/document.html) url(file:///c¦myfile.html)

or relative to the current document:

url(background.gif) url(images/pix.jpg)

HTML src attributes usually require URL's to be in quotes; in stylesheets, quotes are permissible but not required.

References

W³C CSS1 Specification
W³C CSS2 Specification
W³C How to Link Style Sheets to HTML Documents
Eric Costello's CSS Layout Techniques
HTML Writer's Guild CSS-FAQ
Web Design Group CSS Reference
Web Developer
Webmaster's Reference Library
more resources at W³C

This page created by William R. Parke with WebTek HTML Editor

Last modified Wednesday, 24 October 2001

C S S_ Intro_wrp

Intro to Cascading Style Sheets

Contents

1.0 Style Sheet Basics

1.1 Selectors