Make your own free website on Tripod.com

Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]

 

CSS
Cascading Style Sheets

Total Control of the "Look" of Pages on Your Site

Why CSS?

HTML can be frustrating in controlling appearance of the page

Tables are awkward

Frames are annoying

Font tags overwhelm your code

Now something new!!!

The Truth

HTML was intended to mark up only web page structure NOT how it displays on screen

CSS makes it easy to define a page’s appearance without affecting the HTML structure

Style sheets work like templates

Define style for particular HTML elements

Use over and over

Foster consistency—change in style sheet affects entire page or site

CSS1 and CSS2

CSS1

Element styles defined

Page appearance

CSS2

Specify elements’ visibilities

Precision positions

How to overlap elements

How CSS Works

Groups of style rules

Groups of properties that define how an HTML element appears in a web browser

Can be defined within a document or in an external file

Your First Style Sheet

HTML is really tied to the content of the page and less and less to the "LOOK"

CSS are the tool that describes how your page should look

CSS is not hard just different

Trickiest part

Remembering all the different choices you have

Common adjustments like fonts are easy to control

Conflicting Style Definitions

More that one style sheet can be used in the same document

If conflicts exist, the style closest to the individual tag wins

Instead of writing the code every time you write your H3 command your define the style in a style sheet selector

H3 {font-family: Arial; font-style:italic; color:green}

CSS in HTML

Four ways to combine styles with HTML

Easiest

Defining style in the head

Defining style in the body

Harder

Creating an external style sheet file

Importing an external style sheet file

Beginning Style Sheets

Complete consistency and control

Invented 1997

Eventually will replace tags such as <font>

Three parts

The styles

Their placement

Fact that they can cascade

Styles

Common styles

Color and size of text

To get a blue headline you would type

<font color=#0000ff><h1>a blue headline</h1></font>

No way to assure that all <h1> headlines will be blue unless type this every time

CSS

Declare that all H1 headlines are blue for all pages that the style sheet controls

