Cascading Style SheetsCascading Style Sheets

Based on Castro, Based on Castro, HTML for the HTML for the WWW, 6WWW, 6thth edition editionRon Gerton, Fall 2007Ron Gerton, Fall 2007

What is the power of CSSWhat is the power of CSS

1.1. Create style rules for Create style rules for appearance of page (formatting) appearance of page (formatting) separate from the web page separate from the web page itself that apply to all pages in itself that apply to all pages in the web site.the web site.

2.2. In HTML formatting was done by In HTML formatting was done by attributes in individual element attributes in individual element tagstags

Purpose of StylesPurpose of Styles

1.1. Remove formatting from HTML tagsRemove formatting from HTML tags– HTML code focuses on only on page HTML code focuses on only on page

structure and contentstructure and content– Formatting defined separately from HTML Formatting defined separately from HTML

tags and attributestags and attributes

2.2. Comply with W3C XHTML 4.01 strict Comply with W3C XHTML 4.01 strict DocTypeDocType

3.3. Web browsers continue to render Web browsers continue to render formatting in HTML (deprecated formatting in HTML (deprecated elements/attributes) for backwards elements/attributes) for backwards compatibilitycompatibility

CSS Building Block: CSS Building Block: Style RuleStyle Rule A Style Rule has two main partsA Style Rule has two main parts

– A SelectorA Selector An (X)HTML element, orAn (X)HTML element, or A designer created named group or id A designer created named group or id

(advance topic)(advance topic)

– The DeclarationThe Declaration In the format of Property:valueIn the format of Property:value Property can be a HTML attributeProperty can be a HTML attribute Property can be designer defined Property can be designer defined

(advanced topic)(advanced topic)

CSS Building Block: Style CSS Building Block: Style RuleRule Style Rule examplesStyle Rule examples

– h1 {color:red;}h1 {color:red;}– h1 {color:forestgreen; h1 {color:forestgreen;

background:red;}background:red;} Color/background can beColor/background can be

– A named color ( see Visibone or DevGuru A named color ( see Visibone or DevGuru Color chart 2)Color chart 2)

– Hexadecimal number of a colorHexadecimal number of a color #228B22 (forestgreen)#228B22 (forestgreen)

– img {border:4px solid red;}img {border:4px solid red;}

CSS Building Block: CSS Building Block: Style RuleStyle Rule Style Rule examplesStyle Rule examples

– Comments for Style RulesComments for Style Rules Begin with /*Begin with /* End with */End with */

– Comments can be on line before or on Comments can be on line before or on same line same line afterafter (but not before) the rule (but not before) the rule

/* solid red border for images *//* solid red border for images */img {border:4px solid red;} img {border:4px solid red;}

img {border:4px solid red;} /* solid red border img {border:4px solid red;} /* solid red border for images */for images */

Where can Style Rules be Where can Style Rules be located?located?

Style rules can be locatedStyle rules can be located

1.1. In an individual element tag In an individual element tag (“local”)(“local”)

2.2. In an individual web page In an individual web page (“internal”)(“internal”)

3.3. In a web site (“external”)In a web site (“external”)

4.4. On a web server (“imported”)On a web server (“imported”)

Where can Style Rules be Where can Style Rules be located?located?

1.1. Individual element ( “local”)Individual element ( “local”)– Style rule applies only to that Style rule applies only to that

elementelement <h1 {color:forestgreen; <h1 {color:forestgreen;

background:red;}>background:red;}>header textheader text</h1> </h1>

– Good for exceptions to more global Good for exceptions to more global rulesrules

– Must retype or copy & paste for Must retype or copy & paste for each element that you want the each element that you want the style to apply to as in (X)HMTLstyle to apply to as in (X)HMTL

Where can Style Rules be Where can Style Rules be located?located?

2.2. In a web page (“internal”)In a web page (“internal”)– Rule located in the <head> Rule located in the <head>

element tagelement tag– Rule applies to all occurrences of Rule applies to all occurrences of

the element on that pagethe element on that page– Must retype or copy & paste to Must retype or copy & paste to

other pagesother pages

Where can Style Rules be Where can Style Rules be located?located?2.2. In a web page (“internal”)In a web page (“internal”)

Example:Example:

