Cascading Style Sheets (CSS)

  1. CCS is used to change the layout, colors, and fonts of a web page when rendered in the browser
    1. Separates the presentation of the page from the document's structure and content
    2. CSS 1 first developed in 1996
    3. Most of CSS 3 is currently implemented by all major browsers but not always consistently, so cross-browser testing is necessary
    4. W3C CSS Validator or CSS Lint can catch errors
  2. Inline styles
    1. An inline style applies only to a specific element (and its children) in a web page
    2. Use the style attribute with any tag; value uses CSS syntax with property:value pairs separated by semicolons
    3. Create a red paragraph:
      <p style="color: red">This text is <em>red</i>

      This text is red

    4. Separate multiple properties with semicolon:
      Hello, <string style="color: blue; font-size: 18pt">blue text</strong>!
      
      Hello, blue text!
    5. Colors
      1. 147 pre-defined color names like green or burlywood
      2. Use rgb to specify red, green, blue decimal values (0-255)
        <p style="color: rgb(0, 255, 0)">green</p>
        <p style="color: rgb(255, 0, 255)">purple</p>
        <p style="color: rgb(255, 255, 255)">white</p>
        <p style="color: rgb(0, 0, 0)">black</p>
        
      3. Use #RRGGBB to specify red, green, blue using hexidecimal values (00-FF)
        <p style="color: #FF00FF">magenta</p>
        
  3. Embedded style sheets
    1. Embedded style sheet is defined with <style> in the <head> section of a web page
    2. Styles apply to selected elements in the web page
    3. A selector specifies HTML elements that CSS should be apply to
      1. An element selector selects elements. Ex: h1 selects <h1> tags
      2. A class selector selects elements that use the class. Ex: .className styles apply to elements with class="className" attribute
      3. An ID selector select an element that uses the id. Ex: #idName styles apply to the element with id="idName" attribute
    4. Example embedded style sheet
      <head>
      	<style type="text/css">
      		/* h1 and p are element selectors */
      		h1 { color: red; }               
      		p { background-color: blue; }
      		
      		/* Class selector */
      		.special { 
      			font-size: small; 
      			font-family: arial, sans-serif; 
      		}
      		
      		/* ID selector */
      		#email { text-decoration: none;	}
      					
      		/* Apply same styles to h2 AND h3 */
      		h2, h3 { text-decoration: underline; }   
      		
      		/* Descendant selector: only em used in li is bold */
      		li em { font-weight: bold; }   
      	</style>
      	<!-- etc... -->
      </head>
      
      1. All <h1> tags in the page will appear red
        <h1>I'm red</h1>
        
      2. Any tag can use the special class by using the class attribute
        <p class="special">I've got a blue background and use a small, Arial font</p>
        
      3. Tag using the #email ID is not underlined
        <a id="email" href="mailto:admin@gmail.com">System Administrator</a>
        
    5. A class may be defined for use on only a particular type of element
      h5.coolGreen { color: rgb(10, 200, 200) }
      
      The coolGreen class can only be used with <h5> tags:
      <h5 class="coolGreen">I'm green</h5>
      <h1 class="coolGreen">I'm NOT green!</h1>
      
    6. Multiple classes can be applied to the same element
      <h5 class="coolGreen special">I'm green with small text</h5>
      
    7. A pseudo-class is used to add special effects to some selectors
      1. Syntax: selector:pseudo-class or selector.class:pseudo-class
      2. Pseudo-class names are not case-sensitive
      3. Example where ordering of pseudo-classes is important
        a:link    { color:red     }   /* unvisited link */
        a:visited { color:green;  }   /* visited link */
        a:hover   { color:orange; }   /* mouse over link */
        a:active  { color:blue;   }   /* selected link */
        
      4. More info here
  4. External style sheets
    1. An external style sheet is a separate file (with .css extension) that contains a CSS style sheet, and it can be imported into any web page
    2. Used to give a website a consistent look and make it easier to change styles that affect multiple web pages
    3. Example styles.css (note there is no HTML):
      body 		{ font-family: arial; }
      a			{ text-decoration: none; }
      h1.cool		{ color: blue; text-align: center; }
      
    4. Import into a web page:
      <head>
      	<link rel="stylesheet" type="text/css" href="styles.css">
      </head>
      
  5. Inheritance and conflicts
    1. Child elements inherit their parent's properties
      <p style="color: blue">This is a <strong>test</strong></p>
      
      <strong> inherited properties from its parent <p>, so "test" is blue

      This is a test

    2. A child may override its parent's properties
      <p style="color: blue">This is a <strong style="color: green">test</strong></p>
      
      <strong> overrides its parent and makes "test" green

      This is a test

    3. CSS styles can override default properties applied by the browser
      <b style="font-weight: normal;">Text is NOT bold</b>
      
      Text is NOT bold
    4. Although most properties cascade down to child elements, some like background-image do not
      <body style="background-image: url(bison.png)">
      
      Only the <body> uses the bison.png image for its background, none of its children do
    5. Conflicts can arrise when competing style properties are assigned by external style sheets, embedded style sheets, and inline styles. Inline styles have the highest precedence, embedded styles next, external last
      <p style="color: blue">test</p>
      
      Even if an embedded or external style sheet says <p> should be green, it will be blue