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

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

HTML BASICS : CLASS 105

Hello and welcome to the 5th lesson in a series of HTML for beginners tutorials. In this tutorial, we shall; modify the size of the image we inserted in the previous lesson learn how to add links in our website. At this point, your my_site.html file should have the following code in it. <!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>    ...
Post a Comment
Read more

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files.  For this work, create a new folder and name it review .  Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...
Post a Comment
Read more