CSS Cascading Style Sheets

Cascading Style Sheet (CSS) A cascading style sheet (CSS) is a set of rules that define styles to be applied to entire Web pages or individual Web page elements. Each rule consists of a selector followed by a set of curly braces containing the style properties and their values. The selector can be an HTML element, a user-defined style known as a class, or the ID of a specific element on a page.

Sample CSS Style Rules a:link {color: rgb(255,204,0) } a:visited {color: rgb(153,204,204) } a:active {color: rgb(102,255,0) } h1, h2, h3{font-family: Verdana, Arial, Helvetica} h1 {color: rgb(255,204,0) } h2 {color: rgb(153,255,51) } h3 {color: rgb(0,255,204) }.callout { font-size: small } #trailer { font-family: serif }

Three Kinds of Style Sheets There are three ways of applying cascading style sheets to a Web page: external, embedded, and inline. An external CSS keeps all the style definitions in a separate CSS file that you include in a Web page at runtime by using the tag to apply the style sheet to the page. An embedded CSS is a style sheet that gets copied physically into the head of the Web page and applies to theWeb page as a whole. An inline CSS is a style sheet that applies to only one page element so it gets copied “inline” on the page with that element.

Creating an Inline CSS To create an inline CSS, you add a style parameter to the specific instance of the tag you want to style. For example, consider the following inline styling of an h1 heading tag: Welcome to My Home Page When an inline CSS has more than one style change, you separate them with ;

Creating an Embedded CSS The embedded CSS goes in the head section between the start and stop tags: My Home Page h1 { font-family: Comic Sans MS; color: #0000DD }

Creating an External CSS When you want a style to apply to multiple Web pages, you create an external CSS and link the Web pages to it. The Jade Valley site does this, for example, via the command: Let’s create an external CSS to experience one in action.

Creating a Style Class In cascading style sheets, a class is a named definition of one or more styles. You create the class by prefixing its name with a dot in the CSS file. For example:.warning { color: red; font-family: arial; font-weight: bold} You use this class via the class parameter: Be careful when you try this, because the burner is hot!

CSS Page Layout On the cutting edge of cascading style sheets is a feature called absolute positioning, which enables you to position page elements precisely onscreen based on x,y coordinates. ITAW has a rock pile you can make. Dreamweaver has absolute positioning layouts you can try.

Eric Meyer Eric Meyer is the Netscape standards evangelist who is generally credited with being the world’s expert on style sheets. Meyer has recommended a cross- browser format for creating CSS layouts.

Three-Column CSS Layout HTML{margin: 0; padding: 0} BODY{margin: 0; padding: 0} DIV.left{position: absolute; top: 3em; left: 0; width: 12.5%; padding:4px;font-size: 11px; background-color: white; border: 1px solid black; z-index: 10} DIV.middle{margin: 0 20% 1em 20%; padding: 0; background-color: pink} DIV.right{position: absolute; top: 4em; right: 0; width: 18%; font-size: 11px; z-index: 11}