Cascading Style Sheets CSS

Objective: CSS


  1. Uses
  2. Structure
  3. Options
  4. Printing
  5. Positioning
  6. Layout
  7. Examples

Book: Chapter 8

Web Readings:


The book does not go into great detail, but CSS are important enough to require more than what is in the book. So read the web resources and these notes to get more details on CSS is about.

Uses and Purpose

Cascading Style Sheets (CSS) is an enhanced type of html language used to control page layout and appearance of elements. CSS may be called styles but CSS are user defined styles not to be confused with built-in styles like italics, H1, etc.  CSS does some of the same things <font> and other tags in html do so many traditional formatting elements/attributes are now obsolete like:

but CSS also has many new features not found in core html that either do things easier or do things that traditional html could not (but that are typical in word processing which is kind of what html is) such as:

Purposes of CSS are

  1. Control how elements appear
  2. Separate formatting from content, e.g., to change 3 different headings to be a red color in regular html  required a <font color="red"> tag for each individual heading element, but CSS allows 1 command that indicates all heading elements get the same color and the command is in the heading and not each tag.
  3. Consistency: make elements on different pages appear the same
  4. Multiple pages are easier to maintain (related to above)
  5. Add new capabilities to give fine control over many aspects of a web page and special effects, for example things you could not easily do with html
  6. layout page without tables using CSS positioning

Pros & cons of CSS are:

CSS follow the xml model which is to separate the format from the content, whereas html format elements are mixed right in with the user content. It is recommended that you use CSS in web sites since they are useful and most browsers support basic CSS. One problem is there are 3 levels of CSS and some are not well supported, and you must recognize what rules in CSS belong to what levels so when you read a book or a web site about some cool CSS feature beware that it is commonplace. The levels (of CSS) are:

  1. CSS-1 original; included basic structure and the commonly used attributes for fonts, colors, positioning, box models, and external style sheet files
  2. CSS-2 latest, added features for things like media and print control, so is more advanced but some browsers have not adopted
  3. CSS-3 under development so do not use yet


For CSS you 1st define a style and then apply it to one or more elements either by

  1. define the attributes for a specific html element (tag), for example can make all <h1> text be red so any heading 1 will appear red
  2. define attributes for a "class" you make up; a class by itself will not change anything until you apply it to an element (user defined class names start with a period like ".MyClass")

CSS is very flexible and powerful but also a bit complicated. There are 3 ways to apply a CSS style:

  1. External CSS file: styles can be defined in a separate file (with extension  .css) which can be applied to different html files giving an easy way to maintain a consistent look for a site, for example can make headings be green for every page in a web site
  2. Embedded document wide style: defines a style inside a single page to control elements for the entire page, for example can make any headings in the current page be red (but cannot affect or be used on other pages).
  3. Inline style: used like an attribute inside a single element, for example can be used for 1 image to make its position be absolute. This is like traditional html instead of external/embedded which are like xml where format is separate from the content.

An external CSS file is common, especially on large or business sites, to control features you want to be the same on multiple pages like page color, headings, and default text font. Inline styles are common for individual element positioning, borders, and shading. Usually a web site will use an external CSS to control every page and embedded are only used for pages that differ from that norm. Indeed with use of classes in external CSS there really is no need for embedded and some may suggest only need external CSS.

External and Embedded separate the formatting from the content, which is actually a requirement in XML (but optional in html) so one will see that when dealing with XML it is required to use styles of sort to format the document.

Cascading means more than 1 style sheet can be defined on a page and the order of precedence is: inline, embedded, external (so inline is always used wherever its defined).

An external style sheet is a text file with the style command. The file has a .css extension, for example mystyle.css, and any html page can use it by inserting a <link> tag in the <head> section like
   <link rel="stylesheet" href="mystyle.css" type="text/css" />
Note: link is an empty tag with several required attributes, where you specify your file in the href similar to a hyperlink

A document wide style (or embedded style) uses the <style> tag in the <head> section.  like
<style type="text/css">
<!-- comment only to hide from old browser
   /* style sheet commands goes here, note /* */ is a comment  */
   type is required by validators but is an optional attribute for browsers which assume text/css. The type can also be in a meta tag like <meta http-equiv="Content:-Style-Type" contents="text/css">

An inline style uses style="" attribute inside an element in form
<element style="prop1: val1; prop2: val2">
where prop:val are property and value pairs with as many as needed , for example
<p style="margin-left: 2px;; font-family:Arial, Helvetica, sans-serif">
used in this paragraph to change the margin and font to arial. You can see lots of styles in the code for this page

Style Attributes

Commands in the style sheet are the same whether in a .css file or embedded on a page, and each command takes form
    element {attribute1: value ; atribute2: value;...}
where ... means as many attributes (often called properties in CSS and javascript) as you want. The element name is usually an html element (like h1). Note the syntax