<head><head> <--! other (X)HMTL head tags --> <--! other (X)HMTL head tags --> <style type= “text/css”> <style type= “text/css”> img {border:4px solid red;} img {border:4px solid red;} /* other styles */ /* other styles */ </style> </style> <--! other (X)HMTL head tags --> <--! other (X)HMTL head tags --> <head> <head>

Where can Style Rules be Where can Style Rules be located?located?3.3. In a separate .css file (External) fileIn a separate .css file (External) file

– As for (X)HMTL, the file must be text, so use As for (X)HMTL, the file must be text, so use Notepad or other HTML editor.Notepad or other HTML editor.

– File name for base css rules is File name for base css rules is base.css (in advanced work there may be base.css (in advanced work there may be supplemental .css files)supplemental .css files)

– File must be in same folder as web pages to keep File must be in same folder as web pages to keep pathname simplepathname simple

– Reference the base.css file in the head section of Reference the base.css file in the head section of each web pageeach web page

If in same folder as other web pages, pathname is If in same folder as other web pages, pathname is simplesimple

If in subfolder of other web pagers, pathname must If in subfolder of other web pagers, pathname must include the folder name.include the folder name.

Where can Style Rules be Where can Style Rules be located?located?3.3. External fileExternal file

Referenced in the head of each pageReferenced in the head of each page rel attribute stands for “relation” rel attribute stands for “relation”

indicates if css file is base, preferred, or indicates if css file is base, preferred, or alternate alternate

<head> <head> <--! other head tags --> <--! other head tags --> <link rel=“stylesheet” type=“text/css” <link rel=“stylesheet” type=“text/css” href=“base.css” /> href=“base.css” /> <--! other head tags --> <--! other head tags --> <head> <head>

Where can Style Rules be Where can Style Rules be located?located?

3.3. External fileExternal file All elements on all pages of the All elements on all pages of the

web site are automatically web site are automatically formatted according to the style formatted according to the style definitions in base.cssdefinitions in base.css

There are advanced techniques for There are advanced techniques for making exceptions.making exceptions.

Where can Style Rules be Where can Style Rules be located?located?3.3. External file example (the base.css External file example (the base.css

file):file): /* Base CSS styles *//* Base CSS styles */

h1h1

{{

color:forestgreen; /*text color*/color:forestgreen; /*text color*/

background:red;background:red;

text-align:right;text-align:right;

}}

h2{….} /*file can contain many styles*/h2{….} /*file can contain many styles*/

Can I use style rules in all Can I use style rules in all three locations?three locations?1.1. Yes. But what if there are conflicts?Yes. But what if there are conflicts?

– All other things equal, the later the style All other things equal, the later the style appears the more appears the more precedenceprecedence it has it has

““Local” (in element ) has the highest Local” (in element ) has the highest precedenceprecedence

Internal (page) is secondInternal (page) is second External (stylesheet) is thirdExternal (stylesheet) is third There are more complicated situations than There are more complicated situations than

these and techniques for exceptions and these and techniques for exceptions and grouping that are beyond the scope of this grouping that are beyond the scope of this course.course.

Browser Support?Browser Support?

1.1. Most browsers support most of Most browsers support most of CSS2CSS2

2.2. None fully support CSS2None fully support CSS2

– Note: from Castro when IE7 was in Note: from Castro when IE7 was in beta testing before it was releasedbeta testing before it was released

CSS Classes (advanced CSS Classes (advanced topic)topic)

1.1. Classes enable the designer to Classes enable the designer to define different styles for the define different styles for the same type of HTML element.same type of HTML element.

2.2. Syntax: a period after the selector Syntax: a period after the selector is used to identify the different is used to identify the different classes for a CSS selector:classes for a CSS selector:

p.right {text-align:right;}p.right {text-align:right;}

p.center {text-align:center;} p.center {text-align:center;}

CSS ClassesCSS Classes

3.3. In the HTML element, the class to In the HTML element, the class to be used must be identified be used must be identified (assume external style sheet for (assume external style sheet for examples below):examples below):

<p.right>This paragraph will be right <p.right>This paragraph will be right aligned.</p>aligned.</p>

<p.center>This paragraph will be center <p.center>This paragraph will be center aligned.</p>aligned.</p>

<p.right>This paragraph will be right <p.right>This paragraph will be right aligned.</p>aligned.</p>

CSS ClassesCSS Classes

4.4. As the visitor will view this part As the visitor will view this part of the page: of the page:

This paragraph will be right aligned.This paragraph will be right aligned.

