More CSS

  1. Measurements
    1. Measurements are used for any CSS property requiring a length (e.g., width, margin-left, text-indent, etc.)
    2. Relative-length measurements
      1. Size depends on screen resolution
      2. px (pixel), em (size of font's uppercase M), ex (height of font's lowercase x), percentage (50%)
    3. Absolute-length measurements
      1. Size is independent of screen resolution
      2. in (inches), cm (centimeters), mm (millimeters), pt (1 point = 1/72 in), pc (1 pica = 12 pt)
  2. Fonts
    1. font-size
      1. Relative values: xx-small | x-small | small | smaller | medium | large | larger | x-large | xx-large
        <p style="font-size: xx-small">Extra, extra small</p>
        <p style="font-size: xx-large">Extra, extra large</p>
        

        Extra, extra small

        Extra, extra large

      2. Popular relative-length measurement: em (16px = 1em)
      3. Popular absolute-length measurement: pt
    2. font-family
      1. List of fonts to use (try left to right)
        <p style="font-family: 'Times New Roman', Times, serif;">Times Font</p>
        

        Times Font

      2. Two types of font family names
        1. generic family - group with a similar look like "Serif" or "Monospace"
        2. font family - specific font like "Times New Roman" or "Arial"
    3. Italic and bold with font-style and font-weight
      1. font-style values: normal | italic | oblique
        <p style="font-style: italic">Italic</p>
        

        Italic

      2. font-weight values: normal | bold | bolder | lighter | number (400=normal, 700=bold)
        <p style="font-weight: bold">Bold</p>
        <p style="font-weight: 900">Really Bold</p>
        

        Bold

        Really Bold

    4. Set all properties with font
      1. Set properties in this order: font-style font-variant font-weight font-size/line-height font-family
        <p style="font: 2em Georgia">Example 1</p>
        <p style="font: italic bold 15px/30px Arial, sans-serif">Example 2</p>
        

        Example 1

        Example 2

  3. Box model
    1. The box model defines the rectangular spacing around HTML content
    2. Content is surrounded by padding, a border, and a margin

      Margin Border Padding Content
    3. An inline element fills the minimum space to display the content
      1. Example: <strong>, <em>, <a>
      2. <span> tag is a generic tag that has no display properties by itself
      3. Example:
        I <span style="color: red">love</span> CSS!
        
        I love CSS!
    4. A block-level element has a virtual box drawn around it that spans the browser width by default
      1. Example: <p>, <ol>, <nav>
      2. <div> tag is a block-level element that has no display properties by itself
      3. Example:
        <div style="border-width:5px; border-style:solid; border-color:blue; 
        	padding:10px;">
           A house divided against itself cannot stand.
        </div>
        
        A house divided against itself cannot stand.
      4. width and height properties used for specifying dimensions of a block-level element
        <!-- Using shorthand to assign border's width, style, and color -->
        <div style="border:15px groove green; padding:10px;
        	width:140px; height:80px">
           You are the light of the world.
        </div>
        
        You are the light of the world.
  4. Floating
    1. A floating element is positioned on the left or right side of a container, and other elements flow around it
    2. float can be either left, right, or none
    3. Example:
      <div style="border:1px solid green; width:250px; height:80px">
      	<img src="images/harding_helmet.png" style="float:right">
      	<p>Note how this text floats around the left side of the image.</p>	
      </div>
      
      football helmet

      Note how this text floats around the left side of the image.

  5. Backgrounds
    1. Every element's background can be set to a color and/or image
    2. The following class could be used by the <body> if you wanted it to apply to the entire page
      .background {
      	background-image: url(images/harding_helmet.png);
      	background-repeat: repeat-y;
      	background-position: right;
      	background-color: CornflowerBlue;
      }
      

      This paragraph uses the background class from above. Note that the football helments repeat vertically on the right side. Leaving off the background-repeat would cause the image to tile horizontally and vertically.

    3. A note about style: Use background images that have a very low contrast (above is an example of what not to do). The text that appears on top of the background should be dark if the background is light, and vice versa. Read more about color issues
  6. CSS extension languages or CSS preprocessors
    1. Created to make it easier to maintain large CSS style sheets
    2. Looks a lot like CSS, gets compiled into CSS
    3. Sass
    4. Less