for example, the style for this page is
body {color: black; background-color: red; font: 11pt}
h2 { font-family: Arial; color: #800000 }
h3 { font-family: Comic Sans MS; color: red }
p {text-indent: 0.25in; margin-left: 50px; margin-right: 100px;}
a:link {color: blue; text-decoration: underline;}
a:visited {color: red; text-decoration: none;}
a:active {color: red; text-decoration: none;}
a:hover {color: yellow; text-decoration: underline;}
<body style="background-color: #8CFF8C">

In above, the body color in the style did not take effect because it was overridden by the body tag. The order of elements or attributes does not matter. There are many different attributes and possible values to choose from. To learn more about them look at the reference manual in book or visit a web site

Multiple elements (separated by , ) can be defined on 1 line. The same element can be used multiple times for example:
h1, h2, h3 { font-family: Comic Sans MS;}
h2 {color: red }

Some common attribute and values are explained below with values shown in color. Before discussing specific tags, some attributes are common to different elements:

Styles can also be applied using a class. Define a class in a / CSS code using a . syntax
   .anyname { css code goes here }

instead of an element (it must be below body in external style files); then in html code use attribute like

attribute in a tag to apply the style. For example this page and this paragraph uses .myval {color:#CC0066} in style definition then is applied anywhere in html using code like
   <span class="myval">your text</span>

Classes are useful in 2 ways

  1. to apply a similar style (a class) multiple times
  2. to let an element have different styles, for example different <p> tags can use different classes

ID can be used instead of a class. However in XHTML 1.1 an id must be unique so can be used only once meaning to use in several places select a class instead. The syntax is a bit different, so define a class in a CSS code using # syntax
   #anyname { css code goes here }

instead of an element (it must be below body in external style files); then in html code use attribute like

attribute in a tag to apply the style. For example on this page could have used
myid {color:#AA0066}
in style definition
then applied it somewhere in html using code like
   <span id="myid">your text</span>

CLASS versusID
Since class and id can do same thing, when should each be used. Use a CLASS when there are are multiple instances since an ID  can only occur once on a page. One way to remember is that ID is like a person's id so is unique whereas a class has many people. Class is more common and used to make different elements (words, paragraphs etc) look alike. ID is mainly used for layouts for example where there is only 1 menu, 1 banner, 1 content pane, etc. You will notice "class" used a lot in this page to give common formatting to code snippets, while "id" is used further down in the LAYOUT examples to create areas for menu, banner, links content, etc. For more info see www.tizag.com/cssT/cssid.php

Use with Common Elements

Use of styles in some common elements is described below. Note: a # means a measurement like 12pt or 0.5in or sometimes just a single #

A : as seen above the anchor element has 4 pseudo classes (pseudo classifies elements based on its status, use or position for example links can be clsssified based on user's mouse click & position) ) and attributes can be
a:link{color:#000000 ; text-decoration: underline |  none}
already been visited
once you lick on
as cursor moves over it

Body: can use color, background-color, font, and also the attributes below
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
     repeat makes image tile
     repeat-x | y only tiles horizontal (along top) or vertical (along left margin)
background-position:valueX valueY;
          valueX can be: top, center, bottom, #%, pixel number
          valueY can be: right, center, left, #%, pixel number
for example BODY{background-image: url('name.gif'); background-repeat: no-repeat; background-position: 20% 0%}
puts the image in once at the top and 20% to the right
background: is shorthand (like font) for all the different background- classes

Lists ol ul:  
square | roman | lower-alpha | url("anyimage.gif");
list-style-position: inside;   (tightens up bullets to text)

TD: table uses font and padding attributes as described above and below

Text: can be controlled using <p>, <div>, <span> or other tags with the font and color styles. Other text styles are 
letter-spacing: #;
text-indent: #;
line-height: #;         (can be # of lines like 1, 2, 1.5, etc)
white-space: pre;   (works like <pre> element so whitespace is recognized)

 <div> and <span> tags are often used to group many elements into one style and to apply a class style. Recall <div> makes a return while <span> stays on same line. They are widely used with CSS. Virtually any content can be encapsulated in a SPAN or DIV tag and a style can be applied. So you can apply a style to a character, a word, a paragraph, multiple paragraphs, or an entire page using these elements with a style

Block Attributes

Block elements like <p> occupy a rectangular box model (like a word processing textbox) which can be controlled by a variety of attributes as below

margin-top: #;   amount of space between page edge and box border
margin-bottom: #;
margin-right: #;
margin-left: #;
margin: # # # #;  for all four margins in order of top bottom right left

padding-top: #;
padding-bottom: #;
padding-right: #;
padding-left: #;   amount of space between box border and its text
padding: #;  where # gets applied to all four sides

border-width: #; all 4 borders or use border-top-width border-bottom-width border-right-width border-left-width
#;  all 4 borders or use border-top-color border-bottom-color border-right-color border-left-color
border-style: none | solid | dashed | dotted;  plus others, the default is none
border:  is shorthand and can also be border-top  border-bottom  border-right  border-left

 Width, Height
 #; all 4 borders or use border-top-width border-bottom-width border-right-width border-left-width
#;  all 4 borders or use border-top-color border-bottom-color border-right-color border-left-color

This is an example of a Box Model using margins, border, padding, color, line height and width. CSS offer an alternative to tables.


Above was a concise summary of structure and common uses. There are many other CSS options and to use consult a reference manual or the textbook; the important thing for now is knowing the structure, purpose, and commonly used attributes and elements.


Html has no print control and is weak for printing, compared to say PDF or Word. CSS Pages can be set up to control printed pages. This is done using styles for:

Beware, as always for any styles, some of these may not work in all browsers, may only work in certain IE versions, so your mileage may vary. In particular most if not all of this is CSS-2.

Page Breaks: use styles  page-break-before or page-break-after although you could put thes styles directly in a page, the "cleaner" way to utilize is make a class in the head section like
<STYLE TYPE="text/css">
     P.breakhere {page-break-before: always}

Then anywhere you want a break instantiate the class with any element (like <img> or <p> ) for example
<P CLASS="breakhere">

@Media: Often what looks best onscreen is not optimal for printing so there are 3 choices:

  1. use 1 web page/css that looks decent but not best for both media (or do like many web sites and ignore printed media)
  2. create separate styles sheets for printed and onscreen that are optimized for both like the common "printer friendly link" you see on many sites...the drawback is you must maintain 2 copies of your pages
  3. use "media group" which incorporates onscreen and printed rules all in one style sheet. This makes the style sheet more cumbersome but advantage is only have 1 file to maintain and have optimized both print and onscreen for a better user experience. To do this put styles into different @media for example to create different colors depending on media. Of course, many users by default do not print background color so if that is your only concern then may not have to worry about it.

@media screen {body {color: green; background-color: red; font: 11pt} }  /* of course can use any other styles you want like font-family etc)
@media print {body {
color: black; background-color: white; font: 12pt} }

@Page use a page box model (@PAGE) to specify margins and printing specs for page in form:
<STYLE TYPE="text/css" media="print">
     @page  {margin: 1in; size: 8.5in 11in landscape} /* any of these are optional */
     Unfortunately, @page is not implemented in IE6 so forget about using @page for now, so if you need margins then really should use code liike
<style TYPE="text/css" media="print">
@page {margin: 3in; size: 8.5in 11in landscape}
html { margin: 3in; border: 1px solid red; }
body {margin: 3in; border: 1px solid green;}
Above seems to work in IE, meaning onscreen looks okay and has no margins since margins are only for media=print and margins do appear when printed due to the body/html rule and not the @page rule. But for other browsers, other things may or may not work, that is the problem with Css-2

In some ways use of media for screen and print is similar to Normal and Print view in MS-Word so what is shown on screen does not reflect all the margins and page setup that you see when printing. The problems ares Word takes care of it for you and Css-2 is not universal in browsers. Further, it is only something you need to worry about if you intend pages to be printed. Many people make printed documents into PDF's but they have their own problems (heavyweight, require plugin, overall annoying, awful onscreen viewing) so Css-2 offers a means to enable good onscreen viewing as well as basic print control like PDF or Word, if browsers and W3c can ever get everyone to adhere to the standards...LOL 


Elements, like <img>, can be positioned exactly with styles using 3 attributes
position: absolute | relative | fixed | inherit | static;   the type of position (see below)
left: #; top: #;   is the upper left xy location, instead can be right, bottom; see example in links at bottom of this page

In above:  absolute is an exact position, fixed is absolute except it stays on screen even when scrolled, static is default and uses normal position based on its order in document (does not use x,y),  relative is like static but offset by x,y, inherit means use attribute for parent container. Position does not work with all elements and is often used with <img> <div> <span> and <p>. Two other optional attributes to control how overlapping elements show:


A more advanced use of CSS is for page layout, basically instead of tables. This is more than the box model described earlier which was just for a small piece of text but instead layouts divide the entire page into areas. CSS layouts typically use CSS Id's with position attributes to define areas of a page like the left menu, top banner, main content etc.

A working example is shown in link below (examples), but the basic code is below. Layouts are not a new type of style but rather simply combine what you learned above to make a page layout in 2 basic steps

  1. CSS code defines areas of page using IDs
  2. html code applies each ID once using a DIV or span to make the page area appear. The content for each area is embedded in the DIV/SPAN tag

FIRST: in CSS code define CSS ids for page areas, in this example #Header, #Content, #Menu (and again these can be any names you want and you can define position and attributes anyway you want...further you could add more areas like #Bottom or #RightSide etc)

#Header {
margin:50px 0px 10px 0px; padding:17px 0px 0px 20px; height:33px;
border-style:solid; border-color:black; border-width:1px 0px;  line-height:11px;

#Content {
margin:0px 50px 50px 200px;

#Menu {
position:absolute; top:100px; left:20px;
width:172px; padding:10px;

SECOND: in html code use DIV with each ID to layout the page like
<div id="Header">
BANNER AREA so your logo, image etc goes here

<div id="Content">
Content goes here like <h1>CONTENT AREA</h1><p>This is a simple two column layout with a left menu box.</p>

<div id="Menu">Left menu so links go here
<a href="http://www.alistapart.com/" title="A List Apart: For People Who Make Websites">A List Apart</a><br />
<a href="" title="">Fake Link One</a><br />



There are many examples in textbook and on web.  This page uses some CSS so can look at its code to see examples, although it can be confusing to see code with all the text notes mixed in. Some other instructor examples are