Skip to main content

CSS BASICS : TEST YOURSELF

Hello there. Welcome back to this web development tutorial series.
We have learned a few concepts so far and before we continue, let's review them by doing a quick test.
At this point, you should have a html file, named my_site.html with the following code in it;

<!DOCTYPE html>
<html>
<head>
    <title></title>


    <link rel="stylesheet" type="text/css" href="my_site.css">
   
</head>
<body>
    <h2>NASA | JPL</h2>
    <h1>ON A MISSION</h1>
    <h4>PODCAST</h4>

    <p>A new podcast from NASA</p>

    <ul>
        <li>Arrival</li>
        <li>We Are the World</li>
        <li>Worlds of Wonder</li>
    </ul>

     <ol>
        <li>NASA is cool</li>
        <li>Coding comes second, arguably.</li>
        <li>What is third place?!</li>
    </ol>

    <table>
    <tr>    <th >Name</th>          <th >Title</th>         </tr>
    <tr>    <td >John Doe</td>    <td >Tutor</td>       </tr>
    <tr>    <td >Jane Doe</td>    <td >Student</td>    </tr>
    </table>

     <img src="images/apollo.jpg" width="450px" height="450px" >


     <p>Click <a href="https://relatableterms.blogspot.com/">me</a> to start learning code </p>


   
</body>
</html>


This html file should be linked to a my_site.css file.
Open my_site.css using Sublime Text (or whichever text editor you prefer) and delete any code in it. 
Type (or copy & paste) the following css code instead;

.reds{
    color: red;
}

.blues{
    color: blue;
}

#underlined{
    text-decoration: underline;
}

ul{
    list-style-type: square;
}

#roman{
  list-style-type: upper-roman;
}

td{
    border: 1px solid red;
}

.blueBordered{
    border : 2px solid blue;
}

#greenItalic{
    color: green;
    font-style: italic;
}



Great. Now here is the test / exercise. 
Looking at the css code (above, the one you just copied into your my_site.css file), modify the html code in my_site.html file so that you end up with a website that looks like the image below;



Again, without editing the css code given above, modify your my_site.html code to create a website that looks like the screenshot above.
Great! Have fun!
As always, leave any questions you might have in the comment section below.

Comments