01 introduction to css

Introduction to CSSWeb 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·bileNounA 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 CreepAir conditioning

Radio

Tape Player

CD Player

MP3 Player

GPS Navigation

Heated / Cooled Seats

Tire pressure monitors

Automatic transmission

Bluetooth Phone Integration

Laser Assisted Cruise Control

Automatic parallel parking?

Web = (HTML Documents + Hyper Links + Browser)

Web Feature CreepPictures

Complex layouts

Animation

Interactivity

Streaming Audio and Video

Forms

AJAX

Authenticated User Sessions

Single Page Applications

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.

The Web is an onion parfait

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;}

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

Anatomy of a CSS Rule

<!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;}

Discuss 01.02.01

Selectors query the DOM

p { ... }

h1 { ... }

#myElem { ... }

.someClass { ... }

#parent > .someClass { ... }

header p { ... }

#elem a { ... }

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

a:hover { ... }

a:focus { ... }

http://www.jw.org

http://www.jw.org

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?

Colors are numeric

#FFFFFF#000000#006600#CC0000

LORIM IPSUMLORIM IPSUMLORIM IPSUMLORIM IPSUM

Basic Propertiesbackground-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 ModelOR

How every element on a web page is a rectangle

Experiment: Chrome Dev Tools

* { border: 1px solid red !important;}

Box Model Property Shorthand#myBox { margin: 10px 20px 30px 40px;}

#yourBox { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;}

top right bottom left

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-flow with the screen. Fixed width is bad practice.

ReviewWhat 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.03What 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.03Customize 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 first line of a paragraph indented.

Activity 01.02.04Genesis 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.02Review: 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 difficult 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

Technology