There are three main methods to add a Cascading Style Sheet (CSS) to your HTML document.Here i will explain these three methods.
1. Linking to a separate CSS file in our html document.
2. We Insert CSS inside the HEAD section of our HTML document.
3. We can add Inline CSS to HTML tags.
There are more than three ways to apply CSS with tools like jQuery and old-fashioned JavaScript.This article is about the 3 basic ways which are common. Now i am going to explain these three methods with examples.
1. Linking to a separate CSS file in our html document.
Use to a separate CSS file is the most common method.This separate CSS file name is like” style.css” and then link to that CSS in your HTML file.If you need to change the style your whole website then you will change once in your single CSS file.You will save your file on your server and link this file directly from your each HTML page. The link is a simple line of HTML and you will apply it in the <head> section of your HTML document.
Example:
[code]<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />[/code]
2. We Insert CSS inside the HEAD section of our HTML document.
In this method you can also embed CSS rules directly into any HTML page. We can say this method internal.with this method we will make our CSS rules in the <head> section of the HTML page. If CSS is part of the HTML document, the whole page exists as just one file. This can be useful for you if you are sending the page to anyone via email or if it will be used as a template such as a blogger template.For this method you need to add the following code to the <head> of your HTML document.
Example:
[code]<html>
<head>
<title>
Basic styling!
</title>
<style media="screen" type="text/css">
p { color:#009900;
font-family:"comic sans ms",sans-serif; }
h1 { color:#660000; font-size:12pt; }
</style>
</head>
<body>
<h1> Hello World!</h1>
<p>I am a very basic page.</p>
Use your back button to
get out of here.
</body>
</html>[/code]
3. We can add Inline CSS to HTML tags.
This method is usually a simple way to use CSS.This method is easiy and useful for styling.For inline styling add a style parameter to the HTML element and enter your style rules as the value. But this is not a good method to use because it will bloat your HTML and make website maintenance a real headache. However we can say that it can be useful in some situations, for example, if you are using a system where you don’t have access to the CSS file – simply add your inline style rules directly to the HTML elements .
Example:
[code]<p style="width:100%; color:#660099; text-align:right; background-color:#ffcc00;" >[/code]
is the style for this example.