01 introduction to css
Post on 27-Jan-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
.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 { ... }
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;
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?
top related