Assignment: Style Adjustment

Estimated Time: 0.5 - 1 hour
Objectives:
  • To start using the newly learned CSS styles to internalize what they do

Let's have you create a html file with the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>My First Website with CSS</title>
</head>
<body>
    <h1>My First Website with CSS!  See if you can make this red!</h1>
    <p>See if you can make the font size in all the paragraphs to 18px!</p>
    <h2>My Hobbies!  See if you can make me and all other h2 tags orange and have them show up in italic and underlined.</h2>
    <p>My favorite hobbies are: </p>
    <ul>
        <li>Playing Soccer</li>
        <li>Watching Anime</li>
        <li>Eating Strawberries</li>
   </ul>
   <p>For all three lists above, make them have background colore of 'grey' and put a big padding of 10px on the top/bottom and 30px of padding on the left/right.  Have each list item be at least 10 pixels away from each other.</p>
   <p>Also, remove the bullets in the unordered list.</p>

   <h2 class='special'>Special Thanks (please put a 2px solid orange border around just this h2 tag, put some nice paddings and make the background color black)</h2>
   <p>Thank you <a href="http://www.hackerhero.com">Hacker Hero</a>!  Please make the link green and also don't have it be underlined but instead just bold.  In addition, make this link look like a button!  More specifically, have it look like a button with padding of 5px on the top/bottom and 25px on the left/right.  Put a 1px solid border grey around the button, make the background color pink, and make the border's radius be around 15px.  Do other things to make it look cool!</p>
</body>
</html>

Without changing anything in the HTML, only use CSS to accomplish the tasks outlined within the HTML. Again, don't add anything to the HTML code. Just by adding/updating CSS, make it look like below: Site Layout

Once done, upload your work below and add a comment about how many hours (roughly) this assignment took you.

Please submit your assignment before moving to the next lesson. chevron_left Prev Nextchevron_right