How to use CSS
Till now, we have learnt what is CSS and how it is used. Placing a CSS in a document is equally important. A CSS has to be placed according to it's use. There are three ways of inserting a style sheet. They are as follows:- Inline Styles
- Internal Style Sheets
- External Style Sheets
Inline Styles
This is the most basic way of inserting a style sheet. It is used when the style is to be applied to only one occurrence of the HTML element. Let's see this with the help of an example.The output of the above code is given below:<HTML> <HEAD> </HEAD> <BODY> <b style="font-family:arial; color:blue">This is a bold text with arial font and blue color</b> <p style="font-family:arial; color:blue">This is a paragraph with arial font and blue color</p> </BODY> </HTML>
This is a bold text with arial font and blue colorThe inline styles loses most of its advantages of style sheets because it requires styles to be defined for each HTML element every time it is used. If you need to make a change in a certain style, it would require making changes to each and every occurrence of the HTML element. Inline style should be used only when the specific style is to be used only once in the entire document.This is a paragraph with arial font and blue color
Internal Style Sheets
Internal style sheets are used to define a style for an HTML element for a single document. This style can be used anywhere in the entire document. The internal styles are defined in the head section by using the <style> tag. Look at the example given below:The output of the above code will be:<HTML> <HEAD> <style type="text/css"> B {font-family:arial; color:blue} </style> </HEAD> <BODY> <b>This is a bold text with arial font and blue color</b> </BODY> </HTML>
This is a bold text with arial font and blue colorIf you want to change the style so that the text is underlined as well, you only need to edit the style at one place in the document. The changes in the entire document will show automatically.
If you are using an old browser that does not support CSS, the <style> tag will be ignored but the content of the <style> tag will be displayed on the page. To prevent this, it's better to place the style content within HTML comments as follows:
<HTML> <HEAD> <style type="text/css"> <!-- B {font-family:arial; color:blue} --> </style> </HEAD> <BODY> <b>This is a bold text with arial font and blue color</b> </BODY> </HTML>
External Style Sheets
Suppose you need to define a style that is to be used in your entire site, external style sheet is the solution. Following are the steps for using external style sheets.- Create a CSS file that has extention .css.
- This file contains the style definition and each document will be linked to this style sheet by using the tag.
- The CSS file contains only the style definition and no other tags.
- The tag has to be mentioned in the head section.
body {font-size: 36pt}
b.blue {color: blue}
Now, we will use example.css in an HTML document.
The output of the above code will be:<html> <head> <link rel="stylesheet" type="text/css" href="example.css"/> </head> <body> <b class="blue">This text is bold, blue colored & 36pt</b> </body> </html>
This text is bold, blue colored & 36ptHere, we have referenced the CSS file, example.css. The entire text in the document will have the attributes defined for the tag apart from the other attributes specified for individual elements.