1 / 7

Michigan - Style Sheets (CSS)

Michigan.gov - Style Sheets (CSS). Adding Style And Layout To HTML. 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

zenia
Download Presentation

Michigan - Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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 <font> 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 <!-- Global CSS --> <style type='text/css'> 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;} /* */ </style> • 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. <!-- Agency CSS --> <style type='text/css'> .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;} /* */ </style>

More Related