Mark Pearl

Linking CSS

CSS in a Page
    <style type='text/css'>
CSS in a linked file
    <link type="text/css" rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="main.css">


Multiple Selections
tagType1, tagType2, tagType3 {

html, body, h1, h2 {
Descendent Selector

Selecting a tag that has a relationship with a parent tag.

parentTag childTag {

ul li {
Pseudo Selector

A modifier that can be added to a selector to select a tag only when a certain condition has occured.

tagName:PseudoSelectorState {

a:hover {
 text-decoration: underline;
 color: darkred;	

ol li:first-child {
 color: red;
Class Selector

In the html mark a tag as follows…

<ul class="nav">
  <li>Item 1</li>
  <li>Item 2</li>

In the css, use the following selector syntax

.nav a {
  color : #000000;
  text-decoration : none;

The above says ‘find all a tags that are children of any tag with a class of “nav”, and set the color to blue and turn off the underline.’

Attribute Selectors
  width: 120px;
  font-size: 30px;
Ordering of Selectors

The order of selectors matters. First declare the broadest rules with type selectors, and then get more specific with class selectors. The broader rules cascade down into the specific rules.


Two types of boxing…

  • Block level tags take up the entire width of their container - push tags to the next line.
  • Inline level tags don’t take up the entire.
tagName {
  display: inline;

You can change a box level tag to be an inline level tag by doing the above.

Border Radius
.box {
    border-radius: 50%
Box Shadow


.box {
    box-shadow: 1px 2px 2px #000;

You can also specify multiple box shadows… for example…

.box {
        1px 1px 2px #000,
        inset 1px 1px 2px blue;
Text Shadow

applies the shadow to text


h1 {
     text-shadow: 1px 2px #000;
Box Sizing

Change the default css box model

Three values:

  • Content box (default value)
  • Padding box
  • Border box
.box {
    box-sizing: padding-box;  
    border: 2px solid black;  
    margin: 20px;  
    padding: 10px;
    width: 300px;

The above box would work out to width including the padding, calculated width is 304px.

.box {
    box-sizing: border-box;
    border: 2px solid black;  
    margin: 20px;  
    padding: 10px;
    width: 300px;

The above box would work out to total width of 300px.  
Box Model

The box model is a way to describe the borders and spacing of a box.

  • The content
  • Padding - used to control the size of the box without adjusting the size of the content inside.
  • Border
  • Margin - used to control space between two boxes.
Resetting Defaults for Boxes
html, body, h1, h2, h3, p, ol, ul, li, a {
   padding : 0;  
   border : 0;  
   margin : 0;  

Centering Block Level Tags

  • Fixed width
  • Centering content inside a block level tag
text-align : center;


3 different types of images :

  • Content Images, just as necessary as the content
  • Layout Images, appear in the background, not necessary to understand the content
  • User Interface Images, help users understand navigation
Content Images
<img src="cake.png" alt="description of conent of image">

Centering images - change as block level element and use margin:auto to center

Centering images - change as block level element and use margin:auto to center

Layout Images
  • Added in CSS
body {
  background-image : url(images/gobbler.png};  
  background-position : top left;  
  background-repeat : repeat;  
Background Images
  • backgrounds are stacked in the order your specify them
.element {
        url(bg1.png) top left no-repeat,
        url(bg2.png) center right no-repeat;

Can specify in various formats including

  • RGBa (0, 0, 0, 0.75)
  • HSLA (240, 100%, 50%, 0.75)

HSLA is generally more intuitive than RGBa, and it’s much easier to make color adjustments on the fly.

  • You canspecify the opacity of any element.
  • Opacity on an element affects all the elements that are nested inside it.
.element {
    opacity : 0.45;
  • two main types of gradients
    1. Linear gradients (starting point, ending point, optional color stops)
    2. Radial gradients (center, ending shape contour and position, color stops)

Linear gradient example…

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

Radial gradient example…

.element {
    background : radial-gradient(circle at top left, aqua, blue);


.element {
    transform: translateX(20px);
.element {
    transform: scale(1.2);

.element2 {
    transform: scaleX(1.2);
    transform: scaleY(1.2);
.element {
    transform: skewX(25deg);
.element {
    background-color: black;
    transition: background-color 0.2s ease-in-out;

.element:hover {
    background-color: blue;


Formula for determining em’s is…

target / context =  result

For instance, assume you have a sidebar of 305px in a site of 940px, what is the resulting ratio?

305px / 940px = 0.32446809

.sidebar {
    float: left;
    text-align: center;
    width: 32.446809%; /* 305px / 940px */

Useful Flexible Math Calculator


HTML5 Doctor
HTML5 Boilerplate
Mozilla Developer Network
Can I Use?
HTML5 And The Document Outlining Algorithm
The New Bulletproof @Font-Face Syntax
HTML5 Outliner
HTML5 Outliner Chrome Extension
Datalist Experiment
Box-Shadow Demonstration
transition-timing-function - MDN
JavaScript Regular Expressions - MDN
Art Gallery Blog Source

Journey into Mobile References

Responsive Web
Adaptive Web Design
The Personal Disquiet of Mark Boulton
Future Friendly Resources
LukeW Ideation + Design
Media Queries
Viewport Meta Tag
Front-end Formations
CSS Cross-Country
Example website: The Lost World

blog comments powered by Disqus

Want to get my personal insights on what I learn as I learn it? Subscribe now!