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.
Labels:

Comments

Post a Comment

Popular posts from this blog

HTML BASICS : CLASS 103

Hello and welcome to the third in a series of beginner level classes for web developers. In the previous lesson (see here ), we learned about the paragraph and list tags. At this point the code in your my_site.html file should look like this: <!DOCTYPE html> <html> <head>     <title></title> </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...
Post a Comment
Read more

CSS BASICS : CLASS 107

Hello and welcome back to this series of tutorials for beginners in web development. So far we have a simple html page and a css file linked to it. We begin this tutorial by creating new html and css files, in the same folder as where my_site.html is located. We shall call them index.html and index.css respectively. Done? Great! Link the two files together , by opening up index.html in your text editor (e.g. Sublime Text) and typing the following code below the closing title tag  </title>  and before the closing head tag </head> :               <link rel="stylesheet" type="text/css" href="index.css"> Inside the body of your html (i.e after <body> and before </body>),  type the following html code :              <p> This is a paragraph </p>          ...
Post a Comment
Read more

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border...
Post a Comment
Read more