HTML Me Something, Part 2: CSS
In Part 2, you'll get comfortable with using CSS selectors and rules to dictate display, while keeping your styles separate from your content.
Create a file named
- (This is optional.) Add a normalization stylesheet (see the Resources section below; either of those will work). You can either put these normalization rules at the top of your
styles.cssor you can add another file in the same directory and link it in to your HTML doc. This will "reset" some of your browser's built-in (and often unsightly) styles so that you are starting with a cleaner slate when you add your own styles.
Getting to Work
Go ahead and start adding styles in your
Here are some specific requirements you should fulfill:
- Use margin and padding to space your elements in a visually pleasing way.
- Use at least one of each of the following types of selectors: element, class, id.
- Don't break these rules:
- At all costs, avoid adding HTML elements in order to achieve a specific visual effect.
- Use document-level and inline styles sparingly, and only when absolutely necessary.
- As before, be creative! Make your page look great, and don't 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).
- In order to see any visible change, make sure to link the stylesheet to your main document.
- Feel free to check out our styled example to see how we did things. Use "View Source" (by right-clicking anywhere on the page and selecting View Source).
- Another thing you might find useful is your browser's developer tools.
- And be sure to use the Resources section below as you go.
- w3schools CSS Reference
- CSS Zen Garden
- (Advanced) Specifics on CSS Specificity
- (Advanced) Specificity (MDN)
Add and Commit Your Changes on Git
When you have finished making your page look spiffy, take a moment once again to commit your changes on Git:
$ git add styles.css $ git commit -m "Added some killer CSS styling"
If, in the course of editing your styles, you also made some tweaks to your
index.html file, then you will 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 a question you may have been wondering: Why does Git have two separate commands for
commit if I always do them together anyway?
The answer comes back to that notion of batching your changes together into 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. This opportunity is what allowed us, in the example above, to perform two separate commits, each with its own message pertaining to its own chunk of work.
Note, however, that you certainly can, and often will,
add multiple files to the same commit. For example, suppose you have made some changes to both files,
styles.css, but those changes can all reasonably be lumped together as part of the same unit of work. In that case you would simply add them both before committing:
$ git add index.html $ git add styles.css $ git commit -m "Added puppy image with thick yellow border"
Finally, there is a convenient command,
git add ., for those (frequent) occasions where you just want to include every changed file without having to type each one out manually. The following example is exactly equivalent to the previous one (assuming you have only changed those two files):
$ 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.
You are ready to submit! Go back to the Assignment page and follow the submission instructions there.