Intro to CSS

57 %
43 %
Information about Intro to CSS

Published on March 13, 2014

Author: amazing-rando



Slides from my Intro to CSS class. More info at

Intro to CSS

Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando

Why Learn CSS? 1. Running a blog on a CMS and want to tweak things 2. Working with a developer and want to understand how to talk with them 3. Web designer looking to understand how things get built

What We’ll Learn 1. What is CSS 2. How to speak CSS 3. How to apply it 4. Where to find out more info

If HTML is the Skeleton of Web pages…

CSS is the muscle and skin.

CSS Needs HTML CSS is used to style elements, giving them form.

HTML Elements <p>Paragraph …</p>   <div  class=“nav”>…</div>   <h1  id=“title”>Headline</h1>  

CSS Needs HTML Selectors are used to target styles.

Examples of Selectors <p>Paragraph …</p>   p  {  …  }  

Examples of Selectors <div  class=“nav”>…</div>   .nav  {  …  }  

Classes Class names always start with a period. .class

IDs IDs always start 
 with a hash. There can only be one on a page. #id

Think of classes as your name and nicknames, e.g. Randy, Amazing Rando, Hey You… Think of IDs as your unique social security or credit card numbers.

Multiple Selectors <h1  id=“title”>Headline</h1>   h1#title  {  …  }   No spaces!

Specificity When there is a style conflict, IDs trump classes, and classes trump HTML elements

Nested Elements <div  id=“feature”>     <img  src=“…”  />     Some Text … </div>

Nested Elements <div  id=“feature”>     <img  src=“…”  /> #feature  img  {  …  } Now there is a space.

.class  {     color:  #fff;     padding:  10px;   } Properties & Values Property Value

PX: Pixels %: Percentage EM: Relative unit, equal to the current font size Common Size Units

EMs, being relative units, can get complicated quickly when you nest them. Warning about EMs

1. External File 2. Internal, using the <style> tag 3. Inline styles Getting CSS into the HTML

Put this inside the <head> <link  rel="stylesheet"   href="file.css"> External File

Put this inside the <head> <style  type="text/css">     …  your  styles  …   </style> Internal

<h1  style=“color:#fff;”>     Headline   </h1> Inline HTML


Obligatory Baby Pictures


Box Model

Elements of the Box

An element’s size is equal to: Width (or Height) + Padding 
 + Border + Margin = Total Size The Box Model is Tricky

.box  {    width:  200px;    padding:  10px;    border:  5px;    margin:  15px;   }

So if we plug in values: Width (200px) + Padding (10px * 2 sides)
 + Border (5px * 2 sides) + Margin (15 px * 2 sides) = Total Size (260px) The Box Model is Tricky

There is a Better Way

Use a Different 
 Box Model

*,  *:before,  *:after  {   -­‐webkit-­‐box-­‐sizing:  border-­‐box;   -­‐moz-­‐box-­‐sizing:  border-­‐box;   box-­‐sizing:  border-­‐box;   } Magic Bullet

selector  {   -­‐webkit-­‐box-­‐sizing:  border-­‐box;   -­‐moz-­‐box-­‐sizing:  border-­‐box;   box-­‐sizing:  border-­‐box;   } Fixing A Single Item

An element’s size is equal to the width size. Border Box is NOT Tricky

Content-Box (Default) Border-Box (Good!)

padding-­‐top:  10px;   padding-­‐right:  5px;   padding-­‐bottom:  10px;   padding-­‐left:  5px;   OR padding:  10px  5px  10px  5px; Shorthand

Starts at NOON 
 and goes clockwise. padding:  top  right  bottom  left; Shorthand

padding:  top+bottom  right+left;   padding:  10px  5px; Even More Shorthand

The Display Property

Block: <h1>,  <p>,  <div>   Inline: <a>,  <span>,  <b>,  <strong> The Display Property

a  {    display:  block;   }   The Display Property

There are many more exotic display types, such as inline-­‐block, none, etc. The Display Property



img  {    float:  left;   }   The Display Property

Positioning can change an element in the flow.

Positioning Parent Element position:  static

img  {    position:  static;   }   Positioning This is the default, no need to write it

Positioning Parent Element position:  fixed Fixed in relation to the browser.

img  {    position:  fixed;    top:  0px;      left:  0px;   }   Positioning

top:  0px;     right:  0px;   bottom:  0px;   left:  0px;   Positioning

Positioning Parent Element position:  relative

img  {    position:  relative;    top:  -­‐10px;      left:  -­‐200px;   }   Positioning

Positioning Parent Element position:  absolute position:  static

img  {    position:  absolute;    top:  0px;      left:  0px;   }   Positioning

Absolute positioning looks for the parent with a position other than static.


Positioning Parent Element position:  absolute position:  relative

img  {    position:  absolute;    top:  0px;      left:  0px;   }   Positioning

A Quick Note About Mobile

Most CSS that you write for mobile is just CSS.

Percentages and relative units, like EMs are better than pixels, which are static width.

@media  all  and  (max-­‐width:  699px){     …  styles   } Media Query

Further Learning

#feature presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

CSS Introduction - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more


Wenn CSS nicht das große neue Ding werden, bin ich enttäuscht von der Musikszene allgemein und sehr sauer auf eigentlich alle. Das ist natürlich nichts ...
Read more


CSS arbeiten derzeit in ihrer Heimatstadt Sao Paulo an ihrem zweiten Album. Ungefähr die Hälfte sei schon aufgenommen und die Unterschiede zum ...
Read more

CSS3 Intro - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

Introduction to CSS – Part 1 – CSS Tutorial

Introduction to CSS: Part 1. This first CSS article is designed to get your ‘feet on the ground’. You should know at least a little about HTML and web ...
Read more

Chapter 1 : Introduction to CSS « CSS Basics

Chapter 1 : Introduction to CSS. A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you ...
Read more

Intro to HTML and CSS - YouTube

These videos are part of a full course, Intro to HTML and CSS offered on To view the full course visit ...
Read more

Free CSS | 2430 Free Website Templates, CSS Templates and ...

Free CSS has 2430 free website templates, all templates are free CSS templates, open source templates or creative commons templates.
Read more

CSS - Cascading Style Sheets

World Wide Web Consortium's CSS Page that includes links to standards and other reference pages. Also includes news on CSS happenings.
Read more


CSS (Cascading Style Sheets, zu deutsch „Kaskadierende Stilvorlagen“) ist eine Formatierungssprache für HTML- und XML-Dokumente. Warum Sie Layouts mit ...
Read more