CSS3 is the latest standard of CSS. Features include:
- border radius
- box shadow, text shadow
- transitions, transforms
- gradients
- multiple backgrounds
- font face

Creating Styles and Style Sheets

Adding CSS

<h1 style="color: red;">Text</h1>
Via head:

    h1 { color: red; }


  <link rel="stylesheet" href="stylesheet.css" />
    @import url(css/stylesheet.css);
    p { color: red; } // css rules must come after @import


Primary DOM selectors

- element selector (or tag)
- Class selector (pinpoint element on page regardless of the element/tag)
- ID selector (identifying unique part of a page)
<h1 class="intro" id="header">Nice One</h1>

Element Selector: directly mapping the HTML tag to css declaration: h1 { }

* { font-weight: bold; } // will style all elements/tags.

Can also be used with descendent selectors:
.banner * { color : red; }

Class Selector: mapping to class .intro { }

. is a class selector
- .foo will style all the elements with an attribute class="foo"
- used for things that will appear often

ID Selector: mapping to ID #header { }

# is an ID selector
- #foo will style the single element declared with an attribute id="foo"
- generally used for things that will only appear once

Can combine to create a compound/group selector: h1#header { }

Descendent Selectors

Descendent selectors allow format a element/tag based on its relationship to other tags

Ancestor: HTML tag that wraps around another is an ancestor. is ancestor of all other HTML tags.
Descendent: A HTML tag inside another is a descendent. For example, is a descendent of .
Parent: A parent is the closest ancestor.
Child: A HTML tag that’s directly enclosed by another is a child.
Sibling: HTML tags that a children of the same tag are called siblings.

Descendent Selectors:
A descendent selectors allows you to change the style of an element, only when it appears inside a tag. For example h1 strong { color : red; } .Any <strong> tag inside a h1 is red, whereas all other strong tags are unaffected.

Descendent selectors style elements that are nested inside other elements, following exact same pattern of ancestors and descendants as the tags in the HTML family tree.  Don’t need to describe entire lineage of the tree.

For example:

<div class="contract">
  <p class="name">John</p>
  <p class="phone">555</p>

.contact .name { font-weight : bold; }

.contract .phone { color : blue; }

Cascade Order

Style priority is determined by position on the site:
- external (lowest)
- in the
- inline
- using !important (highest priority)

Priority is also dependent on position in document:
- second instance overrides previous instance

Clearing, Inheritance & Specificity


- take element outside normal document flow and push to the edge of its specified parent container.  Other content wraps around floated item. Floated elements stack up to the parent edge, then move down to the next available edge (which may be the edge of the parent container, or an earlier item).
- order in HTML will determine which one breaks down to edge first
float: left / right / none;


If other items in a container not extending beyond the floated item, the parent container isn’t going to stretch to match the height of any floated items.

Need to clear a float, if any floated items stretch beyond the content that’s not floating

If all the content inside a container is floating, need to clear the container aswell.

Common float-clearing methods:
- clear with subsequent element
- manual clearing
- clearfix

clear: left / right / both;

Clear with subsequent elements problems:
- requires sequencing to stay intact
- background / border will not extend to float

Manual clear:
- add a manual clear as a sibling of any items in the floating element:

<div class="clear"></div>

