Previously:

  • HTML Test - Awards Page
  • HTML Forms / Input Elements


Today:

  • Linking to External Style Sheets
  • Intro to Cascading Style Sheets
  • Styling the Container Area
  • CSS Box Model
  • Styling the Content 
Intro to Cascading Style Sheets

Linking to an external style sheet

<!DOCTYPE html>
<html>
               <head>
                          <link rel="stylesheet"  href="style.css">
               </head>
.
</html>
Intro to Cascading Style Sheets

CSS external file is a text file saved using .css extension
Follow the exact same format we used inside the <style> tags

Selector { Property:  Value ; }

       Examples:
body { background-color: gray;} 
p { color: blue;} 
h3 { font-size: 12pt;}
 
Intro to Cascading Style Sheets

CSS Comments

A comment starts with  /* and ends with */

        Example:
   /* This comment spans one line */
   /* This is a comment that      spans multiple lines  */
Intro to Cascading Style Sheets

CSS Selectors


other types of selectors:

http://www.w3schools.com/cssref/css_selectors.asp

Intro to Cascading Style Sheets

Measurements
%     percentage
in    inch
cm    centimeter
mm    millimeter
em    1em is equal to the current font size. 2em means 2          times the size of the current font.
ex    one ex is the x-height of a font (x-height is usually       about half the font-size)
pt    point (1 pt is the same as 1/72 inch)
pc    pica (1 pc is the same as 12 points)
px    pixels (a dot on the computer screen)
Intro to Cascading Style Sheets

CSS Colors

             Three Color Options:
      • Setting the foreground color for contents
      • Setting the background color for an area
      • Setting a background image to fill out an area
Intro to Cascading Style Sheets

CSS Color Values

  • Predefined color names
  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors



 
Intro to Cascading Style Sheets

Predefined Color Names  (17 standard)
   aqua                                     olive      
black                                   orange
blue                                    purple
fuchsia                                   red       
gray                                      silver 
 green                                     teal      
lime                                      white
maroon                               yellow  
navy                                                    
plus 123 more! http://www.w3schools.com/html/html_colornames.asp
Intro to Cascading Style Sheets

CSS Color Values

Hexadecimal  - # xxxxxx 
                                                                      ( hex range:  00-FF )   

RGB, RGBA - rgb ( val, val, val ) , rgba (val, val, val , alpha) 
                                                                                            ( decimal range:  0-255,  alpha range : 0.0 - 1.0 )                   
                              
HSL, HSLA - hsl ( hue,  sat%, light%) , hsla (hue,  sat%, light%, alpha)
                                                                     ( decimal range:  0-360,  % range: 0-100%, alpha range : 0.0 - 1.0 )   
                                                                                                                          http://goo.gl/I062re
Intro to Cascading Style Sheets

CSS Background Properties

  • background-color 
  • background-image 
  • background-attachment 
  • background-origin 

  • background-position 

  • background-repeat 

  • background-size

  • background-clip 

Intro to Cascading Style Sheets


Specifying a background image to be displayed.
background-image : url ('filename');
            Example:
body {background-image: url(logo.gif); }
body {background-image: url(http://someplace.com/logo.gif);}
Three image formats:  jpg, png, gif 

It's also good practice to assign a background-color, 
if the image file is not available.
Intro to Cascading Style Sheets

CSS Box Model

  • Every element in an HTML document is considered to be a box
  • Margins are always transparent
  • Borders come in various styles
  • Background settings apply to the the area of the padding and content areas
Intro to Cascading Style Sheets

CSS Border Properties

Intro to Cascading Style Sheets

CSS Margin and Padding Properties
  • margin

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

  • padding

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left
Intro to Cascading Style Sheets

CSS Positioning and Floats

  • position  - (absolute or relative)
  •  float - (left, right or none)              
    • Intro to Cascading Style Sheets

    Styling Content : Fonts



    Intro to Cascading Style Sheets

    Styling Content : Text

    Intro to Cascading Style Sheets

    Styling Content : Hyperlinks (pseudo-class)

             Example:
    a:link {	color: blue;}a:visited {		color: purple;}a:active {		background-color: yellow;}a:hover {		color:red;}
    Intro to Cascading Style Sheets

    Styling Content : Multiple Columns


             Example:
    div { 
      -moz-column-count:3;    /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
      -ms-column-count:3;     /* IE */
      column-count:3;
}
             Note: Some CSS properties require the use of prefixes for items not yet official CSS spec
    Made with Slides.com