In the Previous lessons we used only inline css method for the styling of html elements. This lesson of the html lessons series will explore all the 3 css methods i.e
(Inline, Internal and External) in detail.
Inline Css Method
The inline css method is what we have been using so far for styling the html elements. In this method the css of an html element is defined inside the element itself using the style attribute. The example of inline style applied to a div element is shown below.
<div style="background:red;border:1px solid black;width:400px;height:200px;">Inline Css Example</div>
Internal Css Method
In internal css method the css of all the html elements is defined in the head section of the web page inside the style tags. Let us say for example we have a div element inside the body of the html and we want to apply the internal css to it i.e
<head>
<style>
div{ background:red; border:1px solid black; width:400px; height:200px; }
</style>
</head>
<body>
<div>Internal Css Example</div>
</body>
The above code will apply internal css to a div element in the webpage.
In fact if we create another div inside the html body, the same css will be applied to the newly created div as well. Because the css we defined inside the style tags is for div element as a whole and will get applied to all the div elements in a web page. Let us create another div element and see what happens.
<head>
<style>
div{ background:red; border:1px solid black; width:400px; height:200px; }
</style>
</head>
<body>
<div>Internal Css Example</div>
<div>Internal Css Example</div>
</body>
You can see that the same css is applied to both divs, similarly if we create a third div the same css will be applied to that as well. Off course that is not what we need, we would not want all our divs to have the same css if we are making a web page. So we need some kind of identification for all our divs. We want to be able to access all our divs separately and apply a different css to each, that is where classes and ids comes into play. We will need to assign a class or an id to a div to identify it from others i.e
<div class="one"></div>
<div class="two"></div>
Similarly if you want to assign an id to a div element, do it like this:
<div id="one"></div>
<div id="two"></div>
Now the question is how can we access each div separately? And the answer to the question is by accessing the div by it's class or id. Here is how we can access a div by it's class:
<style>
.one{ background:red; border:1px solid black; width:400px; height:200px; }
.two{ background:green; border:1px solid red; width:400px; height:200px; }
</style>
We put a dot (.) before the class name to access an element by it's class name. Similarly, to access an html element by it's id we have to put a hash (#) before the id i.e
<style>
#one{ background:red; border:1px solid black; width:400px; height:200px; }
#two{ background:green; border:1px solid red; width:400px; height:200px; }
</style>
This way we can apply different css to the html elements in a web page using the internal css method i.e
<head>
<style>
.one{ background:red; border:1px solid black; width:400px; height:200px; }
.two{ background:green; border:1px solid red; width:400px; height:200px; }
</style>
</head>
<body>
<div class="one">Internal Css Example</div>
<div class="two">Internal Css Example</div>
</body>
External Css Method
In the external css method the complete css of a webpage is kept in a separate css file with a .css extension. The css inside the file is just like the css in internal type but without the style tags. So if we want to convert internal css to external, all we have to do is to make a seperate css file with .css extension and copy all the css inside our style tags and paste it in our seperate css file. Now get rid of the style tags and the last step is to link our html file to the newly created css file. There is a link tag in html which is used to link an html file to the css file. This is how to link to the css file using link tag:
<link rel="stylesheet" type="text/css" href="File Path">
Include this link tag in the head portion of the web page and replace the File Path with the real path of the css file. If the name of my css file is style.css and it is in the same directory as my html file, then my code will look some thing like this:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="one">External Css Example</div>
<div class="two">External Css Example</div>
</body>
Related Posts
Inline Css Method
The inline css method is what we have been using so far for styling the html elements. In this method the css of an html element is defined inside the element itself using the style attribute. The example of inline style applied to a div element is shown below.
<div style="background:red;border:1px solid black;width:400px;height:200px;">Inline Css Example</div>
Internal Css Method
In internal css method the css of all the html elements is defined in the head section of the web page inside the style tags. Let us say for example we have a div element inside the body of the html and we want to apply the internal css to it i.e
<head>
<style>
div{ background:red; border:1px solid black; width:400px; height:200px; }
</style>
</head>
<body>
<div>Internal Css Example</div>
</body>
The above code will apply internal css to a div element in the webpage.
In fact if we create another div inside the html body, the same css will be applied to the newly created div as well. Because the css we defined inside the style tags is for div element as a whole and will get applied to all the div elements in a web page. Let us create another div element and see what happens.
<head>
<style>
div{ background:red; border:1px solid black; width:400px; height:200px; }
</style>
</head>
<body>
<div>Internal Css Example</div>
<div>Internal Css Example</div>
</body>
You can see that the same css is applied to both divs, similarly if we create a third div the same css will be applied to that as well. Off course that is not what we need, we would not want all our divs to have the same css if we are making a web page. So we need some kind of identification for all our divs. We want to be able to access all our divs separately and apply a different css to each, that is where classes and ids comes into play. We will need to assign a class or an id to a div to identify it from others i.e
<div class="one"></div>
<div class="two"></div>
Similarly if you want to assign an id to a div element, do it like this:
<div id="one"></div>
<div id="two"></div>
Now the question is how can we access each div separately? And the answer to the question is by accessing the div by it's class or id. Here is how we can access a div by it's class:
<style>
.one{ background:red; border:1px solid black; width:400px; height:200px; }
.two{ background:green; border:1px solid red; width:400px; height:200px; }
</style>
We put a dot (.) before the class name to access an element by it's class name. Similarly, to access an html element by it's id we have to put a hash (#) before the id i.e
<style>
#one{ background:red; border:1px solid black; width:400px; height:200px; }
#two{ background:green; border:1px solid red; width:400px; height:200px; }
</style>
This way we can apply different css to the html elements in a web page using the internal css method i.e
<head>
<style>
.one{ background:red; border:1px solid black; width:400px; height:200px; }
.two{ background:green; border:1px solid red; width:400px; height:200px; }
</style>
</head>
<body>
<div class="one">Internal Css Example</div>
<div class="two">Internal Css Example</div>
</body>
External Css Method
In the external css method the complete css of a webpage is kept in a separate css file with a .css extension. The css inside the file is just like the css in internal type but without the style tags. So if we want to convert internal css to external, all we have to do is to make a seperate css file with .css extension and copy all the css inside our style tags and paste it in our seperate css file. Now get rid of the style tags and the last step is to link our html file to the newly created css file. There is a link tag in html which is used to link an html file to the css file. This is how to link to the css file using link tag:
<link rel="stylesheet" type="text/css" href="File Path">
Include this link tag in the head portion of the web page and replace the File Path with the real path of the css file. If the name of my css file is style.css and it is in the same directory as my html file, then my code will look some thing like this:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="one">External Css Example</div>
<div class="two">External Css Example</div>
</body>
Important Css Properties
Css Float Property
Css Margin and Padding Properties
Making Navigation menus using unordered lists
No comments:
Post a Comment