Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)Within theWithin the

Enterprise ArchitectureEnterprise ArchitectureFrameworkFramework

(EAF)(EAF)

Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)Within theWithin the

Enterprise Architecture Enterprise Architecture FrameworkFramework

(EAF)(EAF)

Wes ZiegelerAugust 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: http://www.w3schools.com/

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

.header - Controls top header logo sizeand borders.

.nav - Controls navigatio bar width, color,position, and text align. Border is set atnone. Height is controlled by text lineinput.

.crumbs - Controls the Last PagesVisited area.

a.navlink:hover - Controls top navbartext hover color and size.

a.navlink:visited - Controls top navbartext color and size post-visit.

a.navlink - Controls top navbar text colorand size pre-visit.

.fontClass - Controls the hover text sizeand color.

.fgClass - Controls hover BG color.Border controls the hover cell paddingnot the table border around it.

.bgClass - Controls the hover border BGcolor. Border controls the hover bordershading.

.timezone - Controls the current timefunctionallity and placement. Notcurrently used.

Body - Controls the page BG color andtext alignment.

Body - Controls the page BG color andtext alignment.

.rightmain - Controls the small printer,pdf and e-mail icons at the top of thepage.

#content - Controls all content of theentire site. Left page border, main textthrough-out the site and quick navheadings. Any content not controlled byanother style.

#col3 - Controls the Quick NavInformatics.

.jumphead - Controls col1 and col3headings.

.jumpbodyeven - Controls BG color andtext of even containers.

.jumpbodyodd - Controls BG color andtext of odd containers.

#col1 - Controls column 1 informatics.NOT Download Reports.

#col2 - Controls the functionallity ofcolumn 2. May be overidden by.fontCass or in the code.

.leftmain - Controls text in column 2.Does NOT affect framesets.

.footer - Controls standard_html_footerarea font, floating elements, BG color,width and text alignment.

a.footlink - Controls footer text, colorand size for user and privacy policy, pre-visit.

a.footlinkvisited - Controls footer text,color and size for user, privacy andcomments, post-visit.

a.footlink:hover - Controls footer textcolor and size on hover.

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

.nav - Controls navigatio bar width, color,position, and text align. Border is set atnone. Height is controlled by text line

input.

.crumbs - Controls the Last PagesVisited area.

a.navlink:hover - Controls top navbartext hover color and size.

a.navlink:visited - Controls top navbartext color and size post-visit.

a.navlink - Controls top navbar text colorand size pre-visit. .fontClass - Controls the hover text size

and color.

.fgClass - Controls hover BG color.Border controls the hover cell paddingnot the table border around it.

.bgClass - Controls the hover border BGcolor. Border controls the hover border

shading.

.timezone - Controls the current timefunctionallity and placement. Notcurrently used.

Body - Controls the page BG color andtext alignment.

Body - Controls the page BG color andtext alignment.

.rightmain - Controls the small printer,pdf and e-mail icons at the top of thepage.

#content - Controls all content of theentire site. Left page border, main text

through-out the site and quick navheadings. Any content not controlled by

another style.

#col3 - Controls the Quick NavInformatics.

.jumphead - Controls col1 and col3headings.

.jumpbodyeven - Controls BG color andtext of even containers.

.jumpbodyodd - Controls BG color andtext of odd containers.

#col1 - Controls column 1 informatics.NOT Download Reports.

#col2 - Controls the functionallity ofcolumn 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*/

.header - Controls top header logo sizeand borders.

.nav - Controls navigatio bar width, color,position, and text align. Border is set atnone. Height is controlled by text lineinput.

.crumbs - Controls the Last PagesVisited area.

a.navlink:hover - Controls top navbartext hover color and size.

a.navlink:visited - Controls top navbartext color and size post-visit.

a.navlink - Controls top navbar text colorand size pre-visit. .fontClass - Controls the hover text size

and color.

.fgClass - Controls hover BG color.Border controls the hover cell paddingnot the table border around it.

.bgClass - Controls the hover border BGcolor. Border controls the hover bordershading.

.timezone - Controls the current timefunctionallity and placement. Notcurrently used.

Body - Controls the page BG color andtext alignment.

Body - Controls the page BG color andtext alignment.

.rightmain - Controls the small printer,pdf and e-mail icons at the top of thepage.

#content - Controls all content of theentire site. Left page border, main textthrough-out the site and quick navheadings. Any content not controlled byanother style.

#col3 - Controls the Quick NavInformatics.

.jumphead - Controls col1 and col3headings.

.jumpbodyeven - Controls BG color andtext of even containers.

.jumpbodyodd - Controls BG color andtext of odd containers.

#col1 - Controls column 1 informatics.NOT Download Reports.

#col2 - Controls the functionallity ofcolumn 2. May be overidden by.fontCass or in the code.

.leftmain - Controls text in column 2.Does NOT affect framesets.

.footer - Controls standard_html_footerarea font, floating elements, BG color,width and text alignment.

a.footlink - Controls footer text, colorand size for user and privacy policy, pre-visit.

a.footlinkvisited - Controls footer text,color and size for user, privacy andcomments, post-visit.

a.footlink:hover - Controls footer textcolor and size on hover.

CSS GRAPHICAL MAPPING (Page 1 of 5)

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