2. Introduction to Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 7

3. Objectives Introduce CSS  purposes  syntax  locations for style sheets Look at some Web sites  my pedagogical wonder  some external sites

4. Cascading Style Sheets Removes formatting from HTML, leaving it to be a structure/content language Incorporated in HTML only at 4.0 Also can be used for other markup languages (XHTML, XML) Helps with scalability of Web sites We’ll talk about CSS1 this time

5. Some important preliminaries Containment …  groups the contained matter together  block-level tag …  inline version of

6. Creating Your Own Style Rules A CSS rule; Selector and Declaration Properties and values h1 {font-family : arial, sans-serif} p { font-family : "times new roman", serif; color : red; text-align: left }

7. HTML Element Selectors Designate style for one or more HTML tags h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center } Contextual Selectors p b {color : maroon} makes bold text within paragraphs maroon

8. Class Selectors Applies rules to HTML content by class Create a rule in the style sheet.isgreen {color : green} Reference the class name in the HTML This will appear green. Can also create subclasses for elements: h1.isblue {color: blue}

9. ID Selectors Applies rules to HTML content by ID Create a rule in the style sheet #silverware {color : silver;} Reference the ID in the HTML This will appear silver. ID must be unique

10. Pseudo-Elements Typically used for drop cap effect p.dropcap:first-letter { font-size: 300%; float: left; color: red; }

11. What can you control? Fonts (color, size, caps, font, etc) Background (image, color, tiling properties) Text (spacing, line-height, alignment, decoration, word-spacing) Box properties (margin, border, float) List properties (image for bullets) Links (visited, hover, active, link)

12. Placing Style Sheets Inline Style Sheets Applies to a single element some text goes here. Discouraged by the W3C

13. Placing Style Sheets Internal Style Sheets (placed in heading) Applies to a single page h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;}.isgreen {color : green;}

14. External Style Sheets Store style rules in an external file Reference the external file using link in the Page with external CSS Great for consistent styling on large sites

15. CSS2 CSS2 adds positioning:  absolute (and fixed) vs. relative  specify coordinates (relative to top left of box)  z-index: for saying what’s on top when things are stacked Clip, overflow, visibility

16. More about CSS http://www.w3c.org/Style/CSS Online CSS quick reference from Addison- Wesley CSS validation service You can point your browser to CSS files to look at what’s going on

17. CSS summary We saw:  selectors, properties, values  placing style sheets  some examples CSS can control every aspect of a page:  We present a more detailed overview here  See Estrella’s Quick reference for details

18. Examples I modified the bagpipe site modified to use  frames  tables  CSS2 for exact positioning W3C site

19. CSS2 approach Make each section of the page a separate with an ID Use positioning for ID selectors, background colors, etc (exact control) Only need to include HTML, not formatting information on each page