Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007

What is the power of CSS 1.Create style rules for appearance of page (formatting) separate from the web page itself that apply to all pages in the web site. 2.In HTML formatting was done by attributes in individual element tags

Purpose of Styles 1.Remove formatting from HTML tags –HTML code focuses on only on page structure and content –Formatting defined separately from HTML tags and attributes 2.Comply with W3C XHTML 4.01 strict DocType 3.Web browsers continue to render formatting in HTML (deprecated elements/attributes) for backwards compatibility

CSS Building Block: Style Rule A Style Rule has two main parts A Style Rule has two main parts –A Selector An (X)HTML element, or An (X)HTML element, or A designer created named group or id (advance topic) A designer created named group or id (advance topic) –The Declaration In the format of Property:value In the format of Property:value Property can be a HTML attribute Property can be a HTML attribute Property can be designer defined (advanced topic) Property can be designer defined (advanced topic)

CSS Building Block: Style Rule Style Rule examples Style Rule examples – h1 {color:red;} – h1 {color:forestgreen; background:red;} Color/background can be Color/background can be –A named color ( see Visibone or DevGuru Color chart 2) –Hexadecimal number of a color #228B22 (forestgreen) #228B22 (forestgreen) –img {border:4px solid red;}

CSS Building Block: Style Rule Style Rule examples Style Rule examples – Comments for Style Rules Begin with /* Begin with /* End with */ End with */ –Comments can be on line before or on same line after (but not before) the rule /* solid red border for images */ img {border:4px solid red;} /* solid red border for images */ img {border:4px solid red;} img {border:4px solid red;} /* solid red border for images */ img {border:4px solid red;} /* solid red border for images */

Where can Style Rules be located? Style rules can be located 1.In an individual element tag (“local”) 2.In an individual web page (“internal”) 3.In a web site (“external”) 4.On a web server (“imported”)

Where can Style Rules be located? 1.Individual element ( “local”) –Style rule applies only to that element header text header text –Good for exceptions to more global rules –Must retype or copy & paste for each element that you want the style to apply to as in (X)HMTL

Where can Style Rules be located? 2.In a web page (“internal”) –Rule located in the element tag –Rule applies to all occurrences of the element on that page –Must retype or copy & paste to other pages

Where can Style Rules be located? 2.In a web page (“internal”) Example: img {border:4px solid red;} /* other styles */ 2.In a web page (“internal”) Example: img {border:4px solid red;} /* other styles */

Where can Style Rules be located? 3.In a separate.css file (External) file –As for (X)HMTL, the file must be text, so use Notepad or other HTML editor. –File name for base css rules is base.css (in advanced work there may be supplemental.css files) –File must be in same folder as web pages to keep pathname simple –Reference the base.css file in the head section of each web page If in same folder as other web pages, pathname is simple If in same folder as other web pages, pathname is simple If in subfolder of other web pagers, pathname must include the folder name. If in subfolder of other web pagers, pathname must include the folder name.

Where can Style Rules be located? 3.External file Referenced in the head of each page Referenced in the head of each page rel attribute stands for “relation” rel attribute stands for “relation” indicates if css file is base, preferred, or alternate indicates if css file is base, preferred, or alternate

Where can Style Rules be located? 3.External file All elements on all pages of the web site are automatically formatted according to the style definitions in base.css All elements on all pages of the web site are automatically formatted according to the style definitions in base.css There are advanced techniques for making exceptions. There are advanced techniques for making exceptions.

Where can Style Rules be located? 3.External file example (the base.css file): /* Base CSS styles */ /* Base CSS styles */h1{ color:forestgreen; /*text color*/ background:red;text-align:right;} h2{….} /*file can contain many styles*/

Can I use style rules in all three locations? 1.Yes. But what if there are conflicts? –All other things equal, the later the style appears the more precedence it has “Local” (in element ) has the highest precedence “Local” (in element ) has the highest precedence Internal (page) is second Internal (page) is second External (stylesheet) is third External (stylesheet) is third There are more complicated situations than these and techniques for exceptions and grouping that are beyond the scope of this course. There are more complicated situations than these and techniques for exceptions and grouping that are beyond the scope of this course.

Browser Support? 1.Most browsers support most of CSS2 2.None fully support CSS2 –Note: from Castro when IE7 was in beta testing before it was released

CSS Classes (advanced topic) 1.Classes enable the designer to define different styles for the same type of HTML element. 2.Syntax: a period after the selector is used to identify the different classes for a CSS selector: p.right {text-align:right;} p.center {text-align:center;}

CSS Classes 3.In the HTML element, the class to be used must be identified (assume external style sheet for examples below): 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.

CSS Classes 4.As the visitor will view this part of the page: This paragraph will be right aligned. This paragraph will be center aligned. This paragraph will be right aligned.

Pseudo-classes (links) 1.Classify elements on characteristics other than their name, attributes or content. 2.Allows formatting of characteristics that cannot be deduced from the document tree (how HTML elements are organized). 3.May be dynamic, in the sense that an element may acquire or lose a pseudo- class while a user interacts with the page. 4.Formatting of hypertext links is one use.

Pseudo-classes Link styles must be defined in this order to prevent conflicts: –Link (unfollowed link, the default appearance). –Visited (after a link is followed) –Hover (while mouse is over the link) –Active (while mouse button is pressed down during hover)

Pseudo-classes Example: (each written single line so that all can be seen at once; style sheet example on next slide) a:link {color: red;} a:visited {color: teal;} a:hover {color: green;} a:active {color: yellow;}

Formatting links with CSS Proper formatting of style sheet with blank line between styles: a:link{Color:red;}a:visited{….}

Formatting links with CSS 1.Colors can be color names or hexadecimal codes beginning with #. 2.Other styles to use with links: –text-decoration “none” removes the default underline “none” removes the default underline “underline” adds underline where the developer wants it “underline” adds underline where the developer wants it

Formatting links with CSS 2.Other styles to use with links: –font-weight Causes other text to move as “bold” requires more space, which can be annoying Causes other text to move as “bold” requires more space, which can be annoying Best to use only when no other text follows the link Best to use only when no other text follows the link

Link styles and browsers The style of visited links is governed by the web browser. The style of visited links is governed by the web browser. This is another aspect of “cascading styles” where the user and/or browser has some control over web page appearance. This is another aspect of “cascading styles” where the user and/or browser has some control over web page appearance.

Link styles and browsers Once a link is followed, its appearance remains as defined in the “visited” style. Once a link is followed, its appearance remains as defined in the “visited” style. To reset the link to the default of “not visited”, delete your “browser history” To reset the link to the default of “not visited”, delete your “browser history” Best to test with your secondary browser if you want to keep the history of recently visited web sites for your primary browser. Best to test with your secondary browser if you want to keep the history of recently visited web sites for your primary browser.

“Web Safe” Fonts for font- family Serif Serif –Georgia, Times, Times New Roman, Garamond, and Century Schoolbook Sans-serif Sans-serif –Verdana, Arial, Helvetica, Trebuchet, and Tahoma Choose two from each list Choose two from each list The third font in each list should be the generic “serif” or “sans-serif” The third font in each list should be the generic “serif” or “sans-serif” The browser chooses any serif or sans-serif font it finds The browser chooses any serif or sans-serif font it finds

“Web Safe” Fonts for font- family p {font-family: Georgia, ‘Times New Roman’, serif;} h1 {Verdana, Arial, sans-serif;} Note: include quotation marks around property values with spaces.