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.
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.
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:
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 :
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!
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.
- From Sublime Text, click File and then click New File. A new 'untitled' file shall open up.
- Click File again and this time select Save As.
- In the window that pops up, make sure you are saving this file in the same location as my_site.html.
- Under File name: type my_site.css .
- Make sure Save As type is set to All Files ( OR CSS ). If not, click the dropdown button and select All Files ( OR CSS) .
- Click save.
- 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>). <link rel="stylesheet" type="text/css" href="my_site.css">
- Save this file.
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.
- 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.
- type , which specifies that the linked document contains (shall contain) text and is of type css.
- 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 .
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:
- Open up my_site.css in Sublime text.
- 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 :
- 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' .
- 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!
Comments
Post a Comment