01 introduction to css
DESCRIPTION
TRANSCRIPT
![Page 1: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/1.jpg)
Introduction to CSSWeb Development 101 Lesson 01.02
![Page 2: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/2.jpg)
What you already know
What is “The Web”
What is HTML
What is a DOM
Why the web matters as a technology
![Page 3: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/3.jpg)
![Page 4: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/4.jpg)
![Page 5: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/5.jpg)
![Page 6: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/6.jpg)
![Page 7: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/7.jpg)
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
![Page 8: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/8.jpg)
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.
![Page 9: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/9.jpg)
Automobile = (Chair + 4 Wheels + Engine)
![Page 10: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/10.jpg)
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?
![Page 11: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/11.jpg)
Web = (HTML Documents + Hyper Links + Browser)
![Page 12: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/12.jpg)
Web Feature CreepPictures
Complex layouts
Animation
Interactivity
Streaming Audio and Video
Forms
AJAX
Authenticated User Sessions
Single Page Applications
![Page 13: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/13.jpg)
A programmer’s job is to manage complexity.
![Page 14: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/14.jpg)
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.
![Page 15: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/15.jpg)
The Web is an onion parfait
![Page 16: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/16.jpg)
Client Side Stack
HTML — Document Content and Structure
CSS — Visual Presentation
Javascript/ECMAScript — Interactivity
![Page 17: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/17.jpg)
Anatomy of a CSS Rule
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
![Page 18: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/18.jpg)
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
![Page 19: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/19.jpg)
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
![Page 20: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/20.jpg)
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
![Page 21: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/21.jpg)
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
![Page 22: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/22.jpg)
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
![Page 23: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/23.jpg)
.blogPost { font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #333;}
Anatomy of a CSS Rule
![Page 24: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/24.jpg)
<!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
![Page 25: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/25.jpg)
Selectors query the DOM
p { ... }
h1 { ... }
#myElem { ... }
.someClass { ... }
#parent > .someClass { ... }
header p { ... }
#elem a { ... }
a[href="http://www.jw.org"] { ... }
a:hover { ... }
a:focus { ... }
![Page 26: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/26.jpg)
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
![Page 27: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/27.jpg)
#FFFFFF#000000#006600#CC0000
LORIM IPSUMLORIM IPSUMLORIM IPSUMLORIM IPSUM
![Page 28: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/28.jpg)
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;
![Page 29: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/29.jpg)
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;
![Page 30: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/30.jpg)
CSS Box ModelOR
How every element on a web page is a rectangle
![Page 31: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/31.jpg)
![Page 32: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/32.jpg)
![Page 33: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/33.jpg)
Experiment: Chrome Dev Tools
* { border: 1px solid red !important;}
![Page 34: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/34.jpg)
![Page 35: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/35.jpg)
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
![Page 36: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/36.jpg)
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.
![Page 37: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/37.jpg)
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?
![Page 38: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/38.jpg)
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`
![Page 39: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/39.jpg)
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?
![Page 40: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/40.jpg)
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.
![Page 41: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/41.jpg)
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
![Page 42: 01 Introduction To CSS](https://reader034.vdocument.in/reader034/viewer/2022051014/54c749804a7959272a8b45f1/html5/thumbnails/42.jpg)
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?