{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>