Introduction to Programming the WWW I

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

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

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

Some important preliminaries • Containment • <div>…</div> • groups the contained matter together • block-level tag • <span>…</span> • inline version of <div>

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}

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

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 • <h1 class=“isgreen”>This will appear green.<h1> • Can also create subclasses for elements: • h1.isblue {color: blue}

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 • <h1 id=“silverware ”>This will appear silver.<h1> • ID must be unique

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

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)

Placing Style Sheets • Inline Style Sheets • Applies to a single element • <p style="color : silver;">some text goes here.</p> • Discouraged by the W3C

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

External Style Sheets • Store style rules in an external file • Reference the external file using link in the <head> • <html><head><title>Page with external CSS</title><link rel=“stylesheet” type=“text/css” href=“somestyle.css”></head> • Great for consistent styling on large sites

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

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

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

Examples • I modified the bagpipe site modified to use • frames • tables • CSS2 for exact positioning • W3C site

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

Introduction to Programming the WWW I