Building HTML5 Apps

CSS 3.0

Specificity

← More specific Less specific →
#id .class element

#id

Unique to one element

the grid- "gridID"

.class

Repeatable to any element

A classification - "rows", "columns", "links"

element

All of one particular element

A thing - "article", "footer","section"

HTML5Can

@font-face

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  src: url('../open-sans.ttf') format('truetype');
}
  

font-family: 'Open Sans', Arial, sans-serif;
//     @font-face, system font, general/backup

@font-face services

  1. FontSquirrel.com free!
  2. Google Web Fonts free!
  3. TypeKit freemium
  4. FontDeck freemium

Always make sure you have a fallback!

font-family: 'SomeSpecialFont', Georgia, serif;

border-image

A guide: CSS-tricks.com - Understanding Border Image

border-radius

Reference - Border radius (css-tricks.com)

#example {
  // Vendor prefixes
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

  // Corners will have a radius of 10px
  border-radius: 10px;
}
  
 

border-radius

#red {
  // Use percents to make circles and ellipses
  border-radius: 50%;  
}

#green {
  // top left, top right, bottom right, bottom left
  border-radius: 20px 30px 40px 50px;  
}

#blue {
  // horizontal radius / vertical radius
  border-radius: 50px/30px;
}

transforms

Reference - Transform (MDN)

  -webkit-transform: scale(1.2) rotate(20deg) translateX(-10px) translateY(10px);
  -webkit-transform-origin: top left;

  -moz-transform: scale(1.2) rotate(20deg) translateX(-10px) translateY(10px);
  -moz-transform-origin: top left;

  transform: scale(1.2) rotate(20deg) translateX(-10px) translateY(10px);
  transform-origin: top left;

transforms

transitions

transition: background-color 3s ease 1s;
// property || duration || timing-function || delay