This paragraph will be center aligned.This paragraph will be center aligned.

This paragraph will be right aligned.This paragraph will be right aligned.

Pseudo-classes (links)Pseudo-classes (links)

1.1. Classify elements on characteristics other Classify elements on characteristics other than their name, attributes or content.than their name, attributes or content.

2.2. Allows formatting of characteristics that Allows formatting of characteristics that cannot be deduced from the document cannot be deduced from the document tree (how HTML elements are organized). tree (how HTML elements are organized).

3.3. May be dynamic, in the sense that an May be dynamic, in the sense that an element may acquire or lose a pseudo-element may acquire or lose a pseudo-class while a user interacts with the page.class while a user interacts with the page.

4.4. Formatting of hypertext links is one use. Formatting of hypertext links is one use.

Pseudo-classesPseudo-classes

Link styles must be defined in this Link styles must be defined in this order to prevent conflicts:order to prevent conflicts:

– Link (unfollowed link, the default Link (unfollowed link, the default appearance).appearance).

– Visited (after a link is followed)Visited (after a link is followed)– Hover (while mouse is over the link)Hover (while mouse is over the link)– Active (while mouse button is Active (while mouse button is

pressed down during hover)pressed down during hover)

Pseudo-classesPseudo-classes

Example: (each written single line so that all can Example: (each written single line so that all can be seen at once; style sheet example on be seen at once; style sheet example on next slide)next slide)

a:link {color: red;}a:link {color: red;}

a:visited {color: teal;}a:visited {color: teal;}

a:hover {color: green;}a:hover {color: green;}

a:active {color: yellow;}a:active {color: yellow;}

Formatting links with CSSFormatting links with CSS

Proper formatting of style sheet with Proper formatting of style sheet with blank line between styles:blank line between styles:

a:link{a:link{Color:red;Color:red;}}

a:visited{a:visited{……..}}

Formatting links with CSSFormatting links with CSS

1.1. Colors can be color names or Colors can be color names or hexadecimal codes beginning hexadecimal codes beginning with #.with #.

2.2. Other styles to use with links:Other styles to use with links:– text-decorationtext-decoration

““none” removes the default underlinenone” removes the default underline ““underline” adds underline where the underline” adds underline where the

developer wants itdeveloper wants it

Formatting links with CSSFormatting links with CSS

2.2. Other styles to use with links:Other styles to use with links:– font-weightfont-weight

Causes other text to move as “bold” Causes other text to move as “bold” requires more space, which can be requires more space, which can be annoyingannoying

Best to use only when no other text Best to use only when no other text follows the linkfollows the link

Link styles and browsersLink styles and browsers

The style of visited links is The style of visited links is governed by the web browser.governed by the web browser.

This is another aspect of This is another aspect of “cascading styles” where the “cascading styles” where the user and/or browser has some user and/or browser has some control over web page control over web page appearance.appearance.

Link styles and browsersLink styles and browsers

Once a link is followed, its appearance Once a link is followed, its appearance remains as defined in the “visited” remains as defined in the “visited” style.style.

To reset the link to the default of “not To reset the link to the default of “not visited”, delete your “browser history”visited”, delete your “browser history”

Best to test with your secondary Best to test with your secondary browser if you want to keep the browser if you want to keep the history of recently visited web sites for history of recently visited web sites for your primary browser.your primary browser.

““Web Safe” Fonts for Web Safe” Fonts for font-familyfont-family SerifSerif

– Georgia, Times, Times New Roman, Georgia, Times, Times New Roman, Garamond, and Century SchoolbookGaramond, and Century Schoolbook

Sans-serifSans-serif– Verdana, Arial, Helvetica, Trebuchet, and Verdana, Arial, Helvetica, Trebuchet, and

TahomaTahoma Choose two from each listChoose two from each list The third font in each list should be the The third font in each list should be the

generic “serif” or “sans-serif” generic “serif” or “sans-serif” The browser chooses any serif or sans-serif The browser chooses any serif or sans-serif

font it findsfont it finds

““Web Safe” Fonts for Web Safe” Fonts for font-familyfont-family

p {font-family: Georgia, ‘Times New p {font-family: Georgia, ‘Times New Roman’, serif;}Roman’, serif;}

h1 {Verdana, Arial, sans-serif;}h1 {Verdana, Arial, sans-serif;}

Note: include quotation marks Note: include quotation marks around property values with around property values with spaces. spaces.