Skip to main content

CSS BASICS : CLASS 106

Hello and welcome back to this tutorial series for beginners in web development.
This tutorial assumes you grasped all concepts discussed in the previous 5 html classes.
You can test yourself using the exercise given here.

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

Let's get started.

CSS stands for Cascading Style Sheet.
As I'm sure you have noticed, so far our site looks rather plain.
To improve how it looks (add colors, font styles, e.t.c. ) , we use CSS in addition to HTML.
So far we have only been paying attention to the body section  (<body></body>) of our html.
There is this other section called the head section of html, that opens with the <head> tag and closes with </head> that we have been ignoring.
Inside the head there is the opening and closing title section, which we shall continue to ignore for now.
Below the title section, before the closing head tag, is where we shall add our css.
  1. From Sublime Text, click File  and then click New File. A new 'untitled' file shall open up.
  2. Click File again and this time select Save As. 
  3. In the window that pops up, make sure you are saving this file in the same location as my_site.html.
  4. Under File name: type my_site.css . 
  5. Make sure Save As type is set to All Files  ( OR CSS ). If not, click the dropdown button and select All Files ( OR CSS) .  
  6. Click save.
  7. From Sublime Text, open up my_site.html. Add the following code below the closing title tag (</title> ) and before the closing head tag (</head>).
    8.     <link rel="stylesheet" type="text/css" href="my_site.css">
  8. Save this file.

The line of code you just inserted links the CSS file my_site.css to your html file my_site.html.
Let's examine it a bit.
It consists of a single tag, the <link >  tag. It has no closing tag unlike most html tags.
It has three attributes specified.
  1. rel , which stands for relationship, specifies the relationship between the two documents my_site.html and my_site.css . The value of rel here is "stylesheet" . This is because my_site.css shall be used to style my_site.html.
  2. type , which specifies that the linked document contains (shall contain) text and is of type css.
  3. href , which as with the image tag, specifies the location of the css file. In this case, my_file.css is in the same folder as my_site.html .
Let's do some styling.
In order to style an element (tag) of html, you have to specify it in CSS as follows:

tag_name{


}  

e.g. to style the heading h1;

h1{

}

e.g. 2, to style the paragraph p;

p{


}

e.g. 3, to style the image img;

img{


}

Got it? .. Great!
Inside the braces { } is where you specify what attribute (property) of the element (tag) you wish to change.
You can change as many attributes of one element as you wish.
This is done using the following format:

tag_name{
attribute_name : value;
attribute2_name : value;
attribute3_name : value;

}

For example to change the color of the heading h1 to say blue, use;

h1{
color : blue;

}

To change the color and the font-size of the heading h1 to say blue and 48px, use;

h1{
color : blue;
font-size : 48px;

}

Similarly, to change the color of the paragraph p to red and the make it's text italic, use:

p{
color : red;
font-style : italic;

}


Easy enough. Let's practice this:
  1. Open up my_site.css in Sublime text.
  2. Type the following code and save.

h1{

color : blue;

font-size : 28px;


}



p{

color : red;

font-size : 24px;

font-style : italic;


}



table{
border :  1px solid black;
}



Then open my_site.html in your browser and see the changes you have made to h1 heading, the paragraphs and the table.
Cool.

Two things to note :
  1. Each html element has a lot of properties (attributes), such as color, font-size, font-style, border, width, height e.t.c. It would be time wasting (and weird) to try memorize all of them! When you want to make an element appear a certain way, just google the name of the attribute to change it too. For example, google 'css making text italic' and you shall quickly learn of a property called 'font-style' .
  2. To make sites load quickly, browsers do this thing called 'caching'. Unfortunately, it can be super annoying for a web developer during web development. Here is a quick explanation of what caching is (in the context of web development that we are in so far):

Caching explained:

When you first load a site (e.g. open my_site.html) , the browser notices there is a linked CSS file. To speed things up for the next time you load my_site.html ,  the browser may save this CSS file somewhere.
The next time you load the site in your browser, instead of fetching the linked CSS file from the location you saved it in, it fetches the CSS file it saved itself.
This makes the loading faster but if you have made changes to your CSS file, then you will not see those changes in your website. And this is why it's annoying.
I hence recommend disabling cache during web development. Disabling cache depends on the browser you are using.
For Mozilla Firefox users see these instructions.
For Google Chrome users see these instructions.
If you are using another browser like Safari or Edge, google how to disable cache in those browsers.
I recommend having Firefox or Chrome for development purposes and keeping your default browser (Explorer or Edge in Windows , Safari in Mac) for other browsing.


You can use this video to follow up. Leave any questions or comments in the comment section below. Have fun!

Labels:

Comments

Post a Comment

Popular posts from this blog

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

HTML BASICS : CLASS 109 part I

Hello and welcome back to this tutorial series for beginners in web development. This class introduces the html 'div' tag and form elements. Let's begin by learning about the html 'div' tag. " div " stands for division . It allows you to group and separate content into different sections . Consider the image below. The image above shows a common layout (way of arranging elements)  for many web pages. It consists of;  a top area called the header, where most sites place a logo and site name as well as navigation links (links to other parts of the website)  a bottom area called the footer, where most sites place contact information and social media links. a side bar, which can be on the right side or left side. Some sites have two side bars, one on each side. and a main content area, where the main content of the page is displayed. For example. This blog site has a header at the top. It contains the name of the site 'In Relatable Te...
Post a Comment
Read more

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