HTMLStyleSheets

HTMLStyleSheets - Lecture HTML: Style Sheets Copyright...

Info iconThis preview shows pages 1–8. Sign up to view the full content.

View Full Document Right Arrow Icon
Stylesheets Copyright © Ellis Horowitz 1999-2010 1 Lecture HTML: Style Sheets
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Stylesheets Copyright © Ellis Horowitz 1999-2010 2 Style Sheets HTML version 4.x separates the specification of style from the specification of content Style sheets are the mechanism HTML assumes will be used to specify – the amount of white space between text or between lines, – the amount lines are indented, – the colors used for the text and the backgrounds – the font size and style of text – the precise position of text and graphics – How front matter (preface, figure list, title page, and so forth) should look – How all or individual sections should be laid out in terms of space (for example, two newspaper columns, one column with headings having hanging heads, and so forth)
Background image of page 2
Stylesheets Copyright © Ellis Horowitz 1999-2010 3 Expressing Style Within HTML • HTML provides an element and an attribute to support the inclusion of style information – <STYLE> tag, style attribute • These HTML extensions permit – flexible placement of style information – independence from any particular style sheet language • HTML provides the <LINK> to point to external style sheets – combining style information from multiple sources, called cascading • There is a defined order of precedence where the definitions of a style element conflict
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Stylesheets Copyright © Ellis Horowitz 1999-2010 4 Simple Example • Suppose a file, special.css contains 3 lines that sets the text color of a paragraph to green and surrounds it with a solid red border: P.special { color : green; border: solid red; } • Authors may link this style sheet to their source HTML document with the LINK element: <HTML> <HEAD> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">This paragraph should be displayed with green text and red border. </BODY> </HTML>
Background image of page 4
Stylesheets Copyright © Ellis Horowitz 1999-2010 5 Browser Output Red border Green Text
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Stylesheets Copyright © Ellis Horowitz 1999-2010 6 Style Sheet Languages These notes use the style language "Cascading Style Sheets" ([CSS1] and [CSS2]), abbreviated CSS, and described in: http://www.w3.org/TR/REC-CSS1 (level 1) http://www.w3.org/TR/REC-CSS2 (level 2) http://www.w3.org/TR/CSS21/ (level 2.1) http://www.w3.org/Style/CSS/current-work (level 3 in process) There are other style sheet languages, e.g. XSL defined at http://www.w3.org/Style/XSL
Background image of page 6
Copyright © Ellis Horowitz 1999-2010 7 Setting Color • Expressed either as Red, Green, Blue (RGB) triple or using predefined color names • Four equivalent forms of specifying color EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer [0,255]*/ EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */ • Pre-defined color names Black="#000000" Green="#008000" Silver="#C0C0C0" Lime="#00FF00" Gray="#808080" Olive="#808000" White="#FFFFFF" Yellow="#FFFF00" Maroon="#800000"
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 8
This is the end of the preview. Sign up to access the rest of the document.

Page1 / 48

HTMLStyleSheets - Lecture HTML: Style Sheets Copyright...

This preview shows document pages 1 - 8. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online