cascading style sheets. css zallows for more control over the look of the pages. zproblems. older...

Cascading Style Sheets

CSS

Allows for more control over the look of the pages.

Problems. Older versions of the browsers do not fully support the CSS standards and even the newest browsers can be flaky in implementing certain CSS styles.

The Three Main Types of CSS

Inline styles - which can be inserted into any existing HTML tag.

Document level styles - which are styles embedded within the <HEAD> tag of an individual document.

An External CSS file which is linked to a collection of web pages/documents.

Inline Styles

The inline style is the simplest way to modify a tag. You insert the style attribute within the HTML tag and then assign properties and their values.

< H3 style="color:#663399; font-family: Arial, Helvetica, sans-serif">

Document Level Styles

<style> </style> Positioned between : </head>

<body> TAGS.Rules syntax:

selector { property:value; property:value, value, value; }

H3 { color:#663399; font-family: Arial, Helvetica, sans-serif";}

Document Level Styles

Nested in the style tag is where the selector portion of the tag is placed. It looks like a comment:

</head> <style>  </style> <body>

This is actually a document level style which will affect all the <H3> tags on this page.

External Styles

External style sheets allow you to create a separate text file which defines style properties.

Then apply those styles to a collection of documents (unlimited in size).

styles.css (text file with styles)<link href="css-external.css"

rel="stylesheet" type="text/css"> (order doesn’t matter)

External Styles (Text File)

h3 {color : Purple;font-size : 18pt;font-family : Impact;background : Silver;

}

External Styles (placement)

<html><head>

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

<title>C.S.S. External One</title></head><body>

Understanding the Cascading

Order of priority:

inlinedocument levelexternal

<H3> example

Style Classes

Classes allow you to create several styles for a single tag.

td.aa { color : Black; font-family : Verdana }td.bb { color : Navy; background : #D6EDEF; font-size : 9px; }td.c c { color : #286468 }

Homework

No Quiz next week.inline, document, external 10 points.all 3 styles (same tag) on 1 page 10

points.2 classes 1 tag 10 points.Homework not due until 5/8.

cascading style sheets. css zallows for more control over the look of the pages. zproblems. older...

Documents