Skip to main content

CSS BASICS : CLASS 108

Hello and welcome.
In the previous post, we did a simple test.
The correct HTML code for that is shown below;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="my_site.css">   
</head>
<body>
    <h2 class="reds">NASA | JPL</h2>
    <h1 class="blues">ON A MISSION</h1>
    <h4 class="reds">PODCAST</h4>

    <p id="underlined">A new podcast from NASA</p>

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

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

    <table >
    <tr>    <th class="blueBordered">Name</th>          <th class="blueBordered">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" class="blueBordered">


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

</body>
</html>

Be sure to compare your code with the one above and make any necessary corrections to your answer.

Let's move on to today's subject:  imaginary boxes, borders, margins and padding.

Consider the following two boxes:

The left box has a blue border while that on the right has a green border.
The space outside the border is called the margin.
The top, right, bottom and left margins of the blue box are indicated by the red lines.
Similarly, the margins (top, right, bottom and left) of the green box are indicated by the yellow lines.
Each box has some text inside it (content).
The space from the border of a box to the text content is called the padding of the box.
The top, right, bottom and left padding of each box are indicated by the black lines.

Understanding the above, is important when arranging elements in html.
Each element can be thought of as a box, with a border (invisible by default), margins and padding.
To understand this, let's practice:
  1. Open Sublime Text and create a new file and name it 'arrangements.html' . Save the file.
  2. Create another file and name it 'arrangements.css'. Save this in the same location as the arrangements.html file.
  3. Open your html file and type in the following code inside the body tag:                                     <p id="p1">Paragraph 1</p>
     <p id="p2">Paragraph 2</p> 
  4. Link this html to the css file and save it.
  5. Open up the css file (arrangements.css) in Sublime text proceed as follows: 
  • First, type the following code, then save and open arrangements.html in your browser;                #p1{
        border: 1px solid black;
    }

    #p2{
        border: 1px solid blue;
    }
  • Notice that each of the paragraphs now has a border. Now change your css code to;                     
    #p1{
        border: 1px solid black;
        padding-left: 12px;
    }

    #p2{
        border: 1px solid blue;
        padding-left: 12px;
    }
  • Save and open up arrangements.html in your browser. Notice that the text inside each paragraph has been moved to the right a bit (12px). Experiment with the padding-left value by increasing it and decreasing it as you see fit, each time refreshing the site in your browser to see the results.
  • We can move the text within the borders of each paragraph using text-align attribute. In your css, change the code to;                                                                                                                    #p1{
        border: 1px solid black;
        padding-left: 12px;
        text-align: right;
    }

    #p2{
        border: 1px solid blue;
        padding-left: 12px;
        text-align: center;
    } 
  • Save and refresh your site in the browser. Now the text on the first paragraph appears on the right and that of the second paragraph is centered. 
  • We can increase the space between the two paragraphs by changing their margins. First change your css to;                                                                                                                                    #p1{
        border: 1px solid black;
        padding-left: 12px;
        text-align: right;
        margin-bottom: 64px;
    }
  • Save and refresh your site in the browser. Notice that the second paragraph has been moved further down (by 64pixels) from the first paragraph than before. The above code has the same effect as changing the top margin of the second paragraph by 64px as;                                           #p2{
        border: 1px solid black;
        padding-left: 12px;
        text-align: right;
        margin-top: 64px;
    }
  • Experiment with margins by changing the margin-top, margin-left, margin-right and margin-bottom values of each paragraph. Each time, save and refresh your browser and take note of the changes.
  • Now that you have understood what borders, margins and padding are. Let's finish up by changing the border and padding of another html element. the body itself. Change your css code to;                                                                                                                                           body{
        border: 1px solid red;
        padding-top: 48px;
        padding-right: 64px;
        padding-left: 32px;
    }

    #p1{
        border: 1px solid black;
        padding-left: 12px;
        text-align: right;
        margin-bottom: 64px;
    }

    #p2{
        border: 1px solid blue;
        padding-left: 12px;
        text-align: center;
    }
  • Save and refresh the site in your browser. 
Great! I hope you are starting to see how useful the manipulation of margins and padding is when arranging content in your html.
Note that these apply to all html elements (except the <head></head> section and everything that goes inside it) .
As always, here is a video that you can use to follow up on this tutorial.
Till next time, happy coding.

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 & 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

HTML BASICS : CLASS 102

Hello and welcome back. This is the second class in a series of tutorials for beginners in web development. You can access the first one here. By this point you should have a file named my_site.html with the following code in it: <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h4>NASA | JPL</h4>     <h1>ON A MISSION</h1>     <h2>PODCAST</h2> </body> </html> Great! It is a bit weird having a couple of headings with no further details, isn't it? Let us add some more text that explains what this whole 'NASA ON A MISSION PODCAST' stuff is about. For this we will use a different tag, the paragraph tag which opens with ' <p> ' and closes with a ' </p> ' .  After the bottom heading, type the following :  <p>A new podcast from NASA</p> Cli...
Post a Comment
Read more