![Page 1: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/1.jpg)
Design & Presentation
Designing for the web
![Page 2: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/2.jpg)
Review
HTML/CSS
![Page 3: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/3.jpg)
![Page 4: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/4.jpg)
The head is where you put information about your HTML�le, like its title. (Stu� that won't appear on the page.)
The body is where you put your content, such as text,images, and links. (For human eyes!)
![Page 5: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/5.jpg)
HTML: Basic structure
• Elements• Tags• Attributes
![Page 6: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/6.jpg)
Element
![Page 7: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/7.jpg)
Tag
![Page 8: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/8.jpg)
Attribute
![Page 9: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/9.jpg)
Elements nest inside one another
![Page 10: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/10.jpg)
![Page 11: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/11.jpg)
![Page 12: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/12.jpg)
How to add an image
![Page 13: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/13.jpg)
![Page 14: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/14.jpg)
Image attributes• src
• alt
• width
• height
![Page 15: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/15.jpg)
![Page 16: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/16.jpg)
Cascading Style Sheets
![Page 17: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/17.jpg)
Styles can be inline
![Page 18: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/18.jpg)
![Page 19: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/19.jpg)
This text is pink.
![Page 20: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/20.jpg)
Styles can be written in theHTML header
![Page 21: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/21.jpg)
![Page 22: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/22.jpg)
This text is also pink.
![Page 23: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/23.jpg)
Or in an external stylesheet
![Page 24: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/24.jpg)
![Page 25: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/25.jpg)
This text is still pink.
![Page 26: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/26.jpg)
Selectors:• id
• class
• element: div, a, span
• element state: a:active, a:hover, a:visited
![Page 27: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/27.jpg)
![Page 28: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/28.jpg)
![Page 29: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/29.jpg)
The basics:
What you can control with CSS
• text styles
• "the box model"
• positioning & display
• and more!
![Page 30: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/30.jpg)
Text styles• color
• font-family
• font-size
• font-weight
• text-align
• text-decoration
![Page 31: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/31.jpg)
"The box model"• width
• height
• border
• margin
• padding
![Page 32: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/32.jpg)
![Page 33: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/33.jpg)
Positioning & display• position
• display
• �oat
![Page 34: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/34.jpg)
Other• list-style-type
• cursor
• border radius
• & much more!
![Page 35: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/35.jpg)
Let's talk about …
Head & bodydetails
![Page 36: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/36.jpg)
Header tags
![Page 37: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/37.jpg)
This is heading 1This is heading 2
This is heading 3This is heading 4
This is heading 5
This is heading 6
![Page 38: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/38.jpg)
![Page 39: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/39.jpg)
![Page 40: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/40.jpg)
Tip
Whitespace isyour friend!
![Page 41: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/41.jpg)
This doesn't look so greatFlop over scratch the box put toy mouse infood bowl run out of litter box at full speedstick butt in face, or attack dog, run awayand pretend to be victim purr while eating.
Play time hiss at vacuum cleaner white catsleeps on a black shirt and eat grass, throwit back up.
![Page 42: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/42.jpg)
![Page 43: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/43.jpg)
Much better!Flop over scratch the box put toy mouse infood bowl run out of litter box at full speedstick butt in face, or attack dog, run awayand pretend to be victim purr while eating.
Play time hiss atvacuum cleaner whitecat sleeps on a blackshirt and eat grass,throw it back up.Immediately regretfalling into bathtubunder the bed lay on
arms while you're using the keyboard andlick the other cats sun bathe. Kitty power!
![Page 44: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/44.jpg)
Float a pullquote too
"Meow meowmeow (I am apullquote)"
Flop over scratch the box put toy mouse infood bowl run out of litter box at full speedstick butt in face, or attack dog, run awayand pretend to be victim purr while eating.
Play time hiss atvacuum cleaner whitecat sleeps on a blackshirt and eat grass,throw it back up.
Immediately regret falling into bathtubunder the bed lay on arms while you'reusing the keyboard and lick the other catssun bathe. Kitty power!
![Page 45: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/45.jpg)
BREAK!
![Page 46: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/46.jpg)
![Page 47: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/47.jpg)
Via Fast Company
![Page 48: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/48.jpg)
Tip
Use percent,not pixels
![Page 49: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/49.jpg)
![Page 50: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/50.jpg)
Via Fast Company
![Page 51: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/51.jpg)
Tip
Max-width is here to help
![Page 52: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/52.jpg)
![Page 53: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/53.jpg)
Via Fast Company
![Page 54: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/54.jpg)
Tip
Breakpoints forbetter layouts
![Page 55: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/55.jpg)
Via Fast Company
![Page 56: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/56.jpg)
![Page 57: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/57.jpg)
![Page 58: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/58.jpg)
Ex 1. Freeze frames
Ex 2. Because Scott Walker Asked
![Page 60: Design & Presentation Designing for the web · HTML/CSS. The head is where you put information about your HTML le, like its title. ... The basics: What you can control with CSS •](https://reader034.vdocuments.net/reader034/viewer/2022051923/6010c22c59247c400d7c72e5/html5/thumbnails/60.jpg)
Let's open ourinspector!