Cascading Style SheetsCSS

CS422Dick Steflik

CSS

• CSS is a style sheet language that allows the separation of content and the way it is formatted for documents written in some markup language– HTML (Hypertext Markup Language)– SVG (Scaleable Vector Graphics)– X3D (3-Dimensional Graphics)– XUL (XML User Interface Language)

Comment Characters

• /* */

elements/tags

• selectors:attribute { rules }– selector is an element or an element:attribute– rule is the formatting you wish for that element

• Example for HTML body and anchor tag

body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; }

a:visited{ color: #006699; text-decoration: none; }

divs

• You can also specify formatting for specific parts of a document such as HTML divs

#navBar{ float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }

where navBar is the id of a div in the document

class

• if an element has been assigned to a class the formatting will apply to that class

.relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; }.relatedLinks a:link, .relatedLinks a:visited { display: block; }

where relatedLinks is a div assigned to the class relatedLinks

positioning

• Normal Flow – left to right top to bottom• Float – taken out of the normal flow and

shifted to the left or right as far as possible• Absolute exactly where it is positioned and

everything else flows around it• values : top, bottom, right, left

cascading priority• (highest to lowest)• 1 – User Defined• 2 – Inline• 3 – Media type• 4 – Media Type• 5 – Selector specificity• 6 – Rule order• 7 – Parent inheritance• 8 – CSS property definition in HTML document• 9 – Browser default