H1 {color:#0000ff;}

<h1>another blue headline</h1>

Placement

Style sheets can be placed in four places

In the <head>

Affect web page

In the <body>

Affect web page

In an external file

Affect entire site or pages that load the style sheet

Within an individual tag

Affect this tag only

Defining Style in the <Head>

Best way for a single document

Place selector and the style definitions inside comment tags nestled within the <style> element

Comment tags ensure that rules don’t appear or cause errors in older browsers

<STYLE> tag

Placed in header of HTML document

Enclose in <style>…</style>

Good idea to define the mime type for your browser

Usually "text/css"

Put the style rules within comment tags so that older browsers do not display them as text on the page

Example

<head>

<style type="text/css">

<- -!

H4 {color: blue}

- ->

</style>

</head>

Writing Your Style Sheet

Place the information in the head of your HTML document

<style type="text/css">

<- -!

P{color : #000000; font-family : arial narrow; font-size : medium;}

H1 {color : #ff0000; font-weight : bold; font-variant : small-caps;}

H2 {color : #0000ff; font-style : italics;}

.note{background-color : #ffff00;}

- ->

</style>

Defining in the <body>

Add the style attribute to an HTML tag

While this works it defeats the purpose of CSS

This creates the unique instance and is no different than regular coding

Good for applying a style to a <div> or <span> tag

Unique area of the web page

Style File

Create a separate document will all style info in it

Link or import it into document

For large site, this is way to go

Simple way to dictate how all instances of a tag will display

Linking

Supported by all 4.0 browsers

HTML tag <link>

Attributes

REL—tells what you are linking

TYPE—defines the type for the browser

text/css

text/javascript

HREF—path to the .css file

Example

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

External Style Sheets

Affect several pages or the entire site

First create the style file

Name it with .css extension (basic.css)

H3{font-family:Arial; font-style:italic; color:green}

Use the <link> element to call in the style sheet on you web page

<html>

<head>

<link rel="stylesheet" type="text/css" href="basic.css" title="style1">

</head>

Creating Style Sheets

Key

Decide what you want the text, background, etc. to look like

Color, font, style, typeface, headings, are all controlled here

CSS elements that change font include:

Family, size, style, variant, weight, color, background color

Explanation

First three styles set the tags <p>, <h1> and <h2>

Final style notation is used with the class attribute

Requires use of the <span>…</span> tag

Styles set by the first tag will be inherited by any tag within the span tag

Don’t have to set color or size again

Using CSS Site Wide

Advantages

Keeps site consistent

Link or import an external style sheet

All pages will have the same style (LOOK)

Control the look and feel of the site at once (in one file)

Maintain your style rules

Avoid constant reference to printed style guide

Create classes of styles that can be used on many different HTML elements

Easily group your styles—more efficient

Disadvantages

Increases download time

External style sheets are extremely large

If only have small number of styles, increases the complexity of the page

Display is slow

Have to wait until entire style sheet is loaded before page display

Creating External Style Sheets

Created with similar syntax to document level (in the <head>)

Rules for the site are written in a text file with the extension .css

Not required but a good habit

Makes file easily recognizable in your directory listing

Once created must link to your site documents (web pages)

Evolution of Style Sheets

Help to make web pages compatible to all browsers

Designed solely to define appearance as efficiently as possible

Browser support has been slow

Positioning with CCS Level 2

New level of control

Place each object exactly where you want it on a web page without resorting to tables

Works like this

When browser places an object on a page with CSS2 it creates an invisible rectangle called a box

You can set the box’s exact distance from the top or left edges (absolute positioning)

You can set the box in relation to other objects on the page (relative positioning)

You can specify the height and width of the box

You can layer objects on top of one another

You can overlap objects (clipping feature)

You can make entire objects visible or invisible

Position: How to

First declare the position property

Absolute or relative

H1{position: absolute; top: 150 px; width:200px; height:200 px}

Importing

Use an imported style sheet within a document level sheet

can import the attributes of an external style sheet while not losing any document specific ones

Only supported in IE

NOTE: Import is still "buggy" in Netscape 4.0

Called within a document level style declaration

Use URL("basic.css") to include the basic stylesheet

Example

<style>

@import URL (http://www.yoursite.com/styles.css);…continue styles

</style>

Combining Styles

Often combination of methods is best

Linked style sheet helps maintain consistent look

Certain page different look so add additional styles

Certain section of a page add additional styles

Merge as many external style sheets as you want by using multiple link tags

Cascading Style Sheets

Controls the behavior on the page

Can be easily changed for specific purpose

Can be simple or complex

Can control text box position or image location

Gives your site a new look by changing only one file

Cascading

Create an order of precedence for the browser to apply the style rules in multiple sheets

Style rule or sheet with highest precedence is the one used

Succeeding links or imports will override preceding

Rules within the document itself will override the style sheets

Innermost style sheet wins

Cascading Rules

Look for the style element that is created, if it is not in the document, use the default rules in the browser.

Determine if any of the style rules are marked as important and apply those to the appropriate elements.

Any style rules in the document will have precedence over the default browser settings.

Cascading Rules

The more specific the style rule, the higher the precedence it will have.

Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.

Define CSS Styles

Selector format

H3{font-family:Arial}

Definition is a combination of a property and its value

Values are specific traits the property can have

To include multiple properties in the same definition separate with semicolons

Defining Styles

To make style easier to read, stack the properties

To define more than one value for a single property add them on separated by commas

H3{font-family:Helvetica, Arial, san-serif; font-style:bold; color:green}

Browser will go down typefaces until finds one it recognizes

Classes

Define a class and you can attach it to any HTML element

Define a class by giving it a name preceded by a period

.periwinkle{color:#6699ff}

Once named you use the class within the HTML tag

<STRONG class="periwinkle">Text periwinkle bold.</STRONG>

ID for Javascript

Ids used like class except preceded by a number sign (#)

#bright{font-weight: bolder; color: #00ff00}

In tag looks like this

<P id="bright">This is bright text.</p>

Unless working in scripts (Javascript) stick with classes

Grouping Selectors

Group selectors with common styles

Separate them with a comma

Example

H1, TD, STRONG EM{font-family:Arial;color:blue}

Now all H1, bold emphasized, and table data elements will be Arial blue

IF you want one of these to have an additional element add that separately

H1{font-style:italic}

Advantages of CSS

Use less code

Don’t have to repeat tags in every page

Only have to worry about the content of a page

Easy to change the look of the site without touching or risking the content

Redesign is a matter of hours instead of days or weeks

Problems with CSS

Relatively late appearance and acceptance

First support

IE 3.0

Netscape 4.0

Will not work in earlier versions than those noted above

Can’t design completely with CSS

Not widely accepted in the industry

Everyone familiar with frames, tables, font tags, spacer images, etc.

Not easy to convince them to change

Must relearn and invest time and money in the change

Must retool all pages if go to CSS

REMEMBER!!

Does NOT work in earlier versions of IE and Netscape

CSS Tutorials

http://builder.cnet.com/Authoring/CSS/index.html

http://html.about.com/compute/html/library/weekly/aa111000a.htm

http://www.weballey.net/webdesign/stylesheets.html

CSS Reference Table found at

http://www.builder.com/Authoring/CSS/table.html?tag=st.bl.3880.ref_1.bl_table

 

 

This page was updated on:  04/10/02