Cascading Style Sheets

CMPS 491 Advanced Web Publishing Cascading Style Sheets

Cascading Style Sheets Basics

CSS Styles

Style sheets are amazingly easy to set up and they are very flexible. A style definition has two parts: the selector and the declaration. A declaration contains a property and a value as shown below:

selector {property: value;}

A property is always followed by a colon and the value can be a single keyword or a space-separated list of one or more keywords that are permitted for that property. A declaration is terminated by a semicolon. A selector usually contains multiple declarations. Several selectors can also be grouped together into a single rule. A selector can be any of the following:

An HTML tag selector: tagname {property: value;}
A class selector: .classname {property: value;}
An ID selector: #IDname {property: value;}

Defining an HTML Tag Selector

A selector is most often a re-defined HTML tag. When you use an HTML tag name as the selector name, you are redefining the HTML tag. Not all CSS declarations can be applied to all HTML selectors. Generally, the only modifications you can make to HTML tags are changes to how those tags display text. The HTML tag selectors associated with these types of tags are shown below.

   Selectors for Block-Level Tags 
      CENTER, DIV, H1-7, LI, OL, P, TABLE, TR, TD, TH, UL

   Selectors for Inline Tags
      A, B, BIG, EM, FONT, I, PRE, SPAN, STRIKE, STRONG, SUB, SUP, U

Examples

   <style type="text/css">
     /* A tag --  Link color red, font size 18 points, not underlined */
     /* H2 tag -- Text bold, font size 20 points, color blue, font face
        Geneva or the sans-serif, centered */
     A {text-decoration: none; font: 18pt; color: red;}
     H2 {font-size: 20pt; font-family: geneva, sans-serif;
         color: blue; text-align: center;}
   </style>

Click Here for examples

DIV and SPAN Tags

DIV (logical division) and SPAN (to span over an area) are HTML tags introduced to support style sheets. DIV is a powerful tag that allows you to create areas on the page. An area is a section of the page with a certain height and width and it can have its own style sheet attached. DIV tag is commonly used to create an element on a page that will be manipulated independently of the rest of the page. SPAN is for localized style-formatting. It can be used to apply a style sheet to an area of text or graphics without any line breaks. The DIV tag, on the other hand, can include a line break.

Defining and Using a Class Selector

In addition to HTML tag selectors, there are two other kinds of selectors: class and ID selectors. These selectors allow the assignment of styles independent to document elements. They can either be used on their own or be applied to an HTML tag. A class selector always starts with a period (.) and then the name of the selector. A definition given to a class selector will only work if the class is indicated in an actual HTML. A class selector can also be directly associated with an HTML selector, in which case it is a dependent class. That means the class selector can be used only with that particular HTML tag. Examples:

     <style type="text/css">
     .huge {font-size: 50pt;}        /* Independent class selector */
     span.tacky {font-style: italic; font-weight: bold;
       text-decoration: underline;}  /* Dependent class selector */
     </script>
     .
     .
     <br><big>CSS</big>
     <br><big class="huge">CSS</big>
     <br>Every third <span class="tacky">word</span> in 
        this <span class="tacky">sentence</span> is required 
        <span class="tacky"> to</span> be tacky.

Click Here for examples

Defining and Using an ID Selector

Like independent class selectors, ID selectors can be used to create unique styles that are independent of any particular HTML selector. Thus, they can be applied to any particular HTML tag. An ID selector definition always starts with a number sign and then the name of the selector. An ID selector is typically used only once for one element in a document. Example:

   <style type="text/css">
     #important {font-style: italic; color: red; background: yellow;}
     </style>
     .
     .
     <h2>This is important</h2>
     <h2 ID="important">This is important</h2>

Click Here for examples

Placement of Style Sheet Definitions

A style definition is usually created in between <STYLE> and </STYLE> tag pair. It is usually placed in the header section of the HTML document.
Example: <style>h1 {font-size: 30pt; color: blue;} </style>
A style definition can also be directly included inline with an HTML tag using the STYLE attribute.
Example: <h1 style="font-size: 30pt; color: blue;">
A style definition can be imported from an external file using the <LINK> tag.
Example: <link rel=stylesheet href="overlaptitles.css">
Comments in CSS are surrounded by /* and */ and they can span multiple lines.

Return to Web Site Home Page