<!-- SophiaKnows -->

CSS BASICS
Rev 3: Jan 2005

 

TABLE OF CONTENTS
  1. In General
  2. Getting Started
  3. Selecting Elements
    1. By Element TYPE
    2. By Element CLASS
    3. By Element ID
    4. Child Elements
  4. Pseudo-Classes
    1. :Hover Class
    2. :Link Class
    3. :Visited Class
    4. :Focus Class
  5. CSS 1 Properties
    1. Font Properties
    2. Text Properties
    3. Color & Background
    4. Box Properties
    5. Property Values
1. In General: CSS (Cascading Style Sheets) is a mechanism for separating the formatting and structure of an HTML document from its raw inline content.

CSS both rationalizes the footprint and rendering of document contents as well as providing enhanced control over its ultimate appearance and layout.

Most importantly, CSS permits developers to propagate and revise style and formatting properties for multiple site pages using a few discreet lines of code collected in one or more global source files.

The CSS standard was created by a working group of the World Wide Web Consortium (W3C) and is currently at version 2 (CSS 2.x)

This note provides an introduction to basic CSS methods as well as an overview of CSS 1 style properties: text, font, color, background and box attributes.

Although minor variations in implementation persist between IE and Gecko/Mozilla based clients, the basic properties reviewed here are fairly well behaved accross browsers and platforms.

An additional note dealing with CSS 2 methods and properties (in particular positioning) can be found here: CSS Part 2.

2. Using CSS

CSS formatting statements can be added to your HTML pages as: the value of an inline STYLE attribute (least attractive); The data of element of a STYLE tageset (better); or From a LINK to a source file (best): 

<ELEMENT STYLE="[statements]"></ELEMENT>

<STYLE type="text/css"><!-- [statements] --></STYLE>

<LINK rel="stylesheet" type="text/css" href="name.css" />
Listing  A.1  CSS Goes Here
<html>

<head>

<!-- CSS Can Be Stored In A Remote File  -->

<link rel="stylesheet" type="text/css" href="location.css" />


<!-- CSS Can Go In The Head  -->

<style type='text/css'>

<!--

/* statements */

 -->
</style>

</head>

<body>

<!-- CSS Can Go In The Body  -->

<style type='text/css'>

<!--

/* statements */

 -->

</style>

<!-- CSS Can Go Inside Elements -->

<p style="[statements]">Paragraph Text</p>

<p style="[statements]">Paragraph Text</p>

</body>

</html>

CSS statements are created and edited and stored as plaintext source using a basic text editor (e.g. Windows Notepad, Apple Simplext, BBEdit, Textpad ...)

CSS statements can be stored in a separate source file ending with the suffix: .css

As with any HTML source file, an HTML document that includes CSS statements is saved in a file ending in the suffix .html (.htm on Win 9x systems)

3. Selecting Elements

CSS style statements are applied to inline document elements selected by one (or more) of three basic methods: by element-type, by element-class and/or by element-id.

3.1 By Element Type

Statements can be applied to all elements of a generic type using the following basic syntax: 

element-type {
    [statements]
    }

<element-type> </element-type>
Or some slightly more specific examples selecting document anchors, paragraphs and headings
Listing  A.2  Selecting By Element Type
<style type='text/css'>
<!--

a  { color:red; }
p  { color:blue; }
h3  { font-size:16px; }

 -->
</style>

<a href="#">Link Text</a>

<p>Paragraph Text</p>

<h3>Heading 3 Text</h3>
Link Text

Paragraph Text

Heading 3 Text

3.2 By Element Class

Statements can be applied to a restricted class of document elements using class-names assinged by the developer. A class-name is the value of a text name assigned to the HTML CLASS attribute of one or more inline document elements (selectors) (anchors, paragraphs, divs, tables etc.): 

<element-type class="element-class">

Class member elements can be addressed by one of two types of statements: statements restricted by element-class and element-type; and/or statements restricted by class-name only: 

element-type.element-class {
    [statements]
    }

.element-class {
    [statements]
    }
Listing  A.3  Selecting By Element Class
<style type='text/css'>
<!--
.title { font-weight:bold; }
.normal { font-weight:medium; }
.fn  { font-size:10px; }
p.fn  { color:red; }

 -->
