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
| 
Fly