introduction to programming the www i cmsc 10100-1 winter 2003 lecture 7
TRANSCRIPT
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Winter 2003
Lecture 7
ObjectivesObjectives
• Introduce CSS purposes syntax locations for style sheets
• Look at some Web sites my pedagogical wonder some external sites
Cascading Style SheetsCascading 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 preliminariesSome important preliminaries
• Containment
• <div>…</div> groups the contained matter together block-level tag
• <span>…</span> inline version of <div>
Creating Your Own Style Rules
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 SelectorsHTML 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 SelectorsClass 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 SelectorsID 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-ElementsPseudo-Elements
• Typically used for drop cap effect
• p.dropcap:first-letter { font-size: 300%; float: left; color: red; }
What can you control?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 SheetsPlacing 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 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 SheetsExternal 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
CSS2CSS2
• 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 CSSMore 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 summaryCSS 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
ExamplesExamples
• I modified the bagpipe site modified to use frames tables CSS2 for exact positioning
• W3C site
CSS2 approachCSS2 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