Cascading Style Sheets (CSS)
The Need for CSS Discussion: CSS fills a capability lacking in HTML Example (Old-school HTML): <p> <font color=”gray”> “Gray hair is a crown of splendor.” </font> </p> Example (New-school CSS): p {color: gray;}
Block-level Elements Description: Creates breaks before and after the element box Examples: <div style=”color: blue;”> I'm so blue ... </div> <p style=”color: blue;”> I'm so blue ... </p>
Inline Styles Description: Often nested within other elements and does not break before and after element box Examples: <p> <em style=”color: blue;”> I'm so blue ... </em> </p> <p> <span style=”color: blue; font-style: italic”> I'm so blue ... </span> </p>
The <link> Tag Syntax: <link attribute=”value” ... /> Example: <head> <link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all” /> </head>
Alternate Style Sheets Purpose: Allows selection between multiple styles Example: <link rel=”stylesheet” type=”text/css” href=”blue.css” title=”Grape” /> <link rel=”stylesheet” type=”text/css” href=”red.css” title=”Apple” /> <link rel=”stylesheet” type=”text/css” href=”green.css” title=”Lime” />
The <style> Tag Purpose: Cascading Style Sheet information for one page Example: <head> <style type=”text/css”> h1 {color: gray;} </style> </head>
Allows multiple Cascading Style Sheet files Example: The @import Directive Advantages: Allows multiple Cascading Style Sheet files Example: <head> <style type=”text/css”> @import url(red.css); @import url(blue.css); @import url(green.css); </style> </head>
Hiding CSS from older browsers Description: Use HTML comments which are ignored by CSS Example: <style type=”text/css”> <!-- /* begin cloaking */ h1{font-size: 40pt;} h2{font-size: 30pt;} h3{font-size: 20pt;} /* end cloaking */ --> </style>
CSS Comments Description: CSS comments allow you embed documentation Examples: /* CSS comments are similar to C */ /* Comments can span multiple lines */ pre {color: gray;} /* end of line */
CSS Rule Structure Syntax Description: Each part of the CSS structure has a name Example: h1 /* element selector */ { /* begin declaration block */ /* first declaration */ color: /* property */ red; /* value */ ... } /* end declaration block */
Element Selector Description: Most often an HTML (or XML) tag Example (HTML): /* h1 is HTML element selector */ h1 {color: red;} Example (XML): /* BOOK is XML element selector */ BOOK {color: red;}
Style Syntax (revisted) elementElector { property1: value1; property2: value2 ...; ... } Notes: 1. White space is ignored 2. Some properties accept more than one value (space separated) 3. Declarations terminated with a semi-colon 4. Property/value pairs separated by a colon
CSS Common Errors Description: Like submarines CSS errors are silent and deadly Typical Errors: /* unknown property */ body {brain-size: 2cm;} /* unknown value */ body {color: ultraviolet;} /* semi-colon wrong place */ body {color: red};
CSS Common Errors (cont.) Description: Like submarines CSS errors are silent and deadly Typical Errors: body {font-family: times /* missing “;” */ font-style: italic;} /* missing colon */ body {color blue;} /* last semi-colon optional, however ... */ body {font-family: times; font-style: italic} /* not advised */
CSS Common Errors (cont.) Description: Like submarines CSS errors are silent and deadly Typical Errors: /* should not be comma value separators */ body {font: italic, small-caps, 900, 12px, arial} /* commas mean “or” */ /* should not be space value separators */ body {font-family: arial "lucida console" sans-serif;} / spaces mean “and” */
Cascading (Over Lapping) Element Selector Description: CSS declarations apply to the most specific HTML element in the hierarchy Example: body {font-family: arial;} p {font-family: times;} em {font-family: courier;} Question: <html> <p> <em>What font family?<em> <p> </html>
Grouping Selectors Description: Multiple Selectors can apply to the same declaration Example: h2, p {color: gray;} /* note commas separating elements */ Equivalent to the following: h2 {color: gray;} p {color: gray;}
Universal Selector Description: Universal Selector matches any element (like a wild card) Example: * {color: red;}
Grouping Declarations Description: One element can have multiple declarations Example (non-grouping declarations): h1 {font: 18px helvetica;} h1 {color: purple;} h1 {background: aqua;} Example (grouping declarations): h1 {font: 18x helvetica; color: purple; background: aqua;}
Group Declaration Errors Description: Omitting semi-colon will cause declaration(s) to be ignored. Example: h1 {font: 18x helvetica; color: purple /* missing “;” */ background: aqua;} Equivalent to the following: h1 {font: 18x helvetica; color: purple background: aqua;} Explanation: The property “color” can only accept one keyword value. CSS may render “h1” as purple color or skip the declaration and use the default black color.
Class Selectors Situation: You may wish to apply same style to several elements but not all. Poor Example (not quite what is needed): p {font-weight: bold; color: red;} Explanation: Definition applies to all paragraphs not just the ones selected.
Class Selectors (cont.) Description: Style definitions can be encapsulated and given a name Better Example (using class selectors): p.warning {font-weight: bold; color: red;} ... <p class=”warning”>It is critical ... </p>
Universal Class Selector Description: You can use the Universal Selector to apply styles to all elements Example: *.warning {font-weight: bold;} Note: The Universal Selector is optional and can be omitted from a class selector. For example: .warning {font-weight: bold;}
Cascading Class Selectors Problem: Classes associated with specific a element apply only to that element and do not cascade. Example (no cascading): p.warning {font-weight: bold;} span.warning {font-style: bold;} ... <p class=”warning”> I am bold <span class=”warning”> I am italic and not bold </span> I am bold again </p>
Cascading Class Selectors (cont.) Solution: Using a general class selector and an element specific class selector will result in a cascading effect. Example (with cascading): .warning /* general class selector */ {font-weight: bold;} span.warning {font-style: bold;} ... <p class=”warning”> I am bold <span class=”warning”> I am bold and italic </span> I am bold and not italic again </p>
Multiple Classes Description: Multiple classes can be applied to an element. Example: .warning {font-weight: bold;} .urgent {font-style: italic;} .warning.urgent {background: silver;} ... <p class=”warning”> This is a warning </p> <p class=”urgent”> This is urgent </p> <p class=”warning urgent”> This warning is urgent </p> Exercise: What font does urgent warning use?
Multiple Classes (Cont.) Description: Multiple Class Selectors are not order dependant but are name dependant. Example: .warning.help {color: red;} ... <p class=”warning urgent”>Text not red</p> <p class=”urgent warning help”>Red, bold, italic, and silver background text</p> <p class=”help warning urgent”>Same font as above</p>
ID Selectors Description: ID Selectors are similar to class selectors except they are preceded with an octothorpe (#) instead of a period and use an “id” attribute instead of class. Example: *#firstPara {font-weight: bold;} ... <p id=”firstPara”>Bold face text</p> Note: Universal Selector can be omitted, for example: #firstPara {font-weight: bold;}
Differences Between Class and ID Class: Many elements can have the same class. ID: Each ID value is unique and should apply to only one element. Note: Most browsers do not check for the uniqueness of the ID values and may treat ID and Class identically. However, the JavaScript function “getElementById()” expects that each element has an unique value. ID: Multiple ID Selectors can't be combined. Space separators are not permitted as ID attributes values.
Similarities Between Class and ID Description: Class and ID Selectors are case-sensitive. Example: p.CriticalInfo {font-weight: bold;} ... <p class=”criticalinfo”> The selector will not match the element </p>
Attribute Selector (Attribute Only) Description: Used for selecting an attribute regardless of the attribute value. Example: h1[class] {color: silver;} ... <h1 class=”ps”> Psalms </h1> <h1 class=”ge”> Genesis </h1> <h1 class=”pr”> Proverbs </h1>
Attribute Selector (Selecting One Attribute) Description: For diagnostic purposes, you may be able to use the Attribute Selector to highlight those elements that possess a certain attribute to distinguish it from those that do not possess that attribute. Example: /* select “alt” attribute images */ img[alt] {border: 3px solid red;} /* all elements with “title” attribute */ *[title] {color: yellow; background: black;}
Attribute Selector (Selecting Multiple Attributes) Description (repeated): For diagnostic purposes, you may be able to use the Attribute Selector to highlight those elements that possess certain attributes to distinguish it from those that do not possess those attributes. Example: /* select all hypertext links that also contain a title */ a[href][title] {border: 3px solid blue;}
Attribute Selector (Select Attribute and Value) Description: You can also specify the elements that have a specific attribute value. Example: a[href=”http://www.irs.gov”] {font-weight: bold; font-size: 200%} *[id=”321”] {background: #ff00ff;} Example (matching attributes with spaces): /* note: exact string match */ p[class=”urgent warning”] {font-weight: bold; font-color: red;}
Attribute Selector (with Partial Attribute Value) Description: It is possible to select an element that contains a single attribute value from a list of multiple space delimited values. Example: p[class~=”warning”] {font-weight: bold;} ... <!-- CSS matches the following --> <p class=”urgent warning”> Beware all who enter</a> Example: /* would not match class “warning” */ p[class~=”warn”] {font-weight: bold;}
Attribute Selectors (Additional) Description: Additional Attribute Selectors exist to match values. Example: /* selects classes named “foobar”, “barfoo”, and “bare” (sub-string match) */ span[class*=”bar”] {background: silver;} /* selects classes with an attribute that begins with “bar” */ span[class^=”bar”] {color: red}; /* matches classes with an attribute that ends with “bar” */ p[class$=”bar”] {font-weight: bold;}
Descendant or Contextual Selectors Description: Elements can be selected that match a certain parent/child relationships. Example: h1 em {color: magenta;} ... <h1> I was not selected </h1> <em> I was not selected either </em> <h1> <em> I have been selected </em> </h1>