Part 4: CSS - Fancy pants and vendor prefixes

Presented by

Agenda

  • More CSS rules
  • CSS3 Fancy Pants
  • A quick note about vendor prefixes
  • Popular CSS Frameworks
  • Tools and references
  • Question time

More CSS Rules

  • Last time, we focused on some generic CSS rules, but a lot of them are specific to certain elements
  • Let's take the code from this slide for example (super meta)
  • <ul>
      <li>
        Last time, we focused on some generic CSS rules, but a lot of them
        are specific to certain elements
      </li>
      <li>
        Let's take the code from this slide for example (super meta)
      </li>
    </ul>
  • For lists, there are CSS rules for list-style that let you change the type and position of the markers to different shapes or alphabets or images. Play with the sample below.
  • ul {
      /* No bullets or anything */
      list-style: none;
    
      list-style: square;
      list-style: circle;
      list-style: disc;
    }

  • Last time, we focused on some generic CSS rules, but a lot of them are specific to certain elements
  • Lets take the code from this slide for example (super meta)

  • ol has a lot since there are a lot of ways to enumerate items
  • ol {
      list-style: decimal;
      list-style: decimal-leading-zero;
      list-style: hiragana;
      list-style: katakana;
      list-style: lower-alpha;
      list-style: lower-greek;
      list-style: lower-roman;
    
      /* There's actually more, but you get the point */
    }

  1. Last time, we focused on some generic CSS rules, but a lot of them are specific to certain elements
  2. Lets take the code from this slide for example (super meta)

Styling Links

  • The <a> tag has a few specific style rules as well
  • <div><a href="#">Click me!!</a></div>
    /* For unvisited links */
    a:link {
      color: #2d6cc0;
      text-decoration: none;
    }
    
    /* Visited links */
    a:visited {
      text-decoration: line-through;
    }
    
    /* On mouse over/hover */
    a:hover {
      color: #f1ab00;
      text-decoration: underline;
    }
    
    /* As it is being clicked or focused */
    a:active {
      font-size: 120%;
      font-weight: bold;
    }

Changing Display styles

  • Remember how I said that <div>s displayed as a block and <span>s displayed inline?
  • You can change that with css using the display rule
  • div {
      /* default */
      display: block;
    
      display: none;
      display: inline;
      display: inline-block;
      display: table;
    }
Let's try to illustrate this with the following code:
<div id="displayExample">
  <div>This should be on one line</div>
  <div>This should be on another line</div>
</div>

This should be on one line
This should be on another line

Font Families

  • In CSS, you can change the font of your text using the font-family rule:
    #fontExample {
      font-family: Arial, sans-serif;
      font-family: Georgia, serif;
      
      /* Don't really need the serif specification */
      font-family: Times New Roman;
    }
  • By default, this only works with standard browser fonts
Using the last slide as a demo for this
  • In CSS, you can change the font of your text using the font-family rule:
    #fontExample {
      font-family: Arial, sans-serif;
      font-family: Georgia, serif;
    		      
      /* Don't really need the serif specification */
      font-family: Times New Roman;
    }
  • By default, this only works with standard browser fonts

  • Okay, so what about external fonts?
  • Using the @font-face rule, we can include user owned fonts
    @font-face {
      font-family: 'spiderdude';
      src: url('fonts/HOMORAK.TTF') format('truetype');
    }
    
    #fontExample1 {
      font-family: 'spiderdude';
    }
  • SPIDERMEN 4 - Electric Boogaloo
  • Pretty cool, but gets kind of messy
  • Even better, Google provides free fonts from Google Web Fonts
  • You can go there, browse fonts and follow the instructions
  • The gist of it is, you include a link to the font in your <head> and you can use the font-family
  • For example, say I wanted to include Cabin Sketch:
    @import url(http://fonts.googleapis.com/css?family=Cabin+Sketch);
    
    #fontExample2 {
      font-family: 'Cabin Sketch';
    }

Getting fancy with CSS3

  • So CSS3 is the new CSS standard and has some fancy things
  • Problem is not all browsers have the features implemented (mostly IE)
  • You can take a look at http://caniuse.com/ to see how the support for CSS3 features is growing
  • Actually @font-face is CSS3

Border-Radius - Everyone loves rounded borders!

  • You might have noticed those sexy buttons shown off earlier
  • Here's the CSS for that:
    .buttonGroup button {
        background: #2d6cc0;
        border: 1px solid #2d6cc0;
        padding: 15px;
        font-weight: bold;
        color: white;
    
        /* border-radius works like padding or margin in terms of values */
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    
        font-family: Arial !important;
        box-shadow: 1px 1px 1px  #333;
        text-shadow: 1px 1px 1px #333;
    }

box-shadow and text-shadow

  • You can simulate a drop-shadow or text outline/shadow using box-shadow and text-shadow
  • Let's apply these to a simple div
    #shadowExample {
        background: white;
        text-align: center;
    
        /* box-shadow: x-offset y-offset spread-amount color */
        box-shadow: 5px 5px 5px #333;
        -moz-box-shadow: 5px 5px 5px #333;
        -webkit-box-shadow: 5px 5px 5px #333;
    
        /* text-shadow: x-offset y-offset spread-amount color */
        text-shadow: 5px 5px 5px #333;
        -moz-text-shadow: 5px 5px 5px #333;
        -webkit-text-shadow: 5px 5px 5px #333;
    }

    Look at dat shadow

Vendor Prefixes

  • You might have noticed the weird -webkit- and -moz- prefixed to the CSS rules
  • Since not all browsers have the rules implemented, to get access to these features, you have to write browser-specific code
  • For webkit browsers like Chrome, Opera, and Safari, you can prefix CSS3 rules with -webkit-
  • For browsers like Mozilla, you can prefix CSS3 rules with -moz-
  • IE has it's own weird things like filter, but who knows how that works

Popular CSS Frameworks

Tools and References

Questions?