This is a scripting language which is mainly used for presentation of a webpages because it serves as the tools used for webpage beautification. Without it every webpage created with an HTML tags will appear very basic.
Cascading style sheet have three different method in which it can be used inside our webpages;
1. INLINE CASCADING STYLE SHEET
This is when we write the css code directly inside our html document with the Html tags of elements i.e both the Html and Css is in one document together such as this:
2. INTERNAL CASCADING STYLE SHEET
This is the style of Css coding whereby, the Css code is been written within the Html document as well but not inline with the Html tags elements. Internal Css code is written inside the header tags of an html whereby we open style tags and close it as well. i.e <style> … </style>
3. EXTERNAL CASCADING STYLE SHEET
This is the best form of written css coding in which the entire Css code is been written outside the Html document itself, we then reference it with link rel tag and inside the link rel again reference it the folder where you have save the CSS code to such like this ;
<link rel =”stylesheet” tyepe=”text/css” href=”css/basic.css”>.
The advantage of using external css code in our Html documents is that let say, I want to change the background of my webpage and am using external css, what I will just do is to change the background directly from the external file and all my pages will be affected and am done with that, ok we say am using internal or inline css, it will give me a lot of problem of going through all the pages which I have already created and also take a lot of time to do that.
This is the Html page :
This is the Css code for the above html document :
Cascading Style Sheet also have it own tags just like html tags and also use make of curly bracket {}, full colon : , semicolon ; and separate comma ,
Cascading Style Sheet make use of Id and Class selectors and both have their own way of using them;
ID selector: It use # sign to indicate that the attribute of the Id selector not a Class selector and the function of Id selector is that a particular attribute is for meant for the indicated id name in the div tags of an Html document ;
#sidebar{
Background-color: green;
Color : red;
Font-size: 16px;
Font-Family:sans-serif;
}
Class selector: It use (.) sign to indicate that the attribute class selector not an Id selector and the function of Class selector is that the attribute is for meant for all indicated class name in the div tags of an Html document that bear the Class Name and often use where you want the same look for them all ;
.sidebar{
Background-color: green;
Color : red;
Font-size: 16px;
Font-Family:sans-serif;
}
