Task 2: Styling

For Task 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 the file named styles.css in your html-me-something/ directory.

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 manner.

  2. Use at least one of each of the following types of selectors:

    1. element
    2. class
    3. id

  3. Follow these rules:

    1. Use the element selector to give the <body> element a margin value of 8px and a display type of block.
    2. Give a heading on your page the id of mainHeading and use the id selector in styles.css to make the color red and apply any additional styling of your choosing.
    3. Give a paragraph on your page the id of testP and a class name of funParagraph. Use the class selector in styles.css and make the color green and give it any additional styling of your choosing.

    We ask that you implement the styling as requested. You will be asked to explain and point out your additional styling choices to your TA during your code review. Have fun with creating your assignment. If any of the styling requirements do not suit your personal tastes and you want to share your work on this assignment as part of a portfolio, you can change it after the end of the unit.

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. Use “View Source” (by right-clicking anywhere on the page and selecting View Source).

  3. Another thing you might find useful is your browser’s developer tools .

  4. And be sure to use the Resources section below as you go.

Resources

General CSS Examples and References:¶

  1. w3schools CSS Reference : Great site for syntax examples
  2. CSS Zen Garden : This site provides multiple examples of what you can do with CSS in a browser.
  3. (Advanced) Specifics on CSS Specificity
  4. (Advanced) Specificity (MDN)
  5. (Advanced) CSS Design Awards : Showcase for CSS designers to share their work.
Tip

Once you finish your adding your stylings, be sure to stage and commit your changes.

Now that you have applied your stylings, you are ready to test your work and submit your final project. Move on over to Task 3 to work on these final steps.