intro to css
DESCRIPTION
Slides from my Intro to CSS class. More info at http://randyoest.com.TRANSCRIPT
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
<interlude>
Obligatory Baby Pictures
</interlude>
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
Flow
Floats
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
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
RandyOest.com/CSS