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>
<p> This is a second paragraph </p>
<p> This is a third paragraph </p>
Save your index.html file. Then open the index.css file and type in the following css code :
p{
color : red ;
}
Save the index.css file and open up the index.html in your browser.
Notice how all three paragraphs appear red in color (as specified in your css).
Great!
Now what if you needed to make ONLY ONE paragraph red.
To do this, you will have to ID (identify) the specific paragraph you want.
An ID works the same way real world IDs work. If you are a student in school for example. the school probably gives you a student card with your id on it. The id is used to identify you and no one else has that same id.
Let's make only the second paragraph red.
Open up your index.html file in Sublime Text (or whatever text editor you prefer).
Change the second paragraph from :
<p> This is a second paragraph </p>
to,
<p id = "secondP">This is a second paragraph </p>
Save your index.html file. Now open up the index.css file and delete the code in it.
Type the following code instead;
#secondP{
color : red ;
}
Save index.css and then open up index.html in your browser.
Now only the second paragraph is red.
color : red ;
}
we, changed the color of only one paragraph. the paragraph with the id secondP. We do this by writing;
#secondP{
color : red ;
}
the # is a sign that tells css that we are about to write an id and not a tag name like p .
Cool.
Now what if we wanted to style many html elements but not all of them?
What if we wanted the first and third paragraph to be blue, while keeping the second paragraph red?
To do this, we specify a class.
Back to our student with id example. As a student you have your own unique id, but you also belong to a class, with a lot of other students.
Suppose you id is abc1. If a teacher came into your class and asked "abc1" to stand up, only you would (assuming you are a well behaved student and not a total j.s).
But if the teacher wanted all of you in the class to stand up, then he or she would say "class stand up" (or something like that) .
You get the point! An id is unique, a class has many members.
So open up index.html in Sublime text. Change the code inside the body to this :
<p class = "bluePs"> This is a paragraph </p>
<p id="secondP" > This is a second paragraph </p>
<p class - "bluePs"> This is a third paragraph </p>
Save the file and now the first and third paragraphs belong to a class we named 'bluePs' .
Open index.css and change the code to :
#secondP{
color : red ;
}
.bluePs{
color : blue ;
}
Note the dot (.) before class name bluePs.
While # is used to specify an id in css, the dot . is used to specify a class.
Save the index.css file and open up index.html in your browser.
Notice that only the second paragraph is red while the rest are blue.
Awesome.
This all might be a bit tricky to follow, so here is a video that you can use.
If you have any questions, use the comment section below and I will get back to you asap.
Happy coding!
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>
<p> This is a second paragraph </p>
<p> This is a third paragraph </p>
Save your index.html file. Then open the index.css file and type in the following css code :
p{
color : red ;
}
Save the index.css file and open up the index.html in your browser.
Notice how all three paragraphs appear red in color (as specified in your css).
Great!
Now what if you needed to make ONLY ONE paragraph red.
To do this, you will have to ID (identify) the specific paragraph you want.
An ID works the same way real world IDs work. If you are a student in school for example. the school probably gives you a student card with your id on it. The id is used to identify you and no one else has that same id.
Let's make only the second paragraph red.
Open up your index.html file in Sublime Text (or whatever text editor you prefer).
Change the second paragraph from :
<p> This is a second paragraph </p>
to,
<p id = "secondP">This is a second paragraph </p>
Save your index.html file. Now open up the index.css file and delete the code in it.
Type the following code instead;
#secondP{
color : red ;
}
Save index.css and then open up index.html in your browser.
Now only the second paragraph is red.
- We gave the second paragraph an id.
- The id we chose is secondP.
- Note that you can use whichever id you prefer so long as it does not contain space.
- In the css file, instead of changing the color of all paragraphs using this code;
color : red ;
}
we, changed the color of only one paragraph. the paragraph with the id secondP. We do this by writing;
#secondP{
color : red ;
}
the # is a sign that tells css that we are about to write an id and not a tag name like p .
Cool.
Now what if we wanted to style many html elements but not all of them?
What if we wanted the first and third paragraph to be blue, while keeping the second paragraph red?
To do this, we specify a class.
Back to our student with id example. As a student you have your own unique id, but you also belong to a class, with a lot of other students.
Suppose you id is abc1. If a teacher came into your class and asked "abc1" to stand up, only you would (assuming you are a well behaved student and not a total j.s).
But if the teacher wanted all of you in the class to stand up, then he or she would say "class stand up" (or something like that) .
You get the point! An id is unique, a class has many members.
So open up index.html in Sublime text. Change the code inside the body to this :
<p class = "bluePs"> This is a paragraph </p>
<p id="secondP" > This is a second paragraph </p>
<p class - "bluePs"> This is a third paragraph </p>
Save the file and now the first and third paragraphs belong to a class we named 'bluePs' .
Open index.css and change the code to :
#secondP{
color : red ;
}
.bluePs{
color : blue ;
}
Note the dot (.) before class name bluePs.
While # is used to specify an id in css, the dot . is used to specify a class.
Save the index.css file and open up index.html in your browser.
Notice that only the second paragraph is red while the rest are blue.
Awesome.
This all might be a bit tricky to follow, so here is a video that you can use.
If you have any questions, use the comment section below and I will get back to you asap.
Happy coding!
Comments
Post a Comment