Today we will show you how to apply CSS in html. There are three ways to apply CSS to HTML. We will study these ways thoroughly and hopefully these would be help full for those who are beginner in this field. Must give your precious comments on this article.
Don’t forget to 
subscribe to our RSS-feed, 
follow us on Twitter and like our 
facebook Fan page for recent updates.
CSS with 3 Different Methods
In-line
In-line styles are plonked straight into the HTML tags using the style attribute.
They look something like this:
red">text
This will make that specific paragraph red.
But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.
Internal
Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.
This would look something like this:
CSS Example <style type="text/css"> p { color: red; } a { color: blue; } </style> ...
This will make all of the paragraphs in the page red and all of the links blue.
Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour…
[ad name=”bnr-middle-post”]External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:
p {
color: red;
}
a {
color: blue;
}
If this file is saved as “web.css” then it can be linked to in the HTML like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" /> ...
To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “web.css” in the same
directory as your HTML file.
Now change your HTML file so that it starts something like this:
My first web page <link rel="stylesheet" type="text/css" href="web.css" /> </head> ...
Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.
Don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.
useful info for beginners.