Presentation is loading. Please wait.

Presentation is loading. Please wait.

Michigan.gov - Style Sheets (CSS) Adding Style And Layout To HTML.

Published byPiers Neal Modified over 9 years ago

Similar presentations

Presentation on theme: "Michigan.gov - Style Sheets (CSS) Adding Style And Layout To HTML."— Presentation transcript:

1 Michigan.gov - Style Sheets (CSS) Adding Style And Layout To HTML

2 CSS Background Why use stylesheets Portal II – move to agency format Done to take advantage of existing features and develop new features as well. Right Nav and other link classes ADA – Section 508 compliancy includes using relative font sizes. More flexible than the deprecated tag. Instead of change to db architecture, use stylesheets.

3 CSS Standards CSS standard has seven font-size keywords intended to give designers a simple means of setting font sizes without creating accessibility problems. Sizes range from xx-small to xx-large and are relative to users’ browser preferred “medium” settings. Find the settings here: IE: Menu > View > Text Size Netscape: Menu > Edit > Preferences > Appearance> Fonts Unfortunately, there are plenty of obstacles.

4 Obstacles Netscape 4.x Keyword implementation follows suggested 1.5 scaling factor. However … Default size “medium” Doesn’t recognize the imported (@import) stylesheets Internet Explorer 4/5 Incorrect implementation of keywords. Default size “small”

5 Browser visitor data Internet Explorer - 85% Internet Explorer 6.x - 77% Internet Explorer 5.x - 8% Netscape 4.x - 1% Netscape 7.x - 1%

6 Where classes are used Top Nav links Left Nav links Body links Short Description links OnLine services (list with more) links Right Nav links Right Links Bottom Nav links

7 Implementation A, BODY A {font-family : Arial, Helvetica, sans-serif; font-size: small; color : Blue;} A.:ACTIVE{color: Black} A.:VISITED {color: Purple;} #graynav{color: E3E3E3; font-weight : bold;}.topnavlinks{color: Blue; font-size : x-small;}.linkdivider {color: Blue; font-size : x-small;}.bottomnavlinks{color: Blue; font-size : x-small;}.bodylinks { text-decoration : underline; color : Black; font-size : small;}.shortdesclinks { text-decoration : underline; color : Black; font-size : x-small;}.onlineserviceslinks { text-decoration : underline; color : Black; font-size : x-small;}.miyear {color : #E8E4D8; font-size : medium;}.rightnavlinks {text-decoration : none; color : #FCFCFC; font-size : small;}.rightnavlinks:VISITED {text-decoration : underline; color : #FCFCFC; font-size : small;}.right_links {text-decoration : none; color : #FCFCFC; font-size : small;}.right_links:VISITED {text-decoration : underline; color : #FCFCFC; font-size : small;}.left_links {color : #FCFCFC; font-size : small;}.left_links:VISITED {color : #FCFCFC; font-size : small;} /*/*/ A, BODY A {font-family : Arial, Helvetica, sans-serif; font-size: x-small; color : Blue;}.onlineserviceslinks { text-decoration : underline; color : Black; font-size : xx-small;}.shortdesclinks { text-decoration : underline; color : Black; font-size : xx-small;}.topnavlinks {color: Blue; font-size : xx-small;}.topnavlinks:VISITED {color: Blue; font-size : xx-small;}.linkdivider {color: Blue; font-size : xx-small;}.bodylinks { text-decoration : underline; color : Black; font-size : x-small;}.bottomnavlinks {color: Blue; font-size : xx-small;}.rightnavlinks {text-decoration : none; color : #FCFCFC; font-size : x-small;}.rightnavlinks:hover {text-decoration : underline; color : #FCFCFC; font-size : x-small;}.rightnavlinks:VISITED {text-decoration : none; color : #FCFCFC; font-size : x-small;}.right_links {text-decoration : none; color : #FCFCFC; font-size : x-small;}.right_links:hover {text-decoration : underline; color : #FCFCFC; font-size : x-small;}.right_links:VISITED {text-decoration : none; color : #FCFCFC; font-size : x-small;} /* */ How to implement The stylesheet is included in the html head area. Stored in the db header record for each site. Site colors are used by default. Agencies can redefine default class settings..topnavlinks{color: White;}.topnavlinks:VISITED {color: White;}.linkdivider {color: White;}.rightnavlinks {font-size : x-small;}.rightnavlinks:hover {font-size : x-small;}.rightnavlinks:VISITED {font-size : x-small;}.right_links {font-size : x-small;}.right_links:hover {font-size : x-small;} /*/*/.rightnavlinks {font-size : xx-small;}.rightnavlinks:hover {font-size : xx-small;}.rightnavlinks:VISITED {font-size : xx-small;}.right_links {font-size : xx-small;}.right_links:hover {font-size : xx-small;} /* */

Download ppt "Michigan.gov - Style Sheets (CSS) Adding Style And Layout To HTML."

Similar presentations

CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.

CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
Unit 20 - Client Side Customisation of Web Pages

Unit 20 - Client Side Customisation of Web Pages
Tutorial 4: Creating page layout with css

Tutorial 4: Creating page layout with css
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.

Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties.

1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties.
Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.

Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.
Web-based Application Development Lecture 5 January 24, 2006 Anita Raja.

Web-based Application Development Lecture 5 January 24, 2006 Anita Raja.
Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.

Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.

Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.

3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.

Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).

HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Drboots presents. Web 101 Utility links | Join SWIFT | Pylons Navigation links Some place Another place Links Nothinghere Content goes here This is content…seriously.

Drboots presents. Web 101 Utility links | Join SWIFT | Pylons Navigation links Some place Another place Links Nothinghere Content goes here This is content…seriously.
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,

1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.

Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Similar presentations

Ads by Google