01 Introduction To CSS

Introduction to CSS
Web Development 101
Lesson 01.02

What you already know
What is “The Web”
What is HTML
What is a DOM
Why the web matters as a technology

What we’ll learn
How to change the appearance of HTML
How to control page layout
How to make a single web page look great on multiple devices

au·to·mo·bile
Noun
A road vehicle, typically with four wheels,
powered by an internal combustion engine or
electric motor and able to carry a small number
of people.

Automobile = (Chair + 4 Wheels + Engine)

Early Feature Creep
Air conditioning

Heated / Cooled Seats

Radio

Tire pressure monitors

Tape Player

Automatic transmission

CD Player

Bluetooth Phone Integration

MP3 Player

Laser Assisted Cruise Control

GPS Navigation

Automatic parallel parking?

Web = (HTML Documents + Hyper Links + Browser)

Web Feature Creep
Pictures

AJAX

Complex layouts

Authenticated User Sessions

Animation

Single Page Applications

Interactivity
Streaming Audio and Video
Forms

A programmer’s job is to manage complexity.

Tools for managing complexity
Modules: separate code into pieces by subject and concern
Layers: abstract complexity into layers. Higher layers build on top of lower
layers. Lower layers hide complexity from higher layers.
Declarative programming: name code by what it accomplishes, not how
it accomplishes it.

Client Side Stack
HTML — Document Content and Structure
CSS — Visual Presentation
Javascript/ECMAScript — Interactivity

Anatomy of a CSS Rule
.blogPost {
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
color: #333;
}

Discuss 01.02.01
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>My First Webpage</h1>
<p>Lorem Ipsum</p>
</body>
</html>

html {
font: 13px/1.5 Helvetica, Arial;
color: #333;
}
h1 {
color: #FF0000;
font-size: 20px;
}

Selectors query the DOM
p { ... }

header p { ... }

h1 { ... }

#elem a { ... }

#myElem { ... }

a[href="http://www.jw.org"] { ... }

.someClass { ... }

a:hover { ... }

#parent > .someClass { ... }

a:focus { ... }

Colors are numeric
Colors are 3 or 6 digit hexadecimal numbers.
#FFF, #3FA2BF, #2F798F
Hexadecimal is base-16. {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F}
One digit is 4 bits (1 nibble, half an octet)
A color is 3 octets (24 bits). 8 bits for each Red, Green, Blue.
BONUS: How many distinct colors can be represented?

#FFFFFF
#000000
#006600
#CC0000

LORIM
LORIM
LORIM
LORIM

IPSUM
IPSUM
IPSUM
IPSUM

Basic Properties
background-color: #FFF;
background-image: url(‘...’);
background-repeat: no-repeat;
border: 1px solid #FFF;
display: block;
font-family: Palatino, Georgia, serif;
font-size: 15px;
font-style: italic;
font-weight: bold;
left: 50px;
margin: 1em 2em 1em 2em;
height: 5em;
max-height: 500px;

max-width: 960px;
min-height: 200px;
min-width: 20em;
opacity: 0.5;
overflow: hidden;
padding: 1em 2em 1em 2em;
position: relative;
right: 20px;
text-align: left;
text-decoration: underline;
width: 400px;
z-index: 4000;

CSS Box Model
OR
How every element on a web page is a rectangle

Experiment: Chrome Dev Tools
* {
border: 1px solid red !important;
}

Box Model Property Shorthand
#myBox {
top right bottom left
margin: 10px 20px 30px
40px;
}
#yourBox {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}

Dimensions
Pixels (px) are the smallest possible unit on a screen
Percents (%) allow sizing based on the size of the parent container
Ems (em) are equal to the font-size of the parent element
Generally use pixels for fonts & borders. Percents and Ems for layout
Designs must re-ﬂow with the screen. Fixed width is bad practice.

Review
What is CSS?
How do selectors work?
How do you specify colors in CSS?
Whats the box model?
According to the box model, what order is spacing applied in?
What units are available for dimensions?

Discuss 01.02.02
What selector would you use to...
Select the top-level element in the document
Select the `<div>` element with the `container` class
Select all of the links in the document
Select the element with the ID of `title`

Discuss 01.02.03
What elements are being selected?
What colors are being used? How do colors work in CSS?
What kind of font and font styling are being applied?
Whats the difference between width and max-width?
What is margin and padding? How are the similar? How are they different?
Short-hand vs. Long-hand CSS?
Why define the width as a percentage instead of in pixels?
What fonts can you use in CSS? Why are there multiple?

Activity 01.02.03
Customize example 01.02.03 in Chrome Dev Tools.
Change the color on the page to match the color clothing you're
currently wearing.
Increase the font size and change the font style to something with serifs.
Change the distribution of spacing on the page to something you think is
more readable.
Make the ﬁrst line of a paragraph indented.

Activity 01.02.04
Genesis 1—3 as HTML in project_work folder
Write CSS to:
Make each chapter display as a column
Improve the typography
Improve the colors
Make sizing / spacing more readable
Bonus: Use Media Queries to change layout based on screen width

Homework 01.02
Review: Read Web-Fundamentals-CSS.epub
Get creative: Write CSS for Alice in Wonderland
It should be readable on any screen size
Headings, poems, and paragraphs should be discernible by a visual hierarchy
Too much contrast in colors (text color vs. background color) is diﬃcult to read,
but so is too little.
Tomorrow morning: compare CSS styling of Alice in Wonderland.
What challenges did you face? What did you learn?

01 Introduction To CSS

More Related Content

What's hot

Viewers also liked

Similar to 01 Introduction To CSS

More from crgwbr

Recently uploaded

01 Introduction To CSS