{tab CSS comments}
{tab Linking CSS to HTML}
{tab CSS Selectors Notes}
{tab Margin Notes}
{tab Borders}
{tab Padding}
{/tabs}
Linking CSS to HTML - The complete CSS3 tutorial
Inline CSS through the Style attribute:
CSS code applied with this technique only applies to a single element and can't be re-used for other elements.
It is however a great way to test things out, or to specify rules which you do not expect ever to re-use. Here's how it may be used:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!
</span>
Document wide CSS through style blocks:
The second easiest way to apply CSS to elements in your document is through the use of a style block. HTML includes a tag called style, which can contain CSS code. Here, you can define rules which can then be used all across your document.
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.
</body>
</html>
Global CSS through external CSS documents
A CSS file is simply a plain text file saved with a .css extension and then referenced in the file(s) where you want to
apply the rules.
If we re-use the example from the style block part, we can then move the "highlight" rule to a new file (without the HTML part) and
save it under an appropriate name, e.g. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}
Then reference it in our HTML document, using the link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>