Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes
Copyright © 2003 Pearson Education, Inc. Slide 3-2 CHAPTER 3 Adding Cascading Style Sheets to XHTML Documents
Copyright © 2003 Pearson Education, Inc. Slide 3-3 Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) were introduced by the W3C in 1996 to provide HTML authors with more control over document formatting CSS style sheets work with XHTML, XML and HTML files and are widely accepted by Web browsers A single style sheet can be used to provide uniform formatting styles to a group of documents CSS files are plain text files and can be edited with a text editor CSS files can be validated on-line at the W3Cs website:
Copyright © 2003 Pearson Education, Inc. Slide 3-4 Cascading Style Sheets (CSS) Why use Style Sheets? Allows for the separation of content and presentation Allows for multiple presentation layouts for a single document Allows a single style document to format many documents Style elements are being deprecated in the XHTML language and will not be available in future versions of XHTML past the 1.0 version The element set of XHTML 1.0 Strict will be most compatible with future versions as it does not contain many of the presentational elements that the Transitional and Frameset versions contain
Copyright © 2003 Pearson Education, Inc. Slide 3-5 CSS Syntax – Defining styles Three ways to define CSS styles Linked Style Sheets – style sheets stored in separate files from the XHTML document (usually with the file extension.css): Global Style Sheets – defined in the header section of an XHTML document within the element: <!-- p { color: red; font-family: arial } --> Inline Style – defined within an XHTML element and will apply to only that instance of the element: Paragraph text
Copyright © 2003 Pearson Education, Inc. Slide 3-6 CSS Syntax - Properties Major property categories: Font properties – defines font styles such as font type or color Text properties – defines the layout of blocks of text like character spacing and alignment Color and image properties – defines the color and/or background formatting for text and images Border properties – defines the style of borders around an image, a table, a block of text or the entire document Display properties – defines styles for the structure of the document such as whitespace is formatted within the document
Copyright © 2003 Pearson Education, Inc. Slide 3-7 CSS Syntax - Rules CSS rules consists of two parts: Element selector Properties declarations CSS rule example: h1, h2 { color: black; font-size: 12pt; font-family: arial } CSS comments: /* This is a comment */
Copyright © 2003 Pearson Education, Inc. Slide 3-8 CSS Link Rules CSS provides special properties to control the colors associated with links defined by the element link – used for links that have not yet been visited: a: link visited – used for links that have been visited: a:visited active – used when the user clicks on the link: a:active hover - used when the user places the mouse cursor over a link: a:hover
Copyright © 2003 Pearson Education, Inc. Slide 3-9 CSS Example – CSS File 1 strong { 2 font-weight:bold; 3 text-align:left; 4 background-color: yellow; 5 text-decoration:underline 6} 7 li { 8 font-style:italic; 9 color:purple; 10}
Copyright © 2003 Pearson Education, Inc. Slide 3-10 CSS Example – XHTML code 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Introduction to XHTML Course Name: Introduction to XHTML 11 Course Number: CS Instructor: T. Perdue 13 Meeting Time: Wednesday, 5:30pm - 7:30pm Course Description: This course covers the basics 16 of how to write XHTML web documents Prerequsites: CS Introduction to Computers 21 CS Introduction to Website Design 22 CS Designing Web pages with HTML
Copyright © 2003 Pearson Education, Inc. Slide 3-11 CSS Example – No Style Sheet
Copyright © 2003 Pearson Education, Inc. Slide 3-12 CSS Example – Using Style Sheet
Copyright © 2003 Pearson Education, Inc. Slide 3-13 CSS Syntax – Classes and IDs The class and id attributes are used to define styles that are independent of elements and can be used with almost all of the elements in the XHTML element set Use classes and ids when you need different styles for the same element or elements The id attribute can only occur once within an XHTML document, so do not use it to define styles for multiple elements The class attribute can be used to define styles for any number of elements Class selector: Style sheet:.class_example { color: red; } XHTML document reference: ID selector: Style sheet: #id_example { color: black; } XHTML document reference:
Copyright © 2003 Pearson Education, Inc. Slide 3-14 CSS Examples Using Classes and IDs 1 /* Defines a class called underline */ 2 div.box { 3margin-top: 50px; 4background-color: yellow; 5color: #000090; 6border-style: double; 7padding: 10px; 8border-color: # } /* Defines styles for the element */ 12 p { 13font-size: 16pt 14 } /* Defines specific properties for the element 17 with the class name of description */ 18 p.description { 19color: #000099; 20background-color: #cccccc; 21font-style: italic 22} /* Define a unique id selector that will be applied 25 to one element within the document */ 26 #identifier { 27 color: red 28 } /* Defines class to align text to the right */ right { 30 text-align: right 31 } /* Defines universal element formatting styles */ 34 * { 35 color: #333333; 36font-family: arial; 37font-size: 10pt 38 }