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¶
Open a file named
styles.css
in yourhtml-me-something/
directory.
Getting to Work¶
Go ahead and start adding styles in your styles.css
file!
Requirements¶
Your CSS must:
Use margin and padding to space your elements in a visually pleasing manner.
Use at least one of each of the following types of selectors:
Follow these rules:
Use the element selector to give the
<body>
element a margin value of 8px and a display type of block.Give a heading on your page the id of
mainHeading
and use the id selector instyles.css
to give it a color value of red.Give a paragraph on your page the id of
testP
and a class name offunParagraph
. Use the class selector instyles.css
to give it a color value of green.
Notes¶
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.
Resources¶
General CSS Examples and References:¶
w3schools CSS Reference Great site for syntax examples
CSS Zen Garden This site provides multiple examples of what you can do with CSS in a browser.
(Advanced) Specifics on CSS Specificity
(Advanced) Specificity (MDN)
(Advanced) CSS Design Awards Showcase for CSS designers to share their work.
CSS Normalization:¶
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.
Go ahead and push your work to your remote repository using git push
and head over to Github to see how you did.
Done!¶
If you have a green check mark, you are ready to submit! Go back to the Assignment Page and follow the submission instructions there.