Download presentation
Presentation is loading. Please wait.
Published byHortense McCoy Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.