Intro to CSS
-
Upload
amazing-rando -
Category
Technology
-
view
114 -
download
3
description
Transcript of Intro to CSS
![Page 1: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/1.jpg)
Intro to
CSS
![Page 2: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/2.jpg)
Randy Oest Manager of Digital Design Williams Randall Marketing
!
@amazingrando
![Page 3: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/3.jpg)
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
![Page 4: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/4.jpg)
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
![Page 5: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/5.jpg)
If HTML is the Skeleton of Web pages…
![Page 6: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/6.jpg)
CSS is the muscle and skin.
![Page 7: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/7.jpg)
CSS Needs HTML
CSS is used to style elements, giving them form.
![Page 8: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/8.jpg)
HTML Elements
<p>Paragraph …</p>
<div class=“nav”>…</div>
<h1 id=“title”>Headline</h1>
![Page 9: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/9.jpg)
CSS Needs HTML
Selectors are used to target styles.
![Page 10: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/10.jpg)
Examples of Selectors
<p>Paragraph …</p>
p { … }
![Page 11: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/11.jpg)
Examples of Selectors
<div class=“nav”>…</div>
.nav { … }
![Page 12: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/12.jpg)
Classes
Class names always start with a period. .class
![Page 13: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/13.jpg)
IDs
IDs always start with a hash. There can only be one on a page.
#id
![Page 14: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/14.jpg)
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.
![Page 15: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/15.jpg)
Multiple Selectors
<h1 id=“title”>Headline</h1>
h1#title { … }
No spaces!
![Page 16: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/16.jpg)
Specificity
When there is a style conflict, IDs trump classes, and classes trump HTML elements
![Page 17: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/17.jpg)
Nested Elements
<div id=“feature”>
<img src=“…” />
Some Text …
</div>
![Page 18: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/18.jpg)
Nested Elements
<div id=“feature”>
<img src=“…” />
#feature img { … }
Now there is a space.
![Page 19: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/19.jpg)
.class { color: #fff; padding: 10px; }
Properties & Values
Property Value
![Page 20: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/20.jpg)
PX: Pixels
%: Percentage
EM: Relative unit, equal to the current font size
Common Size Units
![Page 21: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/21.jpg)
EMs, being relative units, can get complicated quickly when you nest them.
Warning about EMs
![Page 22: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/22.jpg)
1. External File
2. Internal, using the <style> tag
3. Inline styles
Getting CSS into the HTML
![Page 23: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/23.jpg)
Put this inside the <head>
<link rel="stylesheet" href="file.css">
External File
![Page 24: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/24.jpg)
Put this inside the <head>
<style type="text/css"> … your styles … </style>
Internal
![Page 25: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/25.jpg)
<h1 style=“color:#fff;”> Headline </h1>
Inline HTML
![Page 26: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/26.jpg)
<interlude>
![Page 27: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/27.jpg)
Obligatory Baby Pictures
![Page 28: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/28.jpg)
![Page 29: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/29.jpg)
![Page 30: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/30.jpg)
![Page 31: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/31.jpg)
</interlude>
![Page 32: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/32.jpg)
Box Model
![Page 33: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/33.jpg)
Elements of the Box
![Page 34: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/34.jpg)
An element’s size is equal to:
Width (or Height) + Padding + Border + Margin = Total Size
The Box Model is Tricky
![Page 35: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/35.jpg)
.box { width: 200px; padding: 10px; border: 5px; margin: 15px; }
![Page 36: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/36.jpg)
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
![Page 37: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/37.jpg)
There is a Better Way
![Page 38: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/38.jpg)
Use a Different
Box Model
![Page 39: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/39.jpg)
*, *:before, *:after { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; }
Magic Bullet
![Page 40: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/40.jpg)
selector { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; }
Fixing A Single Item
![Page 41: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/41.jpg)
An element’s size is equal to the width size.
Border Box is NOT Tricky
![Page 42: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/42.jpg)
Content-Box (Default)
Border-Box (Good!)
![Page 43: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/43.jpg)
padding-‐top: 10px; padding-‐right: 5px; padding-‐bottom: 10px; padding-‐left: 5px;
OR padding: 10px 5px 10px 5px;
Shorthand
![Page 44: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/44.jpg)
Starts at NOON and goes clockwise. padding: top right bottom left;
Shorthand
![Page 45: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/45.jpg)
padding: top+bottom right+left; padding: 10px 5px;
Even More Shorthand
![Page 46: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/46.jpg)
The Display Property
![Page 47: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/47.jpg)
Block: <h1>, <p>, <div>
Inline: <a>, <span>, <b>, <strong>
The Display Property
![Page 48: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/48.jpg)
a { display: block; }
The Display Property
![Page 49: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/49.jpg)
There are many more exotic display types, such as inline-‐block, none, etc.
The Display Property
![Page 50: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/50.jpg)
Flow
![Page 51: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/51.jpg)
Floats
![Page 52: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/52.jpg)
img { float: left; }
The Display Property
![Page 53: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/53.jpg)
Positioning can change an element in the flow.
![Page 54: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/54.jpg)
Positioning
Parent
Element
position: static
![Page 55: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/55.jpg)
img { position: static; }
Positioning
This is the default, no need to write it
![Page 56: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/56.jpg)
Positioning
Parent
Element
position: fixed
Fixed in relation to the browser.
![Page 57: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/57.jpg)
img { position: fixed; top: 0px; left: 0px; }
Positioning
![Page 58: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/58.jpg)
top: 0px; right: 0px; bottom: 0px; left: 0px;
Positioning
![Page 59: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/59.jpg)
Positioning
Parent
Element
position: relative
![Page 60: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/60.jpg)
img { position: relative; top: -‐10px; left: -‐200px; }
Positioning
![Page 61: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/61.jpg)
Positioning
Parent
Element
position: absolute
position: static
![Page 62: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/62.jpg)
img { position: absolute; top: 0px; left: 0px; }
Positioning
![Page 63: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/63.jpg)
Absolute positioning looks for the parent with a position other than static.
![Page 64: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/64.jpg)
Positioning
![Page 65: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/65.jpg)
Positioning
Parent
Element
position: absolute
position: relative
![Page 66: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/66.jpg)
img { position: absolute; top: 0px; left: 0px; }
Positioning
![Page 67: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/67.jpg)
A Quick Note About Mobile
![Page 68: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/68.jpg)
Most CSS that you write for mobile is just CSS.
![Page 69: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/69.jpg)
Percentages and relative units, like EMs are better than pixels, which are static width.
![Page 70: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/70.jpg)
@media all and (max-‐width: 699px){ … styles }
Media Query
![Page 71: Intro to CSS](https://reader033.fdocuments.us/reader033/viewer/2022061300/54c746774a7959272a8b459c/html5/thumbnails/71.jpg)
Further Learning
RandyOest.com/CSS