4. HTMLStyleSheets.pdf - Lecture HTML Style Sheets Copyright © Ellis Horowitz 1999-2018 1 Style Sheets • Starting with HTML version 4.x there was an

4. HTMLStyleSheets.pdf - Lecture HTML Style Sheets...

This preview shows page 1 - 9 out of 59 pages.

Copyright © Ellis Horowitz 1999-2018 1 Lecture HTML: Style Sheets
Image of page 1

Subscribe to view the full document.

Copyright © Ellis Horowitz 1999-2018 2 Style Sheets Starting with HTML version 4.x there was an effort to separate 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)
Image of page 2
Copyright © Ellis Horowitz 1999-2018 3 Style Sheet Languages These notes use the style language "Cascading Style Sheets" ([CSS1] and [CSS2]), abbreviated CSS, and described in: (level 1) (level 2) (level 2 Revision 1) (Level 3, in process) (see Status) There are other style sheet languages, e.g. XSL defined at
Image of page 3

Subscribe to view the full document.

Copyright © Ellis Horowitz 1999-2018 4 Expressing Style Within HTML • HTML provides an element and an attribute to support the inclusion of style information – <STYLE> element, 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
Image of page 4
Copyright © Ellis Horowitz 1999-2018 5 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>
Image of page 5

Subscribe to view the full document.

Copyright © Ellis Horowitz 1999-2018 6 Browser Output Red border Green Text
Image of page 6
Copyright © Ellis Horowitz 1999-2018 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" Navy="#000080" Red="#FF0000" Blue="#0000FF" Purple="#800080" Teal="#008080" Fuschia="#FF00FF" Aqua="#00FFFF"
Image of page 7

Subscribe to view the full document.

Copyright © Ellis Horowitz 1999-2018 8 Using the Inline Style Attribute Using inline style settings to set the font size, background and color of text <HTML> <HEAD>
Image of page 8
Image of page 9
  • Fall '07
  • Papa
  • Cascading Style Sheets, Ellis Horowitz

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Ask Expert Tutors You can ask 0 bonus questions You can ask 0 questions (0 expire soon) You can ask 0 questions (will expire )
Answers in as fast as 15 minutes