.clear {
  clear: both;

Manual clear problems:
- if any changes need to strip empty div element from HTML

- adds group class to parent container to have children self-clear

.group:before, .group:after {
  content: "";
  display: table;

.group:after {
  clear: both;

.group {
  zoom: 1; /* IE6&amp;7 */

Inheritance & specificity

When set a property on a parent element, any children inside parent element are going to inherit styles, unless overridden.  To override, use a nested selector to override:

.featured {
  color: red;
// nesting the element selector overrides the .featured color  
.featured p {
  color: blue;

Specificity refers to the priority of a selector (if class and id present conflicting properties):
inline styles? | # of ID selectors | # of class selectors | # of element selectors

0 | 0 | 0 | 0

(unless !important)
- recommended to keep ID selectors down to a minimum.
- nesting conflicts to increase specificity number

Box Model


The overflow property handles content that flows outside boundaries of the box model.
overflow: visible / auto / hidden / scroll

- default: allows content to extend beyond container
- auto: adds scrollbars as needed to any content that overflows container
- hidden: content overflowing is hidden
- scrollbar: adds a scrollbar at all times, even if not needed


position: static / relative / absolute / fixed

- any content on the normal flow is considered static
- using a value other than static causes an object to become a positioned element
- once a positioned element, can use top, left, bottom and right to place
- relative: items rendered in the the normal flow, then shifted via positioning properties
- absolute: takes item outside normal document flow and allows manual positioning
- absolute position is going to be scoped to the window, unless falls within an element that is positioned (use relative with no placement properties)
- fixed: affixes an element to a specific place in the window, where will stay regardless of scrolling.  Unlike absolute positioning, cannot be scoped to a relative container on the page


Specifies the order overlapping elements will overlap.  If same z-index, item that appears second in HTML will be above the first.

Z-index will only apply to position other than static, so must position element for z-index to take effect (again, use relative with no placement if necessary).

CCS3 Styles

Border radius

- rounded corners to borders
- border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
- border-radius (shortcuts work ala margins / paddings)
- px or % work
- 50% can be used to create a perfect circle with a square box

Box shadow

- allows specify a shadow on an element
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

Text shadow

- applies a shadow to text
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

Box sizing

- changes default css box model, used to calculate widths and heights of elements 
box-sizing: content-box / padding-box / border-box
- content-box: the default, width and height includes only the content and not the padding, border or margin
- padding-box: width and height includes the padding, but not the border or margin (i.e. padding is taken into account of the width property)
- border-box: width and height includes both the padding and the border, but not the margin (i.e. padding and border is taken into account of the width property)

Multiple backgrounds

- can add multiple backgrounds to an element, stacked in order specified

.element {
  background-image: url(bg1.png), url(bg2.png);  
  background-position: top left, center right;
  background-repeat: no-repeat, no-repeat;


.element {
  url(bg1.png) top left no-repeat;
  url(bg2.png) centre right no-repeat;


- can specify colours with RGBa or HSLa
- RGBa (red, green, blue, alpha/opacity)
color: rgba(0, 0, 0, 0.75);
- HSLa (hue, saturation, lightness, alpha/opacity)
color: hsla(240, 100%, 50%, 0,75);


- specify opacity / transparency
- affects all elements nested inside
opacity: 0.75;


- gradients are smooth transitions between two or more colours

Linear gradients

- specify the starting point, ending point and optional stop-colour points
linear-gradient(<angle / keyword> to <side-or-corner keyword>, <colour-stop/s>)

.element {
  background: linear-gradient(to bottom, red, yellow);

- angle is generally a degree, for example 45deg

- to top = 0deg
- to bottom = 180deg
- to right = 270deg
- to left = 90deg

Color-stop consist of a colour and optional stop position, which can be length or a %

Radial gradient

- gradient that extends from the center outward in a circular or elliptical shape 
radial-gradient(<shape> <size> at <position>, <colour-stop/s>)

.element {
  background: radial-gradient(aqua, blue);

Shape: circle or ellipsis (default)
Size: closest-side, closest-corner, farthest-side, farthest-corner (default value), length or %
Postion: default is center, but any position that works for background-position
Color-stop consist of a colour and optional stop position, which can be length or a %

Cleaning Up CSS

DRY (don’t repeat yourself)

- target styles to parent container or entire document rather than individual elements
- declare elements in comma list:

p, h6 {
  font-size: 16px;

- selector abstraction: consolidate selectors (element, class, ID) with same properties into one.  Add a sub-class for any additional properties (make sure overriding class comes second in the stylesheet because the order matters).

Padding / Margin shorthand

Use shorthand syntax for margin and padding.  The padding or margin property can have from one to four values.

Top, Right, Bottom, Left (clockwise from the top of a clock).

padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px

padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px

padding: 25px;
all four paddings are 25px

Font shorthand

size/line-height weight style family:
font: 16px/18px bold italic sans-serif;

Background shorthand

color image repeat x-pos y-pos
background: #000 url(image.jpg) no-repeat center top

List-style shorthand

style position image
list-style: disc inside none;

Border shorthand

width style color
border: 3px solid #ccc;

Display Types

Display property effects how elements display together on a page
display: none / block / inline / inline-block

- block: stretch the full width of their container, behave as if a line break before and after, offers full box model
- inline: typically found within block-level elements, only take up the space of the content inside, and do not generate a line break before and after
- inline-block: same flow as inline element but behaves as a block element


Centering a block-level element:
- define a width of the element (less than the parent) and left / right margin of auto (margin: 0 auto;)

Centering a inline and inline-block element:
text-aline: center;

Layout & Specificity Issues

When defining margins on subsequent elements, keep in mind margin collapsing.  Margin collapsing is where two margins will overlap with each other and the larger of the two margins is set.

Collapsing margins will not occur where:
- padding or border
- relative or absolute positioning
- a float left or right

Its a good idea to have default styles across elements and normalise across browser.


Consider whether image is part of the layout or part of the content:
- images part of the content should be marked up as inline images
- images part of layout should be defined as background images

Overflow crop method:
- apply a crop class to parent item of the images (for example a list item), and apply set height and set width properties with overflow: hidden.  To the img itself apply set width and height: auto (or reverse this for portrait orientated images).

- re-size / scale images to a square less the height of all the images

Replacing text for logos etc:
text-indent: -9999px; // can use this to remove text from view, for example when replacing text with a logo

CSS Sprites

- can combine two images into one file for rollover states for .pngs and icons and shift the png up to show the second version to the user:

.logo:hover, .logo:focus {
// background-position first number is x-axis change, second number is y-axis change.  This would work for a logo with height 100px. Background-position defaults to 0 0 for original state.
  background-position: 0 -100px;

Pseudo Classes & Elements

Pseudo Classes

Can use pseudo classes to control elements without creating a new class and adding it to the HTML.  Can conditionally select an element based on its position or its state.

All start with a colon:
.class:hover // hover state
.class:focus // focus state
.class:active // active state
.class:visited // visited state


li:nth-child(even) // targets even items in list
li:nth-child(odd) // targets odd items in list
li:nth-child(an+b) // matches items in intervals of a, starting with the element at position b (or 0 if b isn’t set).
li:nth-child(2n) // even
li:nth-child(2n+1) // odd
li:nth-child(3n) // every third element
li:nth-child(4n + 4) // every forth starting with forth
li:nth-of-type() // only selects siblings of a set type within a matched list

Pseudo Elements

Effectively give two extra places per element to add style or layout

Can add content via the css content property

p:list-child:after {

:before / :after // requires content: property
:first-letter / first-line // requires content: property

Fonts & Interactions

Font Face

@font-face provides online fonts for a website


- 2D translation using transform

transform: translate(<x-axis in length or %>, <y-axis in length or %>);
transform: translateX(<length or %>);
transform: translateY(<length or %>);

- rotate element clockwise around its origin by the specified angle
transform: rotate(<deg>); // for example 45deg

- 2D scale by specified unitless number
- y-axis defaults to the same as the x-axis
transform: scale(<unitless value x-axis>, <unitless value y-axis>); // for example 1.2

transform: scaleX(<unitless value>);
transform: scaleY(<unitless value>);

- skew an element around the x and y axis by an angle
- only allows skew of x and y individually

transform: skewX(<angle>); // for example 25deg
transform: skewY(<angle>); // for example -85deg


- allow transitions between two states of a given element
transition: <property> 'all' <duration> <timing-function> <delay>;


.element {
  background-color: black;
  transition: background-color 0.2s ease-in-out;
.element:hover {
  background-color: blue;

Property: css property to apply transition to
Duration: time in seconds
Timing-function: ease, ease-in, ease-in-out, linear, cubic-bezier, step-start, step-end, steps()
Delay: time to wait until transition takes place

Transition multiple elements at once with 'all' keyword

Progressive Enhancement

- newer features that add to the experience in modern browsers, but doesn’t detract in older browsers