HTML Me Something, Part 2

In Part 2, you’ll get comfortable with using CSS selectors and rules to dictate display, while keeping your styles separate from your content.

Getting Started

  1. Create a file named styles.css in your project directory.
  2. Link it to your index.html.

Getting to Work

Go ahead and start adding styles in your styles.css file!

Requirements

Your CSS must:

  1. Use margin and padding to space your elements in a visually pleasing way.
  2. Use at least one of each of the following types of selectors:
    1. element,
    2. class,
    3. id.
  3. Follow these rules:
    1. Avoid adding HTML elements in order to achieve a specific visual effect.
    2. Use document-level and inline styles sparingly, and only when absolutely necessary.
    3. Be creative! Make your page look great, and don’t just settle for checking off the items above. Have a look at CSS Zen Garden for inspiration (use your browser’s developer tools to see how those pages’ styles are built).

Notes

  1. In order to see any visible change, make sure to link the stylesheet to your main document.
  2. Feel free to check out our styled example to see how we did things. Right click in your browser window and select “View Page Source” to see the HTML source code.
  3. Another thing you might find useful is your browser’s developer tools by selecting “Inspect”. This allows you to inspect the HTML and CSS of different elements.
  4. And be sure to use the Resources section below as you go.

Resources

CSS Normalization or CSS Reset (Optional):

  1. If you want a CSS challenge, add a normalization or reset stylesheet. Normalization and Reset CSS are two different approaches to dealing with built-in browser settings which can skew your CSS in a browser window. CSS Reset vs Normalization is a great article that addresses these two approaches and the rationale behind each.
  2. If you choose to add normalization or reset, you can either put the rules at the top of your styles.css, or you can add another file in the same directory and link to it in your HTML doc.
  3. If you want to try Reset CSS, check out Eric Meyer’s CSS Tools: Reset CSS
  4. If you want to try Normalization CSS, check out Nicholas Gallagher’s About normalize.css
  5. Reminder, this is completely optional.

Add and Commit Your Changes on Git

When you finish making your page look spiffy, take a moment to commit your changes on Git:

$ git add styles.css
$ git commit -m "Added some killer CSS styling"

If you also made tweaks to your index.html file, then you need to commit those changes as well (along with a descriptive commit message):

$ git add index.html
$ git commit -m "Changed title from 'My Favorite Puppies' to 'The Objectively Best Puppies'"

Incidentally, this is a good opportunity to address the question: Why does Git have two separate commands for ``add`` and ``commit`` if I always do them together anyway?

The answer comes back to the notion of collecting your changes in a “coherent chunk of work” for each commit. The add command gives you the opportunity to specify exactly which file(s) should be included in the upcoming commit. In the example above, this allowed us to perform two separate commits—each with its own message describing its own chunk of work.

Note that you certainly can add multiple files to the same commit. For example, suppose you made changes to both index.html and styles.css, but those changes are all part of the same unit of work. In that case you would add them both before committing:

$ git add index.html
$ git add styles.css
$ git commit -m "Added puppy image with thick yellow border"

There is a convenient shortcut, git add ., for those (frequent) occasions when you want to include every changed file without having to type each one individually. The following example is equivalent to the previous one (assuming you only changed index.html and styles.css):

$ git add .
$ git commit -m "Added puppy image with thick yellow border"

It is usually a good idea to check first (using git status) before running git add ., so that you don’t mistakenly include unwanted changes.

Done!

You are ready to submit! Go back to the Assignment Page and follow the submission instructions there.