Do you know how many ways can you include a CSS in a HTML Web Page?
You may think why do i have to know many ways to include CSS styles, anyhow they are going to do the same kinda job!
Yes, Of course if you know one way of including CSS file that’s enough to play around with it. But, sometime these kind of question will be asked in the Interviews!.
Sometimes you may need to include one more CSS file in all of your HTML Page, just imagine if you have 100 HTML Pages, Can you add the new CSS file to all of your Pages?.
So, it is always better to know this!
1. First Way is <style> Tag (Embedding Styles):
I won’t recomment writing Styles inside a HTML Page. Anyway this is just a tutorial to how to do this. This may be useful if you have only one HTML Page and you don’t want to create a separate Stylesheet .
[code]
<html>
<head>
<style>
p{
color: green;
font-style: italic;
}
</style>
</head>
<body>
<p>This is just an Example</p>
</body>
</html>
2. Second way is <link> Tag (Linking an External CSS File):
This is the most common way of including an External Stylesheet. In this method you can keep all of your CSS rules in a single file saved with an Extension .css . This will be useful if you have number of HTML Pages. If you need to alter a style across all of your web pages you just have to edit only this CSS file, this will affect the pages wherever you included the CSS file with the tag below.
[code]
<link href=”style.css” rel=”stylesheet” type=”text/css” />
Make sure you have given the correct path of the CSS file. If you kept your CSS file inside a folder (css) then you have to give the folder name also (eg. href=”css/style.css”)
3. Third Way (Inline CSS):
Wrinting Inline CSS style is not recommended. But if you want to test quickly some styles in your webpage you can do this.
Just include a parameter “style” in any HTML Tag.
[code]
<p style=”font-size: 12px; font-weight: bold”>This is inline style example</p>
4. Fourth Way (importing CSS inside a CSS file):
Sometimes you may need to include one more External CSS file in all of your Web Pages. This will be difficult if you have 50 or 100 HTML Pages.
But you can do this easily by attaching within the present CSS file using the import rule.
[code]
@import “second.css”;
So the above @import will import all css rules into the present CSS file.
Give me comments and improvements!
Wow! This is clear and understandable. Keep up!!!