Week 3

Homework: Acme Anvil Co. Continued

Solution

Homework is due on Thursday, August 13th.

Build two more pages for Acme Anvil Corporation: Products and Sign Up.

The key to sharing CSS between pages is to create a stylesheet. It's nothing fancy--just a plain text file with .css extension. So first, create a file called stylesheet.css right next to your index.html. If you want, you could put it in a folder--that's up to you. The next step is to move your CSS from the <style> (where it currently lives) to stylesheet.css. Do not put the <style> tag in the stylesheet.css file (just the CSS). Last step: where your <style> used to be, put a <link> tag. Just like this:

  
    <link rel="stylesheet" href="stylesheet.css" media="screen" >
  

Now you can create a new file, products.html, for example. Put that same <link> tag on the new page. Now your styles are shared between pages. Unfortunately, all the code for your header will have to be duplicated.

Products Page

ACME Products

Sign Up Page

ACME Sign up

Resources

CSS selectors

CSS selectors are how you get things on the page to style them in your CSS. There are a few basic ways to do this:

Remember:

Select on multiple things on a single element by chaining selectors together without a space, for example: a.danger.btn { color: red; }

Descendant CSS selectors

You can select nested elements by putting a space between selectors. For example: header a selects all the <a> tags in the header.

Some rules of thumb when nesting CSS selectors:

Pseudo-selectors!

Pseudo-selectors allow you to create CSS selectors that select elements based on a particular state of that element (called pseudo-classes). They are denoted by a colon. For example: a:hover selects the <a> tags that are currently being hovered over by the cursor.

A list of all the available pseudo-classes is available on MDN.

Some rules of thumb when using pseudo-selectors:

CSS Layouts

The way we've managed CSS layouts has evolved over the years. In chronological order: