Cascading Style Sheets (CSS) Within the Enterprise Architecture Framework (EAF) Wes Ziegeler August 3, 2006

What is CSS? CSS stands for Cascading Style Sheets There are actually two different languages to choose from when you create a style sheet level 1 (CSS1) level 2 (CSS2) Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one For more details on CSS, See:

CSS1 vs. CSS2 Level 1 (CSS1) Compatible with both Netscape Navigator 4 (or later) and Microsoft Internet Explorer 4 (or later) Level 2 (CSS2) Only partially implemented in the current crop of browsers

Types of Styles External Style Sheets can save you a lot of work Styles sheets define how HTML elements are to be displayed External style sheets enable you to change the appearance and layout of all the pages in your Website, just by editing one single CSS document!

External vs. Inline While External Style Sheets control your entire site there are times you may want to use Inline styles to control a specific element Excessive use of this practice will defeat the purpose of the External Style sheet and result in unmanageable maintenance While the EAF does employ the use of inline styles, it is minimal

CSS within EAF: No Comments BODY { BACKGROUND: #ffffff; TEXT-ALIGN: center }.fontClass { FONT-SIZE: 12px; FONT-FAMILY: Verdana, Lucida, Helvetica, Arial, sans-serif }.fgClass { BORDER-RIGHT: #c2b6a0 1px solid; BORDER- TOP: #c2b6a0 1px solid; BORDER-LEFT: #c2b6a0 1px solid; BORDER-BOTTOM: #c2b6a0 1px solid; BACKGROUND-COLOR: #c1dbf6 }.bgClass { BORDER-RIGHT: #c2b6a0 1px solid; BORDER- TOP: #c2b6a0 1px solid; BORDER-LEFT: #c2b6a0 1px solid; BORDER-BOTTOM: #c2b6a0 1px solid; BACKGROUND-COLOR: #c1dbf6 } FIELDSET { BACKGROUND: #ffffff; TEXT-ALIGN: left } LEGEND { FONT-SIZE: 14px } TABLE { FONT-SIZE: 14px; FONT-FAMILY: Verdana, Lucida, Helvetica, Arial, sans-serif; POSITION: relative }

CSS within EAF: Textual Mapping /*comment-- Controls the entire page background - except BG around the headerlogo, last pages visited BG, portal/quicknav header BG, data listings BG and hover box BG.--comment*/ BODY { BACKGROUND: #FFFFFF; TEXT-ALIGN: center; } /*comment-- controls the hover text. --comment*/.fontClass { font-family: Verdana, Lucida, Helvetica, Arial, sans-serif; font-size: 12px; } /*comment-- Controls the BG of hovers, border controls the hover cell padding not the table border around it. --comment*/.fgClass { background-color: #A95328; border: 1px solid #C2B6A0; } /*comment--BG color controls the hover border, border controls the hover border shading. -- comment*/.bgClass { background-color: #A95328; border: 1px solid #C2B6A0; }

CSS within EAF: Graphical Mapping Created in Visio Snapshot of EAF Home Page The arrows represent CSS controls for HTML components within the site This is basically a guide of how to do business Provides ideas for future projects A total of (5) snapshots site wide cover the major components within the CSS

.header - Controls top header logo size and borders..nav - Controls navigatio bar width, color, position, and text align. Border is set at none. Height is controlled by text line input..crumbs - Controls the Last Pages Visited area. a.navlink:hover - Controls top navbar text hover color and size. a.navlink:visited - Controls top navbar text color and size post-visit. a.navlink - Controls top navbar text color and size pre-visit..fontClass - Controls the hover text size and color..fgClass - Controls hover BG color. Border controls the hover cell padding not the table border around it..bgClass - Controls the hover border BG color. Border controls the hover border shading..timezone - Controls the current time functionallity and placement. Not currently used. Body - Controls the page BG color and text alignment. Body - Controls the page BG color and text alignment..rightmain - Controls the small printer, pdf and icons at the top of the page. #content - Controls all content of the entire site. Left page border, main text through-out the site and quick nav headings. Any content not controlled by another style. #col3 - Controls the Quick Nav Informatics..jumphead - Controls col1 and col3 headings..jumpbodyeven - Controls BG color and text of even containers..jumpbodyodd - Controls BG color and text of odd containers. #col1 - Controls column 1 informatics. NOT Download Reports. #col2 - Controls the functionallity of column 2. May be overidden by.fontCass or in the code. CSS GRAPHICAL MAPPING (Page 1 of 5)

CSS within EAF: In Conclusion /*comment-- Controls the entire page background - except BG around the headerlogo, last pages visited BG, portal/quicknav header BG, data listings BG and hover box BG.--comment*/ BODY { BACKGROUND: #FFFFFF; TEXT-ALIGN: center; } /*comment-- controls the hover text. --comment*/.fontClass { font-family: Verdana, Lucida, Helvetica, Arial, sans-serif; font-size: 12px; } /*comment-- Controls the BG of hovers, border controls the hover cell padding not the table border around it. --comment*/.fgClass { background-color: #A95328; border: 1px solid #C2B6A0; } /*comment--BG color controls the hover border, border controls the hover border shading. -- comment*/ Textual Mapping Graphical Mapping The important objectives to aim for are: Select the appropriate styles for your project Avoid or minimize the use of inline styles with external styles At a minimum comment your CSS An extra plus is a graphical mapping of the styles used to control your HTML