1 / 42

CSS

CSS. Web Technology. HTML vs. CSS. HTML can be used to indicate both semantic of document and its presentation It is advisable to separate HTML for semantic and use CSS to determine how the document should be presented CSS (Cascading Style Sheet) is used to work with HTML and XML

oprah-cline
Download Presentation

CSS

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. CSS Web Technology

  2. HTML vs. CSS • HTML can be used to indicate both semantic of document and its presentation • It is advisable to separate HTML for semantic and use CSS to determine how the document should be presented • CSS (Cascading Style Sheet) is used to work with HTML and XML • CSS provides a variety of features for document presentation

  3. property names declarations font-size : x-large background-color : yellow p { } selector string declaration block Parts of a Single ruleset-type Style Rule

  4. Specifying Style Rules • The syntax for specifying style properties is: • For multiple properties: Selector { property: value} Selector { property1: value1; property2: value2; property3: value3; ………. …… propertyN: valueN; }

  5. How a Style can be used? • External (Imported) • CSS is a separate file from HTML • Embedded • Style rules are defined inside HTML file • Inline • Style is applied within HTML tags • Actually, it is an attribute of HTML tags

  6. Inline Style <body style="background-color: lime;"> <p id="test" style="font-size:x-large; background-color: yellow;"> Hello World! </p> </body>

  7. Embeded Style <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body {background-color:lime;} p {font-size: x-large; background-color:yellow; } </style> </head> <body> <p id="test"> Hello World! </p> </body> </html>

  8. style1.css style2.css body {background-color:lime;} p {font-size: x-large; background-color:yellow; } body {background-color:yellow; } p {font-size:x-large; background-color:blue; } External Style <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style1.css" rel="stylesheet" type="text/css" title="Style 1" /> <link href="style2.css" rel="alternate stylesheet" type="text/css" title="Style 2" /> </head> <body> <p id="test"> Hello World! </p>

  9. External Style (contd)

  10. Applying Style Sheet according to Media Type • title attribute are not needed • These style sheets cannot be selected by users • They will apply regardless of user actions • Such style sheets are called persistent • They can be recognized by their lack of a title attribute <title>Title of document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style1.css" rel="stylesheet" type="text/css" media="screen, tv, projection" /> <link href="style2.css" rel="stylesheet" type="text/css" media="handheld, print" /> </head>

  11. Possible Values for media Attribute(HTML 4.0 Standard)

  12. Benefits of Using Style Sheet • It is easy to give all of elements on a page a consistent appearance • If, at a later time, we wish to change an attribute value, we need only make change in on style sheet. • If we use a single style sheet for all of the pages at a site, • all of the site pages will have a consistent style, • and one that can be changed with little work

  13. Selector Types • Type selector • Universal selector • ID selector • Class selector • Pseudo-Class selector • Descendant selector

  14. /* Headers have dark background */ h1, h2, h3, h4, h5, h6 {background-color :purple} /* All elements bold */ * {font-weight :bold} /* Elements with certain id's have light background */ #p1, #p3 {background-color :aqua} /* Elements in certain classes are italic, large font, or both */ #p4, .takenote {font-style :italic} span.spacial {font-size :x-large} /* Hyperlink ('a' element) styles */ a:link {color :black} a:visited {color :yellow} a:hover {color :green} a:active {color :red} /* Descendant selectors */ ul span {font-variant :small-caps} ul ol li {letter-spacing :1em } style_demo.css

  15. Type Selector • Simplest form is to use the name of single element type, such as: body or p, etc. • A rule can apply to multiple elements by separating them with comma such as: h1, h2, h3, h4 • This specifies that purple is applied to all headers’ background color h1, h2, h3, h4, h5, h6 {background-color :purple}

  16. Universal Selector • The universal selector is denoted by an asterisk (*) • Universal selector represents ever possible element type • This specifies a value of bold for the font-weight property of every element in the document * {font-weight :bold}

  17. ID Selector • Every element in an XHTML has an associated id attribute • If a value is assigned to id attribute, then no other element’s id can be the same name • ID selector can be used by preceding a selector name with a number sign (#)

  18. ID Selector Example #p1, #p3 {background-color :aqua} • The element with id p1 or p3 will be rendered with its background color of aqua <p id=“p3”> blah blah blah …. </p>

  19. Class Selector • Another HTML attribute frequently used with style sheet is class • Class selector can be represented by preceding the selector name with a period (.) • Class selector is different from ID selector in that it allows multiple use of the style as oppose to ID select, which applies to only a single element

  20. Class Selector Example #p4, .takenote {font-style :italic} • Element needing to have this effect can add “takenote” to its class attribute as follow: • This means class “special” can be used with span element only <span class=“takenote”> …….</span> or <span class=“takenote special cool”> …… </span> span.special {font-size :x-large} Note: *.takenote and .takenote are equivalent.

  21. Pseudo-Class Selector

  22. Descendant Selector • A selector that hold only within the content of certain element types is known as a descendant selector • Text within a span that is part of ul should be displayed using a small-cap font form • The selector applies to any span within content of any element belonging to class special ul span {font-variant :small-caps} .special span {letter-spacing :1em }

  23. At-Rules • The at-rule that is widely used is @import • This is used to input one style sheet file into another one • This file reads in rules from the file “general-rules.css” before continuing with other rule in this style sheet • url() represents a URL, which can be absolute or relative @import url(‘general-rules.css’); h1, h2 {background-color :aqua}

  24. Style Sheet Rules • Cascading of style sheet rules (Style Rule Cascading) • Element inheritance of style properties (Style Rule Inheritance)

  25. Style Rule Cascading * {font-weight :bold} #p1, #p3 {background-color :aqua} • Both rules apply to element with id attribute value p3 • If multiple rules with same properties apply to an element, the all of declarations are applied to the element • What happens if the below rule is added: • Which rule would apply to the font-weight property of p3 ? #p3 {font-weight :normal}

  26. Style Rule Cascading • Origin of a declaration: (who wrote the declaration?) • Author: declaration is part of an external or embedded style sheet or is part of the value specified for the style attribute of an element • User agent: A browser or other user agent may define default style property values for HTML elements • User: Most browsers allow users to provide a style sheet or to indicate style preferences that are treated as style rules

  27. Style Rule Cascading • Every author and user style declaration has one of two weight values: normal and important • A declaration has important weight if it ends with “!important” • This will give important weight to font-size property while the text-indent property will have normal weight p {text-indent: 3cm; font-size : larger !important}

  28. Style Rule Cascading • The priorities from height to low: • Important declaration with user origin • Important declaration with author origin • Normal declaration with author origin • Normal declaration with user origin • Any declaration with user agent origin The reason that user declaration has higher priority is accessibility.

  29. Style Rule Cascading • To sort the tied declarations according to their specificity • If a declaration is part of the style attribute of the element, then it is highest specificity • If a declaration is part of a ruleset, then its specificity is determined by the selector(s) for the ruleset.

  30. Style Rule Cascading • Highest to lowest specificity are: • ID selectors • Class and pseudo-class selectors • Descendant and type selector (the more element type names, the more specific) • Universal selectors

  31. Style Rule Cascading • Even after this sorting process, two or more declarations may have equally high weight-origin and specificity • The final step is then applied: • If there is a declaration in the style attribute for element, then it is used • Otherwise, all of style sheet rules are listed in a top-to-bottom reading of the document, with external and imported style sheets inserted at the point of the link element or @import rule

  32. imp1.css @import url(“imp2.css”); p { color :green} imp2.css p { color :blue} Style Rule Cascading <title>StyleRuleOrder.html</title> <style type="text/css"> p {color :red} </style> <link rel="stylesheet“ type="text/css“ href="imp1.css" /> <style type="text/css"> p {color :yellow } </style> Then style rulesets are effectively in the order p { color :red} p { color :blue} p { color :green} p { color :yellow} <p>Hello world!</p> would then display in yellow.

  33. Alternate style sheets Style Rule Cascading Summary 1. Select style sheet and insert rules for HTML attributes 2. Prioritize declarations by origin and weight 3. Break ties based on specificity (style attribute or most specific selector) 4. Break ties based on position within style sheet (last occurring wins

  34. Style Rule Inheritance • Cascading is based on structure of style sheets • Inheritance is based on the tree structure of the document itself. • An element inherits a value for one of its properties by checking if its parent element in documents has a value for that property, if so, inheriting the parent’s value • However, parent may inherit its property value from its parent, and so on.

  35. HTML demonstrating Style Inheritance <head> <title>style_inherit.html</title> <style type="text/css"> body { font-weight : bold } li { font-style : italic } p { font-size : larger } span { font-weight : normal } </style> </head> <body> <ul> <li> List item outside and <span>inside</span> a span. <p> Embedded paragraph outside and <span>inside</span> a span. </p> </li> </ul> </body>

  36. Rendering Style Inheritance

  37. CSS Generic Font Families

  38. CSS Length Unit Identifiers

  39. Font Style Properties

More Related