Michigan'gov Style Sheets CSS

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 ltfontgt 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 gt View gt Text Size
• Netscape Menu gt Edit gt Preferences gt Appearancegt
  Fonts
• Unfortunately, there are plenty of obstacles.

4
Obstacles

• Netscape 4.x
• Keyword implementation follows suggested 1.5
  scaling factor. However
• Default size medium
• Doesnt recognize the imported (_at_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

• 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.

lt!-- Global CSS --gt ltstyle type'text/css'gt A,
BODY A font-family Arial, Helvetica,
sans-serif font-size small color
Blue A.ACTIVEcolor Black A.VISITED color
Purple graynavcolor E3E3E3 font-weight
bold .topnavlinkscolor Blue font-size
x-small .linkdivider color Blue font-size
x-small .bottomnavlinkscolor 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 .rightnavlink
sVISITED text-decoration underline color
FCFCFC font-size small .right_links
text-decoration none color FCFCFC
font-size small .right_linksVISITED
text-decoration underline color FCFCFC
font-size small .left_links color FCFCFC
font-size small .left_linksVISITED color
FCFCFC font-size small /// A, BODY A
font-family Arial, Helvetica, sans-serif
font-size x-small color Blue .onlineservices
links 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 .topnavlinksVISITED
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 .rightnavlinkshover
text-decoration underline color FCFCFC
font-size x-small .rightnavlinksVISITED
text-decoration none color FCFCFC
font-size x-small .right_links
text-decoration none color FCFCFC
font-size x-small .right_linkshover
text-decoration underline color FCFCFC
font-size x-small .right_linksVISITED
text-decoration none color FCFCFC
font-size x-small / / lt/stylegt
lt!-- Agency CSS --gt ltstyle type'text/css'gt .topna
vlinkscolor White .topnavlinksVISITED
color White .linkdivider color
White .rightnavlinks font-size
x-small .rightnavlinkshover font-size
x-small .rightnavlinksVISITED font-size
x-small .right_links font-size
x-small .right_linkshover font-size
x-small /// .rightnavlinks font-size
xx-small .rightnavlinkshover font-size
xx-small .rightnavlinksVISITED font-size
xx-small .right_links font-size
xx-small .right_linkshover font-size
xx-small / / lt/stylegt