CSS Cascading Style Sheets Cascading Style Sheet CSS
- Slides: 11
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) } a: active {color: rgb(102, 255, 0) } h 1, h 2, h 3{font-family: Verdana, Arial, Helvetica} h 1 {color: rgb(255, 204, 0) } h 2 {color: rgb(153, 255, 51) } h 3 {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 <link> 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 the. Web 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 h 1 heading tag: <h 1 style="background-color: #FFCC 00"> Welcome to My Home Page </h 1> 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 <style> start and </style> stop tags: <head> <title>My Home Page</title> <style> h 1 { font-family: Comic Sans MS; color: #0000 DD } </style> </head>
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: <link href="css/jadevalley. css“ rel="stylesheet" type="text/css" /> 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: <style>. warning { color: red; font-family: arial; font-weight: bold} </style> You use this class via the class parameter: <p>Be careful when you try this, because <span class="warning">the burner is hot!</span></p>
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 is the Netscape standards evangelist who is generally credited with being the world’s expert on style sheets. Meyer has recommended a crossbrowser format for creating CSS layouts.
Three-Column CSS Layout HTML{margin: 0; padding: 0} BODY{margin: 0; padding: 0} DIV. left{position: absolute; top: 3 em; left: 0; width: 12. 5%; padding: 4 px; font-size: 11 px; background-color: white; border: 1 px solid black; z-index: 10} DIV. middle{margin: 0 20% 1 em 20%; padding: 0; background-color: pink} DIV. right{position: absolute; top: 4 em; right: 0; width: 18%; font-size: 11 px; z-index: 11}
