1. Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados 01/12/06 © 2006/2007 Dr. Paul Walcott

2. Contents In this section the following will be presented: In this section the following will be presented: –An Introduction to Cascading Style Sheets

3. Cascading Style Sheets A cascading style sheet (CSS) allows the size and style of fonts to be set for elements within an HTML document A cascading style sheet (CSS) allows the size and style of fonts to be set for elements within an HTML document By defining styles in a single location (i.e. a style sheet) any changes that need to be made to the style subsequently is easily achieved By defining styles in a single location (i.e. a style sheet) any changes that need to be made to the style subsequently is easily achieved

4. Cascading Style Sheets Cont’d Two versions of cascading style sheets are maintained by W3 (http://www.w3.org): Two versions of cascading style sheets are maintained by W3 (http://www.w3.org):http://www.w3.org –CSS1 (http://www.w3.org/TR/CSS1) http://www.w3.org/TR/CSS1 –CSS2 (http://www.w3.org/TR/CSS2) http://www.w3.org/TR/CSS2 Internet Explorer and Netscape do not support CSS2, but provide limited support for CSS1 Internet Explorer and Netscape do not support CSS2, but provide limited support for CSS1

5. Cascading Style Sheets Cont’d The CSS1 specification includes font, border, background, margin, link and list styles The CSS1 specification includes font, border, background, margin, link and list styles These styles can be embedded in a page or in an external style sheet These styles can be embedded in a page or in an external style sheet The style can be applied to a single or group of tags The style can be applied to a single or group of tags

6. Cascading Style Sheets Cont’d Embedded Style Sheets Embedded Style Sheets –The tags required for embedded style sheets are … –The tags required for embedded style sheets are … –To ensure that the style sheet loads before the page’s body it is included in the … tags –The STYLE element also requires a TYPE attribute of “text/css”

7. Cascading Style Sheets Cont’d Embedded Style Sheets Example Embedded Style Sheets Example #blue { color : blue} #blue { color : blue}

8. Cascading Style Sheets Cont’d External Style Sheets External Style Sheets –The tag required for external style sheets is –The tag required for external style sheets is –To ensure that the style sheet loads before the page’s body it is included in the … tags –The LINK element also requires a TYPE attribute of “text/css”

9. Cascading Style Sheets Cont’d External Style Sheets Example External Style Sheets Example And in a file called style.css the following is defined: And in a file called style.css the following is defined: #blue { color : blue} #blue { color : blue}

10. Cascading Style Sheets Cont’d The CSS1 specification has several properties including the background and color properties The CSS1 specification has several properties including the background and color properties –These set the background and text colours, respectively, for a number of HTML tags including,,,,,, and,,,,,, and

11. Cascading Style Sheets Cont’d The value associated with the background and color properties are: The value associated with the background and color properties are: –A recognised colour name e.g. blue –A set of hexadecimal numbers in the format #RRGGBB, e.g. #0000FF for blue, or –A set of decimal number in the format rgb (0…255, 0…255, 0…255), e.g. rgb(0,0,255) for blue

12. Cascading Style Sheets Cont’d There are three ways that a given style may be associated with an HTML element (or group of elements): There are three ways that a given style may be associated with an HTML element (or group of elements): –Using generic styles ID ID Class Class –Using tag specific styles When creating new XHTML document the Class style should only be used for backwards compatibility When creating new XHTML document the Class style should only be used for backwards compatibility

13. Cascading Style Sheets Cont’d The format of the generic ID style is: The format of the generic ID style is: #Name1 {property 1 : value 1 ; … property n : value n } And is used by an element, e.g. the Header element in the following way: And is used by an element, e.g. the Header element in the following way: Header Header

14. Cascading Style Sheets Cont’d The format of the generic Class style is: The format of the generic Class style is:.Name2 {property 1 : value 1 ; … property n : value n }.Name2 {property 1 : value 1 ; … property n : value n } And is used by an element, e.g. the Header element in the following way: And is used by an element, e.g. the Header element in the following way: Header Header

15. Cascading Style Sheets Cont’d The format of tag specific styles is: The format of tag specific styles is: tagname {property 1 : value 1 ; …property n : value n } tagname {property 1 : value 1 ; …property n : value n } –For example p {color : blue} which sets the text in all paragraphs to blue

16. Cascading Style Sheets Cont’d Let us look at a simple example. Let us look at a simple example. –In this example two styles are created one using the CLASS attribute that creates a 14pt, red Serif font with a yellow background style and one using the CLASS attribute that creates a 14pt, red Serif font with a yellow background style and the other using the ID attribute that creates a 10pt green Arial font with a white background style the other using the ID attribute that creates a 10pt green Arial font with a white background style –And a style is also associated with the division element The style sets the text colour to blue The style sets the text colour to blue

17. Cascading Style Sheets Cont’d

19. References [1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997 [2] Zhao, Jensen J., “Web design and development for e-business”, Prentice Hall, 2003