Chapter 6 Cascading Style Sheets™ (CSS) Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg Fall 2007 Yanjun Li CSRU2350
Cascading Style Sheets (CSS) We shift our focus to formatting and presenting information. Separation of structure from presentation To simplify maintaining and modifying a web page Three ways to define the style of XHTML files External Style Sheet Embedded Style Sheet Inline Style Fall 2007 Yanjun Li CSRU2350
Cascading Style Sheets (CSS) Separation of structure from presentation Inline Styles Declare an individual element’s format Attribute style inside a single XHTML element CSS property Properties background-color, color Properties font-family, font-size Followed by a colon and a value For example: <p style = “font-size: 20pt; color: #0000ff”> your paragraph</p> Fall 2007 Yanjun Li CSRU2350
Inline Styles Fall 2007 Yanjun Li CSRU2350
Example inline <html> <body> <p>This text does not have any style applied to it.</p> <p style = "font-size: 20pt"> This text has the <em>font-size</em> style applied to it, making it 20pt.</p> <p style = "font-size: 20pt; color: #6666ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and light blue.</p> </body> </html> Fall 2007 Yanjun Li CSRU2350
Color property body { color:red; } h1 { color:#00ff00; } p { color:rgb(0,0,255); } Fall 2007 Yanjun Li CSRU2350
2.Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head element. To achieve separation between the CSS code and the XHTML Element style Attribute type describes a file’s content using Multipurpose Internet Mail Extensions (MIME) type Example: <style type=“text/css”> </style> Fall 2007 Yanjun Li CSRU2350
CSS Rules For an element in XHTML, you can specify a displaying rule The body of each rule is enclosed in { }. Properties background-color, color Properties font-family, font-size Example : li, p {color: red; font-size: 12pt} Fall 2007 Yanjun Li CSRU2350
Style Class Defines styles that can be applied to any type of element. The declaration: .special {. . . } Attribute class of an XHTML element is used to apply a style class: Example : <p class=“special”> Fall 2007 Yanjun Li CSRU2350
Example <head> <title>Style Sheets</title> <style type = "text/css"> em { font-weight: bold; color: black } h1 { font-family: tahoma, helvetica, sans-serif } p { font-size: 12pt; font-family: arial, sans-serif } .special { color: #6666ff } </style> </head> Fall 2007 Yanjun Li CSRU2350
font-size property 12-point Relative values— xx- small, x-small, small, smaller, medium, large, larger, x-large and xx-large— Fall 2007 Yanjun Li CSRU2350
Fall 2007 Yanjun Li CSRU2350
Font family/ font-family: tahoma, helvetica, sans-serif The browser attempts to use the fonts in the order they appear in the list. It’s advisable to end a font list with a generic font family name in case the other fonts are not installed on the user’s computer. In this example, if the tahoma font is not found on the system, the browser will look for the helvetica font. If neither is found, the browser will display its default sans-serif font. Fall 2007 Yanjun Li CSRU2350
3.Linking External Style Sheets Can provide uniform look and feel to entire site File extension : styles.css CSS comments : /* ….*/ Element link in the head section of the XHTML document : <link rel = “stylesheet” type=“text/css” href=“styles.css” /> Fall 2007 Yanjun Li CSRU2350
Conflicting Styles (1) Cascading: all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: Browser default External style sheet Embedded style sheet (inside the <head> tag) Inline style (inside an HTML element) Fall 2007 Yanjun Li CSRU2350
Conflicting Styles (2) Inheritance : Child (nested) element inherits styles of parent element. Descendant’s properties have greater specificity than ancestor’s properties. Child’s style > Parent’s style Fall 2007 Yanjun Li CSRU2350
Grouping Element XHTML Element span : a grouping/inline-level element. Apply CSS rules to a block of text. XHTML Element div: a similar element, but display on its own line, with margins above and below (a block-level element). Fall 2007 Yanjun Li CSRU2350
Length Measurement Relative-length Measurement is based on screen resolution. px (pixels) : margin-left: 75px em (height of an uppercase M) : font-size: 1.5em ex (height of a lowercase x) Absolute-length Measurement in (inches), cm (centimeters), mm (millimeters), pt (points, 1 pt = 1/72 in), pc (picas, 1 pc = 12 pt). Fall 2007 Yanjun Li CSRU2350
In next lecture Fall 2007 Yanjun Li CSRU2350
Font font-size sets the size of a font xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, XXpt, xx% font-family: a prioritized list of font family names and/or generic family names for an element arial, sans-serif font-weight sets the weight of a font normal, bold, bolder, lighter, 100 ~ 900 font-style sets the style of the font normal, italic, oblique Fall 2007 Yanjun Li CSRU2350
2.6 Backgrounds background-image specifies the image URL background-position places the image on the page background-repeat controls the tiling of the background image background-attachment fixed scroll Fall 2007 Yanjun Li CSRU2350
background.html (1 of 2) Fall 2007 Yanjun Li CSRU2350
background.html (2 of 2) Fall 2007 Yanjun Li CSRU2350
Fall 2007 Yanjun Li CSRU2350
2.7 Element Dimensions CSS rules can specify the actual dimensions of each page element Example: style=“width:20%; height:30%” Fall 2007 Yanjun Li CSRU2350
width.html (1 of 2) Fall 2007 Yanjun Li CSRU2350
width.html (2 of 2) Fall 2007 Yanjun Li CSRU2350
2.5 Positioning Elements Absolute positioning Relative positioning Property position: “position : absolute;” Properties top, left, right, bottom The distances from margins of its containing block-level element. z-index attribute Layer overlapping elements properly, higher in front of lower value. Relative positioning Elements are positioned relative to other elements Property position : “position : relative; ” Fall 2007 Yanjun Li CSRU2350
positioning.html (1 of 1) Fall 2007 Yanjun Li CSRU2350
Fall 2007 Yanjun Li CSRU2350
positioning2.html (1 of 2) Fall 2007 Yanjun Li CSRU2350
positioning2.html 2 of 2 Fall 2007 Yanjun Li CSRU2350
Fall 2007 Yanjun Li CSRU2350
6.12 Web Resources www.w3.org/TR/css3-roadmap www.ddj.com/webreview/style tech.irt.org/articles/css.htm Fall 2007 Yanjun Li CSRU2350
W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct jigsaw.w3.org/css-validator/validator-upload.html Fall 2007 Yanjun Li CSRU2350
Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc. Fall 2007 Yanjun Li CSRU2350