1 / 71

Cascading Style Sheet

Cascading Style Sheet. CS346 Fall 2010. XHTML: eXtensible HyperText Markup Language. Instructions to browser Describe how to render a web page Two types of info: Structure/Content Presentation. Cascading Style Sheets (CSS).

mikkel
Download Presentation

Cascading Style Sheet

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 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

More Related