1 / 30

Cascading Style Sheets

Cascading Style Sheets. Provide means to control and change presentation of HTML documents. Allow the user to impose a standard style. Three levels of specification: Inline level -- embeded in tag invocation. Document level -- applied to a whole document.

lizina
Télécharger la présentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets • Provide means to control and change presentation of HTML documents. • Allow the user to impose a standard style. • Three levels of specification: • Inline level -- embeded in tag invocation. • Document level -- applied to a whole document. • External level -- Apply to a number of documents. • Inline level has precedence over document level, which has precedence over external level.

  2. Cascading Style Sheets • HTML primarily concerned with content rather than style. • HTML tags have presentation properties for which browsers have default values. • Cascading Style Sheets are not technically HTML, but can be embedded in HTML documents.

  3. Cascading Style Sheets • Cascading Style Sheet specification developed in 1996 ----> CSS1 • CSS2 followed in 1998. • Current browsers do not implement all of CSS2. • Style is specified for a tag by the values of its presentation properties. • Browsers can ignore style sheets or use their own default values for presentation properties.

  4. Level of Style Sheets • Inline style sheets appear in the tag itself. • Document level style sheets appear within the head of the document. • External style sheets are in separate files, potentially on any server on the internet. • Format depends on the level of the style sheet

  5. Inline Style Specification Format • Style sheets appears as the value of the style attribute • style ="property_1:value_1; property_2: value-2; ... property_n: value-n;” • Scope of inline style sheet is the content of the tag.

  6. Document Style Specification Format • List of rules that are the content of the <style> tag. • The type attribute of the <style> tag must be set to "text/css" • The list of rules are not HTML. • Hence, they must be placed in an HTML comment. • Documentation comments for the rule must use a different form -- use C comments: /* ... */ External style sheets format is a list as in document style

  7. External Style Sheets • Written with the MIME type text/css • A <link> tag is used to specify that the browser is to fetch and use external style sheet file: • <link rel = stylesheet type="text/css" href="http://www.whereever.org/termpaper.css"> </link> • Can be validated http:/jigsaw.w3.org/css-validator /validator-upload.html

  8. Style Classes • Style classes allow different occurrences of the same tag to use different style specifications • A style class has a name attached to a tag name: p.narrow (property:value list) p.wide (property:value list) • A class on an occurrence of a tag is specified with its class attribute <p class ="narrow"> ... </p> <p class ="wide"> ... </p>

  9. Generic Style Classes • To apply style to more than one tag • Defined using a generic tag (which must have a name beginning with a period) .really-big( ... ) • It is used as if it were a normal style class <h1 class ="really-big"> ... </h1> <p class ="really-big"> ... </p>

  10. Properties/Property Values • There are 56 different properties in 6 categories • Fonts • Colors & backgrounds • Text • Boxes and Layouts • Lists • Tags • Will not discuss all. For more details go to: http://www.w3.org

  11. Property Value Format • Keywords: left, small, ... (Not case sensitive) • Length: numbers (may be with decimal points) • px -pixels • in -inches • cm -centimiters, • pt -points • pc-picas (12 points) • em -height of the letter "m" • x-height -height of the letter "x" • No space is allowed between number and unit specs.

  12. Property Value Format <html> <head> <title> Font Properties </TITLE> <style type = "text/css"> <!-- /* Document-level style sheet*/ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } --> </style> </head>

  13. Property Value Format <body> <p class = "big"> If a job is worth doing, it’s worth doing right. </p> <p class = "small"> Two wrongs don't make a right, but they certainly can get you in a lot of trouble. </p> <h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction </h2> <h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Computer Networks </h3> </body> </html>

  14. Property Value Format (cont) • Percentage -just a number followed by the percent sign • URL value: url(protocol://server/pathname) • Color • Color name • rgb(n1, n2, n3) • Hex form: #XXXXXX • Property values inhereted by nested tags unless overridden

  15. Font Properties • Font-family list of font names (browser picks 1st) • Font-family: Arial, Helvetica, Courrier • Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS) • If font name has more than one word, single-quoted • Font-size lenght number of a name • Font-style: italic, normal • Font-weight: bolder, lighter, bold, normal

  16. Font Properties Font used to specify list of font properties order must be: style, weight, size, name(s) font: bolder 14pt Arial Helvetica

  17. Font Properties <html> <head> <title> Font Properties </TITLE> <style type = "text/css"> <!-- /* Document-level style sheet*/ p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font-size: 10pt; font-weight: bold; font-family: 'Courier New'; } --> </style> </head>

  18. Font Properties <body> <p class = "big"> If a job is worth doing, it’s worth doing right. </p> <p class = "small"> Two wrongs don't make a right, but they certainly can get you in a lot of trouble. </p> <h2 style = "font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold"> Chapter 1 Introduction </h2> <h3 style = "font-family: 'Courier New'; font-size: 18pt"> 1.1 The Basics of Parallel Programming </h3> </body> </html>

  19. Colors & backgrounds • Complications: • Monitors vary widely • Browser vary widely • There are three color collections: • Set of 16 colors garanteed to be dispalyable by all graphical browsers on all color monitors • The web palette of 216 colors • One of 16 million different colors

  20. Green 008000 Lime 00FF00 Olive 808000 Yellow FFFF00 Navy 000080 Blue 0000FF Teal 008080 Aqua 00FFFF Garanteed set of 16 colors: • Black 000000 • Silver C0C0C0 • Gray 808080 • White FFFFFF • Marron 800000 • Red FF0000 • Purple 800080 • Fuchia FF00FF

  21. The web palette • Consist of 216 colors • Use hex color value of: (look on back of book) • 00 • 33 • 66 • 99 • CC • FF

  22. Colors & backgrounds • The color property specifies forground of color elements <h2 style="color:red">Apple</h2> • The background-color property specifies the backgound color elements <p style="font-size:24; color:blue; background-color:aqua"> To make it softer, use aqua background!</p>

  23. Colors & backgrounds • The background-image property use with care

  24. Alignment of Text • Property text-indent allows indentation. Use length of % • Property text-align has possible values: left (default), center, right, or justify • Property float allows text to flow arround another element: left, right, or none (default) An element on the right with text flowing on its left can be obtained with default text-align value (left) for the text and right value for float on the element on the right.

  25. Alignment of Text • Property margin-left allows to set margins arround an object. <img src = "c210.jpg" style="float: right; margin-left: 0.5in; margin-bottom: 0.05in" />

  26. Lists propertiesUnordered list: • List-style-type • Bullets can be: disk (default), square, circle • Setting it on the <ul> tag applies to all items: <ul style = "list-style-type: square"> <li> ... </ul> • Setting it on the <li> it applies to just that item: <ul> <li style="list-style-type:square"> First item </li> <li style = "list-style-type: circle"> second item </li> </ul>

  27. Lists propertiesUnordered list: • List-style-image: • Could use an image for bullets in an unordered list <li style = "List-style-image: url(bigbird.gif)">

  28. Lists propertiesOrdered list: • List-style-type: • Use to change the sequence values: Property value Sequence type First four decimal Arabic numerals 1, 2, 3, 4 upper-alpha Uc letters A, B, C, D lower-alpha Lc letters a, b, c, d upper-roman Uc Roman I, II, III, IV lower-roman Lc Roman i, ii, iii, iv

  29. The <span> Tag • Used to define an element in the content of a larger element • The default is to leave content as it is • Use <span> to apply an inline style sheet to its content <p>Now is the <span style = "font-size: 40; font-family: ariel; color: bue"> most </span> opportune time! </p> • Can be nested and can have id and class attributes

  30. The <div> Tag • Usefull for style applications • Used to create sections (or divisions) for which style can be specified • e.g. A section of four paragraphs for wich a particular style is warranted.

More Related