- Describe what on a webpage can be modified with CSS, and what cannot
- Identify CSS methods that can replace bad habits in HTML
- Properly separate the concerns of semantics and style
- Identify the components of the box model
- Differentiate between border-box and content-box values for box-sizing
Cascading Style Sheets are what make webpages look like more than just words on a page. HTML's only purpose is to say what purpose chunks of content serve; CSS's only purpose is to say what a chunk with a certain purpose should look like.
This lesson is going to be almost entirely you working through some exercises we have prepared for you. You will not turn in these exercises. However, whoever completes them first and best gets bragging rights!
These exercises may use CSS properties with which you're unfamiliar. In fact, you may not be familiar with CSS at all.
- Read it like English. CSS is intended to be readable, although sometimes it's more successful than at other times.
- Look it up. If you don't know what
box-sizingmeans, Googlecss box-sizing.
The purpose of this class isn't for you to walk away being an expert in all things CSS. That takes months. Rather, it's for you to be exposed to all the things that can be accomplished with CSS. If they're on your radar, you can always look them up later.
Remember: being a good web designer is like being a good artist. We can teach you to hold the paintbrush, but it's on you to create a masterpiece!
Please count off from 1 to [class size / 2]. In pairs, please work to complete this exercise:
https://github.com/ga-wdi-exercises/css-review
Whoever completes the most questions gets bragging rights!
Please count off again, and complete this exercise:
https://github.com/ga-wdi-exercises/css-ghost
Please count off again, and complete this exercise:
https://github.com/ga-wdi-exercises/hyrule_potion_shop
There are over 500 CSS properties. It's impossible to memorize them. The key is to just get an idea of what you can accomplish with CSS, and then know what to Google.
The CSS Validator is a tool into which you can copy and paste your CSS, and it'll tell you precisely what's wrong with it. We'll be expecting you to validate your CSS during this course.
The Chrome element inspector lets you look at a specific element on a page, see exactly which CSS rules are being applied to it, and turn those rules on and off and modify them. It doesn't change your file; refresh the page, and the changes are gone.
Bootstrap is a CSS library: it's a stylesheet you can link to in your HTML, and it provides you with a bunch of classes that you can apply that make things look really nice.
Many designers sniff at Bootstrap because, they argue, sites that use it all look the same. However, unless you plan on specializing in front-end design, a Bootstrapped site may be better than a site with no CSS, or a site with handmade CSS: it shows that you recognize what your strengths are and are focused on delivering a product, rather than doing things the "right" way.
- What is the purpose of
flex-box? - What does
*select? - What does
box-sizing:border-boxdo? - What's the difference between
position:relative,position:absolute, andposition:fixed? - What's the difference between borders, margins, and padding?
- What's the difference between an outline and a border?
- How would you apply styles only for screens narrower than 480 pixels?
- W3Schools CSS Reference
- Almost every CSS property ever.
- Mozilla Developer Network CSS Reference
- Like W3Schools, but in much more detail.
- CanIUse.com
- Search for a CSS property (or HTML, or JS), and it'll tell you on which web browsers it functions.
- LearnLayout.com
- An great interactive tutorial that details CSS' many properties and quirks.
- CSS Validator
- Copy and paste your CSS in here and it tells you what's wrong with it.