Jegsworks: Free Online Computer Lessons Logo:Jegsworks Jan's Illustrated Computer Literacy 101

Home > Resources & Examples > Jan's Web Scripting Demo > CSS

Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Web Scripting Demo: CSS

Cascading Style Sheets (CSS) offer you a lot of flexibility in formatting what you see on a web page. If you are not familiar with CSS, you should take a look at Jan's CSS demoIcon: In site. We will just review some basics for the current demo.

A style defines one or more properties for an element of a web page, like a paragraph, a heading, the whole body of the page, or any other part of the page. Or, the style may be for a class that can be applied to an element.

A style sheet is a collection of one or more styles.

Where do you put a style?

  • External: An external style sheet is linked to the page in the HEAD.
    <link rel="stylesheet" href="demo.css" type="text/css">
    There are no HTML tags in such an external file, just a list of the selectors and classes.
  • Internal: Between STYLE tags in the HEAD section of the page
    <style type="text/css">
    ... styles listed here...
  • Inline: In the STYLE attribute of an element
    <div style="width:300px; height:400px;background-color:wheat; color:red;font-size:large;">


A style has a simple syntax but you must be very precise with your typing and naming.

Each rule has a selector and a declaration.
The general form is:    selector {property:value;property:value;}

A colon(:) separates a property from its value. A semicolon (;) separates property-value pairs.

h3 {color:teal; 
     font-family:"Comic Sans MS", Helvetica, sans-serif; 

p  {font-family:Arial, Helvetica, sans-serif;

In the example above, the selectors are h3, a third level heading, and p, a paragraph. The declaration is the part between the curly brackets { }, also called braces. Of course a declaration can have just one property:value or many.

The line breaks are ignored in a style sheet you can write separate lines for easy reading. Keep all on one line if there is one short property, like
h1 {color:maroon;}.

A value that has a space must be between quotes or double-quotes, like "Comic Sans MS" in the example above.

No spaces are allowed between a number and its unit of measure, like 12pt in the example above.

Write a Class

The general form for a class:
     .classname {property:value;property:value;}

.explanation {background-color: AliceBlue;color:green;}

The general form for a class that can only be applied to a specific type of element:      element.classname {property:value;property:value;}

p.explanation {background-color: AliceBlue;color:green;}

A class name cannot have a space in it or start with a number.

Apply a Class

To apply a class to an element, you write a CLASS attribute inside the opening tag:

<p class="explanation">

Here is a paragraph with the class "explanation" applied.

If the class was defined for a specific element, like h3.explanation, it will be ignored if you apply it to a different type of element like a P or DIV or H1.

Multiple classes: You can apply multiple classes at once to an element. The order in the style sheet makes a difference but not the order in the element.

If the styles are in the HEAD as:
.explanation {background-color: AliceBlue;color:green;}
.excited {font-style:italic; color:red;}

<div class="explanation excited"> will produce:
This div has two classes applied - explanation and then excited.

Color for text is the only property that both styles set. What you see is from the last class applied, excited.

Write an ID Style

Any element can have an ID, like <p id="myfooter">.

In a style sheet, you can write a style that will apply ONLY to the element with that name. A particular ID can be used by only one element on the page.

#myfooter {font-size:smaller;color:#999999;}

This is a paragraph with id="myfooter"

The Cascade

The power of cascading style sheets is in the 'cascade'. The styles are applied from the outside in.

External > Internal > Inline

So an inline style overrides all other style settings. (This is a good reason to avoid writing inline styles!)

For example, you can define some properties for several elements at the same time and then define other properties differently.

<style type="text/css">
h1, h2, h3, h4 {font-family: Arial, Helvetica, sans-serif; font-weight:bold; color:navy;}

h1 {font-size: xx-large;text-align:center;}

h2 {font-size:x-large;}

h3 {font-side:large;}

h4 {font-size:medium;font-style:italic;color:purple;}

Which would create: