We are done with HTML Tutorial.
Today, we are moving to the next stage of website development.
CSS - Cascading Style Sheet
We use CSS to beautify our HTML. Simple!
We know what HTML is all about. HTML is the core of the website; text, links, images, tables, lists etc. While CSS makes it prettier👩🦰
We have 3 different types of CSS
The inline
The internal
The external
In this tutorial, we are going to use the internal.
To use internal CSS, we need to;
1. Create a CSS link in between the open and close head tags
<head>
CSS link will be here
</head>
Copy the CSS link below and paste it in between the open & close head tag of main.html file.👇
<style type="text/css">
</style>
NOTE: If you have not done the assignment, use your index.html but it's advisable to use main.html
In CSS, we have 3 things involved;
1. The selector: you need to specify/select the HTML tag you wanna beautify. We have p tag, h1 to h6 tag, img tag, li tag, ul & ol tags, tr, td, th tags, anchor or link tag etc. If you want to design any of these tags, you need to select it and type it within the CSS link
<style>
Selector will be here & must come first
</style>
2. The Property: this the style you want to give your text, is it color or something else, we have so many properties but we going to discuss the major ones.
And the property will be shield with a curly bracelets and must be in front of the selected tag
<style>
Selector {the property must be here}
</style>
3. The value: this is the value of your property, which simply means if you have color as the property, you need add the type of color you want your text to transform into, is it red, blue white etc.
And it comes after the property with a column separating them and a semi colon at the end.
NOTE: The semi colon is very important coz if you don't add it, your next selector will not work and always shift your last curly bracelet } to the next line in other to add new selectors
<style>
Selector {property: value must be here;
}
</style>
See this example before you start saying you don't understand coz I know Nigerians don't understand until they see e.g, take it 👇
Let's design <p> paragraph tag
<style type="text/css">
p {color: red;}
</style>
With the above explanation, change your paragraph text to *RED*
Like this👇
You must post the CSS style below or above the title tags, just make sure you paste it in between the open & close tags
All our paragraph tags changed to red, right?
You can change it to any color but not white coz we have white background.
Use the same logic to change header h1 to blue
Like this 👇
Preview
That's the basic of CSS.
Try to practice more often, play around your website by styling your HTML tags with CSS
If you're still looking for curly bracelet {} or colon : or semi colon ; comment below and I will show you
