Cascading Style Sheet - PowerPoint PPT Presentation

cascading style sheet n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheet PowerPoint Presentation
Download Presentation
Cascading Style Sheet

play fullscreen
1 / 71
Cascading Style Sheet
168 Views
Download Presentation
mikkel
Download Presentation

Cascading Style Sheet

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style Sheet CS346 Fall 2010 Comp Sci 346

  2. XHTML: eXtensible HyperText Markup Language • Instructions to browser • Describe how to render a web page • Two types of info: • Structure/Content • Presentation Comp Sci 346

  3. Cascading Style Sheets (CSS) • Mechanism for separating presentation (style) from structure/content • What constitutes "style"? • Font, font size • Bold, underlined, italic, blinking text • Vertical and horizontal alignment • Margins, borders, padding • Foreground and background colors • Layout Comp Sci 346

  4. CSS Properties • CSS1 (’96) — 50 Properties • CSS2 (’98) — 70 Additional Properties • Aural • Box • Color & Background • Classification • Font • Functional in 4.0 Browsers or Greater • http://www.zvon.org/xxl/css1Reference/Output/index.html Comp Sci 346

  5. 3 Levels of Style Types • Inline — modify the appearance of a particular tag (lowest) • Embedded — applied to an entire document • Redefine appearance of all occurrences of tag (middle) • Linked— external file of declarations specified for any number of documents in an entire site (highest) Comp Sci 346

  6. Where do I Specify Style Information? • Inline - style attribute of any XHTML element (not really separate from structure/content) • Embedded - In the <head> element of an XHTML document • Linked - In an ASCII file with an extension of .css external to (and shared by) XHTML documents Comp Sci 346

  7. Inline Style • Use the style attribute in the tag • Syntax • <tag style=“attribute:value1; attribute:value2”> • Semi-colon separated list of property:value pairs • <p style = "font-size: 1.5em"> Contents of the paragraph</p> • font-size is a property • 1.5em is the value of font-size • Examples <h1 style=“color:green; font-family:sans-serif”> <b style=“color:yellow; background-color:green”> Comp Sci 346

  8. Embedded Style • Syntax • selector {declarations} <head> <title>Untitled</title> <style type="text/css"> h1 {color:green; font-family:sans-serif} b {color:yellow; background-color:green} </style> </head> Comp Sci 346

  9. External Style Sheets • Many documents can share a common style • Put content of embedded style sheet into a text file but without <style> </style> tags • Name the file with extension .css e.g. master.css • Link style file to document in <head>: Comp Sci 346

  10. Validation of CSS • External style sheets can be validated http://jigsaw.w3.org/css-validator/#validate_by_upload Comp Sci 346

  11. Style Specification Formats • Inline: • Style sheet appears as the value of the style attribute • General syntax: <tag style = "property_1: value_1; property_2: value_2; … property_n: value_n;“> • See CSS/Apply/inline.html Comp Sci 346

  12. Style Specification Formats • Document-level/Embedded/Internal Style sheet is a list of rules specified in <style> tag • The <style> tag must be <style type = “text/css”> • Place the list of rules in an HTML comment • Because the rules are not HTML tags • To hide styles from older browsers • Comments in the rule list in the form of (/*…*/) • Example: See CSS/Apply/embedded.html Comp Sci 346

  13. Style Specification Formats • Document-level/Embedded: <style type = "text/css"> <!-- rule list --> </style> • Form of the rules: selector {list of property/values} • Each property/value pair has the form: property: value • Multiple pairs separated by semicolons, as in style tag Comp Sci 346

  14. External Style Sheets • Many documents can share a common style • Put content of embedded style sheet into a text file but without <style> </style> tags • Name the file with extension .css e.g. master.css • Link style file to document in <head>: <link rel = "stylesheet" type = "text/css" href = “master.css" /> Comp Sci 346

  15. Style Specification Formats • External style sheets • Syntax: • A list of style rules as in a <style> tag in document-level style sheet • But NO <style> or </style> tags • Example: CSS/Apply/link.html, CSS/Apply/base.css • Comments: /* and */ in external style sheet CSS/Apply/link_comments.html CSS/Apply/link_comments2.html Comp Sci 346

  16. Who has precedence? • If multiple style sheets conflict, the lowest level or last style sheet has precedence • Examples CSS/Apply/link.html external only CSS/Apply/conflict.html external vs embedded CSS/Apply/conflict2_linklast.html embedded vs external CSS/Apply/conflict3.html external vs embeded vs inline Comp Sci 346

  17. Selector Forms 1. Simple Selector Forms • Syntax: tag name or a list of tag names, separated by commas • Examples: p {color:blue;} See CSS/name.html h1, h3 {color:blue;} See CSS/group.html Comp Sci 346

  18. Selector Forms 2. Contextual selectors • Syntax: tag names separated by space • Example ol ol li {color:blue;} • Applied only to li elements which are descendants of ol elemets which are descendants of ol elements • See CSS/descendant.html Comp Sci 346

  19. Selector Forms 3. Class Selectors • Syntax: tag.className • A style class is given a name className, which is attached to a tag name • Effect: to enable different occurrences of the same tag to use different style specifications • Example p.para1 {color:red;} p.para2 {color:blue;} • See CSS/class.html .para {color:red;} • All elements with classes para are selected Comp Sci 346

  20. Selector Forms • The class for a particular occurrence of a tag is specified with the class attribute of the tag • For example, p.para1 {color:red;} p.para2 {color:blue;} <p class = “para1"> ... </p> ... <p class = “para2"> ... </p> Comp Sci 346

  21. Selector Forms 4. id Selectors • Purpose: enable the application of a style to one specific element with that id • Syntax: #specific-id {property-value list} • Example: <h2 id = “section2”>1.2 CSS</h2> #section2 {font-size: 20} See divid.html and divid.css Comp Sci 346

  22. Selector Forms 5. Generic Selectors • Purpose: To apply a style to more than one kind of tag • Note: A generic class must be named in tags, and the name must begin with a period in the selector • Example .really-big { … } /* all elements with class really-big */ <h1 class = "really-big"> … </h1> ... <p class = "really-big"> … </p> • The style will be applied to the selected h1 and p classes Comp Sci 346

  23. Selector Forms 6. Pseudo Classes • Selecting link elements based on their state • Selecting part of an element • Syntax: Names begin with colons • Example: a:link {color:red} a:visited {color:yellow} a:focus {color:olive} a:hover {color:green} a:active {color:blue} • See CSS/state.html Comp Sci 346

  24. Selector Forms 6. Pseudo Classes • Selecting part of an element • Syntax: Names begin with colons • Example: div#oshkosh p:first-line {color:red} div#oshkosh p:first-letter {color:red} p:first-letter { font-size: 200%; float: left } • See CSS/firstline.html, firstline.css • See CSS/firstletter.html • See CSS/firstletter2.html • See CSS/firstchild.html Comp Sci 346

  25. Graphic Arts too • Css Zen Garden project • http://www.csszengarden.com/ Comp Sci 346

  26. 7. Misc. Selector Forms (not in IE) • A. Children elements div#oshkosh > p {color:red} • Chooses those p elements that are children of div element with id oshkosh • See CSS/children.html • B. Adjacent Sibling div#oshkosh p+h3 {color:red;} #oshkosh p+h3 {color:red;} • Desired target is h3 • “p” is an element immediately preceding the desired target (h3) within the same parent element • #oshkosh must be unique • See example CSS/adjsibling.html Comp Sci 346

  27. 7. Misc. Selector Forms (not in IE) • C. Select elements based on attributes • Syntax element[attribute] { …} • Not supported by IE • Example: div[class] {color:red} • See CSS/attribute.html Comp Sci 346

  28. Difference between class and id • IDs identify a specific element • Unique • Only use a specific ID once per document • Basic rule of HTML/XHTML but not observed by many browsers • Classes mark elements as members of a group • Not necessarily unique • Can be used multiple times, • CSS Application: to apply a style to multiple elements, use a class Comp Sci 346

  29. Alternate Style Sheets • To designate a style sheet as first choice (but can be deactivated), add title=“label” to link element. “label” identifies the preferred style sheet • To designate a style sheet as an alternate choice use rel=“alternate stylesheet” title=“label” in link element • Supported by Netscape 6, Opera, Firefox • Support dropped in later versions • See example CSS/Apply/choices.html Comp Sci 346

  30. Importing External Style Sheet • Earlier Importing style sheets was an alternative way to link • Now a trick to bypass buggy browsers • Use @import “filename.css” • Must precede all rules • Example: Netscape 4.x does not understand @import and ignores it. • See CSS/Apply/import.html Comp Sci 346

  31. User style • Browsers allow users to specify users’ preferred way of rendering a page • IE:Tools>Internet Options/Accessability Select “Format documents using my style sheet” and use “Browse…” button to select the style sheet • Opera: Tools>Preferences>select “Enable styling of forms”, click “Styling Options…” button, set Default mode to “user mode” and use the “Choose” button to select desired style sheet. • Firefox? • Use CSS/Apply/userstyle.css Comp Sci 346

  32. Property Value Forms • Colors • Backgrounds • Fonts • Lists • Alignment of text • Margins • Borders Comp Sci 346

  33. Length • Length - numbers, maybe with decimal points • Units: • px - pixels • in - inches • cm - centimeters • mm - millimeters • pt - points • pc - picas (12 points) • em - height of the letter ‘m’ • ex-height - height of the letter ‘x’ • No space is allowed between the number and the unit specification • e.g., 1.5 in is illegal! Comp Sci 346

  34. Colors: Color Names • 16 color names recognized by all versions of HTML (Appendix Fig. B.1) Comp Sci 346

  35. Extended Color Names • XHTML added 124 Extended Color Names (appendix B.2 of Deitel) • Not all browsers support the Extended Color Names • Use color values Comp Sci 346

  36. Color Values • Color — combination of three primary colors • RGB— Red, Green, Blue • Software uses a triplet of primary colors to define any color • 0 — absence of color • 255 — highest intensity of color • Red = 255,0,0; Green = 0,255,0; Yellow = 255,255,0 • Often represented in Hexadecimal • 2553 = 16.7 million combinations Comp Sci 346

  37. Color Values • Alternate format for green: #00ff00 • In general, six hexadecimal digits preceded with # • Red intensity • Green intensity • Blue intensity Comp Sci 346

  38. Web Safe Colors • 216 Colors Displayed Same in All Browsers • Any Hex Notation That Includes: 00, 33, 66, 99, CC, FF Comp Sci 346

  39. Foreground and Background colors color foreground color of elements background-color background color of elements Example: CSS/Property/color.html CSS/Property/background-color.html Comp Sci 346

  40. Backgrounds background-color: #00ff00 background-image: url("tess.jpg") background-repeat values: repeat repeat-x repeat-y no-repeat background-attachment values: scroll fixed background-position: 50% 100% Point 50% across and 100% down image is positioned 50% across and 100% down the padding area background-position: 1cm 2cm Upperleft corner of image is positioned 1cm over and 2cm down from upperleft corner of padding Comp Sci 346

  41. Style Properties • www.w3.org/TR/REC-CSS2 lists all CSS style properties Comp Sci 346

  42. Font-related Properties font-family • Use font name. Use quotes for names w/ whitespace <h1 style = "font-family: 'Times New Roman' "> • Generic font families: serif sans-serif cursive fantasy monospace <h1 style = "font-family: 'Times New Roman', serif "> • Use multiple fonts to ensure all characters are rendered as desired • Use generic font family as a fallback Comp Sci 346

  43. font-size • Length values 12pt 1.5em • Absolute (browser has a table of these sizes) xx-small x-small small medium large x-large xx-large • Relative (to parent element's font-size) larger smaller • Percentage values (relative to parent's font-height) 120% 80% <h1 style = "font-size: medium"> Comp Sci 346

  44. More Font-related Properties • font-style normal oblique italic • font-weight – degree of boldness normal bold bolder lighter As a multiple of 100: 100 200 300 400 500 600 700 800 900 • font-variant normal small-caps • To specify a list of font properties font: bolder 14pt Arial Helvetica • Order must be: style, weight, size, name(s) Comp Sci 346

  45. Font Examples • text-decoration property line-through, overline, underline, none • letter-spacing – value is any length property value • CSS/Property/fonts.html • CSS/Property/fonts2.html • CSS/Property/decoration.html • CSS/Property/letterspacing.html Comp Sci 346

  46. List properties • list-style-type controls how list items are displayed • Unordered lists • disc circle square • Example: CSS/Property/ul.html • Use list-style-image to display an image as a bullet • Example: home.html li {list-style-image: url(http://www.uwosh.edu/departments/computer_science/dotblue.gif) } • Ordered lists • decimal lower-roman upper-roman • upper-alpha lower-alpha Comp Sci 346

  47. CSS rules for nested lists /* Rules for standard outline numbering */ ol {list-style-type: upper-roman} ol ol {list-style-type: upper-alpha} ol ol ol {list-style-type: decimal} ol ol ol ol {list-style-type: lower-alpha} Comp Sci 346

  48. Alignment of Text • text-indent property to allow indentation • either a length or a % value • text-align property • left (the default), center, right, or justify • float property • To flow the text around another element • possible values: left, right, and none (the default) • To place an element (e.g. image) on the right with text flowing on its left, use • default text-align value (left) for the text and • the right value for float on the element on the right • Example: CSS/Property/float.html CSS/Property/float2.html Comp Sci 346

  49. Positioning • CSS gives authors control over positioning of elements • Every element has a box • Two main types of boxes: • Default type determined by element • Can override with display: block or display: inline • Three positioning schemes Comp Sci 346

  50. Box Model content padding border margin Comp Sci 346