Styling
Lesson Number 10, September 17, 2014
Due For This Class
- Read The Dao of Web Design. Though this article is 13 years old, it is still considered a "classic" of web design writing and is essential reading for any web designer.
- Read pages 207 - 224 in your HTML & CSS book.
Lesson Breakdown
- What did you think of The Dao of Web Design?
- CSS Zen Garden
- CSS - Classes and IDs
- CSS - Specificity
- CSS - Sharing Styles!
In-Class Activity
- Open your project-portfolio in Brackets.
- Create a new folder and name it css (all lower-case)
- Create a new file in that folder and name it "practice.css"
- Open your css-practice.html file. Copy and paste the information from BETWEEN the style tags into your practice.css file.
- Delete the
<style>and</style>tags from your css-practice.html file. - Create a new tag in your
<head>.
<link rel="stylesheet" href="css/practice.css">
(no end-tag needed)
- When you have finished, save this and upload it to GitHub.
- Let me know when you are done!
If you are finished before the end of class:
- Create a new file in your CSS folder and name it style.css
- Link this stylesheet to the index of your project portfolio.
- If you already have styles in the head of your project portfolio, move them to this new file.
Homework
- Read Chapter 8 in White Space Is Not Your Enemy (pg 114 - 134)
- Read WebAIM's Article on Color-Blindness (about 5 minutes)
- Read Smashing Magazine's series on Color Theory (each should take about 10 minutes to read - there are lots of pictures!)
- Read Contrast is King (this should take about 10 minutes to read, maybe less)
- Pick three colors to use on your Project Portfolio. You can use a color scheme generator (a few are listed below), or draw inspiration from other sources.