1 / 11

CSS

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.

flann
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Cascading Style Sheets

  2. 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.

  3. 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 }

  4. 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 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.

  5. 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:<h1 style="background-color:#FFCC00">Welcome to My Home Page </h1> • When an inline CSS has more than one style change, you separate them with ;

  6. 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> h1 { font-family: Comic Sans MS; color: #0000DD } </style> </head>

  7. 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.

  8. 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>

  9. 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.

  10. 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.

  11. 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}

More Related