Lesson 6: How CSS Works


Click for closed captioning

Next Step

Step 2: CSS in Action


Click for closed captioning

In this video, you'll learn how to create an External Style Sheet and link it to your page.

External Style Sheets harness the real power of CSS, because they let you write a rule one time and then apply it to a bunch of different pages. All you need to do is add a link tag with three attributes to the head tag.

For this video and the two videos to your right, you can download the class handout for more details on specificity and the syntax of External Style Sheets and inline styles.

 


Click for closed captioning

Now let's learn how to make a navigation menu with hover effects using CSS.

The CSS Listutorial gives you step-by-step instructions on how to build a navigation menu with hover effects using an HTML list and CSS. You can make vertical menus, horizontal menus, nested menus and more.

If you look around online, you can also find instructions on how to create other types of menus, such as a dropdown menu.

When we cover jQuery plugins in two weeks, you'll learn how to create menus with motion, like an accordion menu.

 

 

 


Click for closed captioning

Finally, you can see how CSS specificity applies to our course website.

If you'd like to read more about inheritance or specificity, Smashing Magazine has thorough articles on both.

Some articles have used Star Wars and Poker metaphors to explain CSS specificity, if you think that would help the concept make more sense to you.

There's a specificity calculator you can use to figure out what will win on your page. Of course, you can also just preview the page for that information!

Next Step

Step 3: Meet a CSS Expert


Click for closed captioning

Kenji Ross is a Senior Creative Technologist working in Boston, Massachusetts.

He works for Mullen, a digital marketing agency, and before that he worked for years at the Barbarian Group. The National Geographic Channel's Explore the '80s is a recent example of a project he helped create.

Digital Public Library The New Republic
The Verge "Snow Fall" Feature
Form Follows Function  

Kenji's Five Simple CSS Tips


1) Wrap your head around the Document Object Model. It's a little obtuse, but it's the foundation for almost everything you'll do on the web, including HTML, CSS, and JavaScript.

2) Learn how to use the built-in Web Inspector tools in your browser. In Chrome, it's activated with a right-click, then "Inspect Element." In Safari, you need to enable it - go to the Preferences Menu -> Advanced and check the box for "Show Develop Menu in Menu Bar". It'll then be available on right-click. With Firefox, you can use Firebug.

3) Use the Inspector everywhere! Every time you see something awesome on the web, right-click on it, run the Inspector, and try to untangle how it was put together. Change values, see what happens. You'll get a lot further breaking things than having them go right all the time.

4) If something keeps breaking, run your CSS through the W3C Validator. It might just be something simple.

5) Keep older browsers in mind. The most heartbreaking part of a project can be right at the end, when you finally open up IE8 and realize the cool new feature you added is straight-up impossible to replicate. If you're building a website for a client, nail down the browser requirements right off the bat, before you even start working.

Next Step

Log in to Moodle to complete Assignment 6.