</style>

<span class=title>Title Paragraph</span>
<span class=normal>Normal Paragraph</span>

<p class=title>Title Paragraph</p>
<p class=normal>Normal Paragraph</p>

<p class=fn>Footnote Paragraph</p>
<div class=fn>Footnote Div</div>
Title Span Normal Span

Title Paragraph

Normal Paragraph

Footnote Paragraph

Footnote Div

3.3 By Element ID

Style Statements can be applied to a unique document element by using the generic syntax (#id) to select the element by its inline HTML ID

An element's ID is the value assigned to the elements inline HTML ID attribute. 

 <element-type id="id">

The targeted element is addressed by statements restricted by id. Note the convention of the pound sign (#) proceeding the id: 

#id {
    [statements]
    }
Listing  A.3  Selecting By Element ID
<style type='text/css'>
<!--
#title_1 { font-weight:bold; }
#normal_1 { font-weight:medium; }
 -->
</style>

<p id=title_1>The Title Paragraph</p>
<p id=normal_1>The Normal Paragraph</p>

The Title Paragraph

The Normal Paragraph

By convention element IDs should be unique to the document or at least element type. Conventions aside, the CSS implementation in most browsers will select multiple instances of commonly ID'd elements within a document much as they would class members.

Non-unique IDs may, however, create problems with positioning statements (not covered here) and other DOM technologies.

As such, repeating elements are more appropriately managed by class-name, and IDs are best reserved for non-recurring document elements such as headers, navigation bars and footers (see Listing A.7 below)

 

3.4 Child Elements

Some HTML elements may enclose other HTML elements. For example, one or more anchor links may fall within a page division <div></div>: 

<div id="navbar">

  <a href="#">HOME</a>
  <a href="#">ABOUT</a>

</div>

And here is the syntax for selecting the anchors enclosed by #navbar 

#id child-element-type { [statements] }

#navbar a { color:red; }

In addition, some HTML elements have intrinsic member elements. Ordered and unordered lists, for example, both enclose list items: 

<ol class="toc" id="toc1">

  <li>HOME</li>
  <li>ABOUT</li>

</ol>

<ul class="toc" id="toc2">

  <li>HOME</li>
  <li>ABOUT</li>

</ul>

And here is the syntax for selecting the list items (by type, class and id) 

ol li { font-size:11px; }

ol.toc li { font-size:11px; } // ordered list only (toc1)

.toc li { font-size:11px; }  // any .toc list item (toc1 & 2)

#toc1 li { font-size:11px; }

 

4. CSS Pseudo-classes

Pseudo-classes extend the display of base selector elements in response to one or more use actions:

:hover    applies to element indicated by pointer
:link    applies to unvisited anchor links
:visited    applies to visited anchor links
:active    applies to active anchor links
:focus    applies to element w/ focus

4.1 :hover

The :hover pseudo-class applies to a selected element only when the element is indicated by the user with the mouse (or pointing device).

Listing  A.5  :hover
<style type='text/css'>
<!--
a { color:blue; }
a:hover { color:red; }

p.fn { color:black; }
p.fn:hover { background-color:#ccf; }
 -->
</style>

<a href="#">Anchor 1</a>

<P class=fn>Footnote 1</P>
Anchor 1

Footnote 1

4.2 :link, :visited, :active

The :link, :visited, and :active pseudo-classes apply only to the case of anchor link elements (i.e. those inline document anchor elements which include an HREF attribute). 

#navbar a:link { color:white; }
#navbar a:visited { color:grey; }
#navbar a:active { color:gold; }
Listing  A.6  :link, :visited, :active
<style type='text/css'>
<!--
a:link { color:#009; }
a:visited { color:#006; }
a:active { color:#900; }
a:hover { color:red; } /* hover */
 -->
</style>

<a href="#">Anchor 1</a>
<a href="#">Anchor 2</a>

<P class=fn>Footnote 1</P>

4.3 :focus

The :focus pseudo-class can be applied to any selector element capable of receiving focus through user keyboard or pointer actions. Typically, focus is used duplicate the :hover properties for users who use the keyboard navigate anchor links 

a:focus { color:#900; }
Listing  A.7  :focus
<style type='text/css'>
<!--
a:focus { color:#900; }
:focus { color:#056; }
 -->
</style>

<a href="#">Anchor 1</a>
<a href="#">Anchor 2</a>
<input value="Input 1" />

Now that we have seen how to select elements to format, let's run through some of the properties that can be applied to the elments through style statements.

 

5. CSS 1 Properties

CSS 1 properties fall into 4 broad classes: font, text, color and background, and box properties. The following provides an intentionally abbreviated overview of the most common element style attributes.

Note that the bare words in list of values following each colon represent the optional literal values for that property. Values enclosed in angle brackets < > represent groups of literal values and units. Selecting on the highlighted text name of the value group will take you to a quick description of group values or syntax.

5.1 Font Properties

font-family: <font-family> | <generic-family>
font-style: none | italic
font-variant: none | smallcaps
font-weight: medium | bold
font-size: <absolute-size> | <relative-size> | <length> | <percentage>

5.2 Text Properties

text-decoration: none | underline | overline | line-through
text-transformation: none | capitalize | uppercase | lowercase
text-alignment: left | right | center | justify
text-indentation: <length> | <percentage>

5.3 Color & Background Properties

color: <color>
background-color: <color>
background-image: <url>
background-repeat: repeat | repeat n | no-repeat
background-attachment: scroll | fixed
background-position: <percentage> | <length>

5.4 Box Properties

margin: <length> | <percentage> | auto
padding: <length> | <percentage>

border:
border-width: thin | medium | thick | <length>
border-color: <color>
border-style: dotted | dashed | solid | double | groove | ridge | inset | outset

width: <length> | <percentage> | auto
height: <length> | <percentage> | auto
float: none | right | left
clear: none | left | right | both

5.5 Property Values

5.5.1 generic-family

A Generic class of fonts

  • sans-serif
  • serif
  • monospace

    5.5.2 font-family

    A Specific font name or names:

  • Times,"Times New Roman",Georgia;
  • Verdana,Arial,sans-serif;
  • Courier,"Courier New",monospace;

    5.5.3 percentage

    A percentage of the parent element's controlling attribute:

  • width and height: percentage is a percentage relative to the area of parent;
  • size: percentage is a percentage relative to the base size inherited from from the parent element.

    5.5.4 length

    Relative Length

  • em (ems, the height of the element's font)
  • px (pixels, relative to the canvas resolution)

    Absolute Length (deprecated)

  • in (inches)
  • cm (centimeters)
  • mm (millimeters)
  • pt (points)
  • pc (picas)

    5.5.5 absolute-size

    xx-small | x-small | small | medium | large | x-large | xx-large

    5.5.6 relative-size

    larger | smaller

    5.5.7 color

  • By #RRGGBB: E.g. color:#336699;
  • By #RGB: E.g. color:#369;
  • By NAME: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

    5.5.8 url

  • url(example.gif)
  • url(http://www.example.com/example.gif)
  • url( example.gif )
  • url("example.gif")
    Listing  A.7  Sample Template
    <style type='text/css'>
<!--
#heading, #navbar, #footer { padding:5px;text-align:center;}
#heading { background:#000;color:#fff;font-size:24px; }
#footer { background:#000; color:#fff;font-size:11px;}
#navbar { background:#ccc;color:#fff;font-size:10px; }
#navbar a:link { color:#369; text-decoration:none; }
#navbar a:visited { color:#036; }
#navbar a:hover { color:#900;text-decoration:underline; }
#main {
    padding:15px;
    background:#fff;
    color:#000;
    font-size:12px;
    }
 -->
</style>

<div id="heading">The Title</div>
<div id="navbar">
    <a href=#>HOME</a> |
    <a href=#>ABOUT</a> |
    <a href=#>FAQ</a>
</div>
<div id="main">Main Content</div>
<div id="footer">The Title Again</div>
    The Title
    Main Content

     

     

     

     

    The Title Again

    •  

    < CODEBASE | TOP^ | MAINPAGE >

    Text & Design By Tony Pisarra
    © SophiaKnows 1998-2004