CSS (Cascading Style Sheet) English for ICT
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
Parts of a Single ruleset-type Style Rule property names font-size : x-large background-color : yellow p { } declarations selector string declaration block
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; }
How a Style can be used? External (Imported) Embedded Inline 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
Inline Style <body style="background-color: lime;"> <p id="test" style="font-size:x-large; background-color: yellow;"> Hello World! </p> </body>
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>
External Style style2.css style1.css body { background-color: lime; } p { font-size: x-large; background-color: yellow; } style1.css body { background-color: yellow; } p { font-size: x-large; background-color: blue; } style2.css <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>
External Style (contd)
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>
Possible Values for media Attribute (HTML 4.0 Standard) Media Type all All types (default) aural Speech synthesizer braille Tactile device generating braille characters handheld Handheld device, such as a cell phone or PDA print Printer projector Projector, such as one used to display a large monitor image on a screen screen Computer monitor tty Fixed-width character output device tv Television (monitor with low resolution and little or no scrolling)
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
Selector Types Type selector Universal selector ID selector Class selector Pseudo-Class selector Descendant selector
style_demo.css /* 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
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 }
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 }
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 (#)
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>
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
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.
Pseudo-Class Selector Associated a Elements a:visited Any element with href corresponding to a URL that has been visited recently a:link Any element that does not belong to the a:visited pseudo-class a:active An element that is in the process of being selected; for example, the mouse has been clicked on the element but not released a:hover An element over which the mouse cursor is located but that does not belong to the a:active pseudo-class
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 }
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 }
Style Sheet Rules Cascading of style sheet rules (Style Rule Cascading) Element inheritance of style properties (Style Rule Inheritance)
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 }
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
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 }
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.
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.
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
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
Style Rule Cascading Then style rulesets are effectively in the order @import url(“imp2.css”); p { color : green } imp1.css <title>StyleRuleOrder.html</title> <style type="text/css"> p { color : red } </style> <link rel="stylesheet“ type="text/css“ href="imp1.css" /> p { color : yellow } p { color : blue } imp2.css 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.
Style Rule Cascading Summary Alternate style sheets 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
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.
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>
Rendering Style Inheritance
CSS Generic Font Families Font Family Description serif A serif is a short, decorative line at the end of a stroke of a letter. There are 3 serifs at the top of the W. Most glyphs in a serif font family will have serifs, and such a family is typically proportionately spaced (different glyphs occupy different widths). sans-serif Usually proportionately spaced, but glyphs lack serifs, so they don’t look as fancy as serif fonts. cursive Looks more like cursive handwriting than like printing. fantasy Glyphs are still recognizable as characters, but are nontraditional. monospace All glyphs have the same width. Since monospace fonts are often used in editors when programming, these font families are frequently used to display program code or other computer data.
CSS Length Unit Identifiers Meaning in Inch cm Centimeter mm Millimeter pt Point: 1/72 inch pc Pica: 12 points px Pixel: typically 1/96 inch em Em: reference font size ex Ex: roughly the height of the lowercase “x” character in the reference font
Font Style Properties Property Possible Values font-style normal (initial value), italic, or oblique font-weight bold or normal (initial value) font-variant small-caps, which displays lowercase characters using uppercase glyphs (small uppercase glyphs if possible), or normal (initial value)