CSS- Introduction to CSS
A CSS (cascading style sheet) file allows you to separate your web sites HTML content from it’s style.
We always use HTML file to arrange the content in a page, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.
We can use the CSS, either internally or externally.
Internal Style sheet
First we will learn the internal method.
In this case you will simply place the CSS code within the <head></head> tags of each HTML file you want to style with the CSS.
For example
<head>
<title><title>
<style type="text/css">
body {
color: #333333;
font-family: arial, verdana;
}
</style>
</head>
<body>
In this case each HTML page of your site will have the styles also written inside that particular page. So if you want to make any changes you have to change in all the pages.
This method is good when you need to style only one page, or if you want different pages to have varying styles.
External Style sheet
Now we will learn the external method. External style sheet can be written using a notepad. CSS files contain no HTML. We save the file using .css extension.
We can link the CSS file to an HTML file using the following format.
<head>
<title><title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Now you can try out with the first example, which I have shown you.
Open a notepad > Paste the following code:
body {
font-family: arial;
}
Save as mystyle.css inside the my_webpage folder
Open the complete.html file from the my_webpage folder > Paste this code below the title tag
<link rel="stylesheet" type="text/css" href="mystyle.css" />
Now you save the complete.html (Ctrl + S) page in a browser all the fonts would have changed arial.
You can link the same style sheet to multiple pages in a website
Note:
In this case the whole website (containing 5, 10, n number of pages) can be controlled using one .css file.
If you need to make a change in the style for the entire site you don’t have to go and change in each pages. You have to change only one .css page
Advantages of External style sheets
Easy to maintain
Reduced file size
Lot of time will be saved
I hope now you would have got the difference between internal and external style sheets
I explained internal and external style sheets, If you get it, then I am doing a good job J
If not don’t worry. You will learn it still a long way to go
Assuming you got it, now you will be asking can I use both (Internal and External). Yes you can. Wait one more method is there. Inline styles
Here you can write your style inside the html tag.
For example:
<p style="color: #ff0000;">Display red text</p>
Display red text
Sometimes we will have to use the inline styles to give a different style for a particular element, which we have already declared in an external style sheet.
Didn’t get it?
OK assume in your external style sheet you have declared red color for <p> tag. And in your page one place you need to give blue color. That time you can use inline style and declare blue color of a particular text.
So now a question would have raised in your mind. Out of the 3 methods which one is better.
It depends, on what you want to do. If you have only one html file to style then use internal style sheet. If you have multiple files then external style sheet will be better
