70 likes | 156 Views
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
E N D
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 • ADA – Section 508 compliancy includes using relative font sizes. • More flexible than the deprecated <font> tag. • Instead of change to db architecture, use stylesheets.
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.
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”
Browser visitor data • Internet Explorer - 85% • Internet Explorer 6.x - 77% • Internet Explorer 5.x - 8% • Netscape 4.x - 1% • Netscape 7.x - 1%
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
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>