CSS Tutorials
Tags:
Categories: ,

Overview

CSS can be added to HTML documents in 3 ways:

Inline CSS

This is the least desirable way to include CSS styling in your document. There can be many pages to a site and hundreds, if not thousands of HTML elements. Finding and updating the inline styles can be a difficult.

<p style="color: red;">A paragraph with red text.</p>

Multiple style rules can be included in on element as long as each rule is ended with a semi-colon.

<p style="color: red; font-size: 16px;">A paragraph with red text.</p>

Note

This issue with inline styles is that they are the last style a browser sees and will therefore overcome any styles set before it, like those in the <head> of the document and those linked to in the <head> of the document. Basically, if the specificity of the rule is the same, the last rule wins.

So in the following sets of rules, each one will overcome the prior because of the cascading of the styles. Again, last one wins.

/* style set in an externally linked style sheet */
p {
    color: black;
}
/* style set in the head of the document */
p {
    color: green;
}
<!-- style set inline -->
<p style="color: red;">A paragraph with red text.</p>

Note

To further confuse things, there is something called specificity. Basically, the styles set for an element’s tag (for instance, <p> tag), will be overruled by one set for the .class of the element, which will be overruled by one set for the #id of the element, which will finally be overruled by one set inline in the element itself.

In the following list of styles, each will be overcome by the following rule because it’s considered more specific.

p {
    color: black;
}
.my_paragraph {
    color: green;
}
#my_paragraph {
    color: blue;
}
<!-- style set inline -->
<p style="color: red;">A paragraph with red text.</p>

Note

Tags, classes, and #ids can be combined to achieve even more specificity. And specificity can overcome things that come afterward for the same element but with less specificity.

The first rule below will take affect over the second rule even though the second rule is the last thing the browser sees. This is due to the first rule being more specific.

#section p.my_paragraph {
    color: blue;
}
p.my_paragraph {
    color: green;
}

Placing Styles in the Head of the Document

While more desirable than placing styles inline, this is still not the best way to style a page. A typical site may have hundreds of pages and going through each to update an element’s style will prove tedious at best.

<head>

<title>HTML Template</title>


<!-- styles -->
<style>
    #primary {
        color: red;
        font-size: 18px;
    }
    #secondary {
        margin-top: 35px;
    }
</style>

</head>

Linking to External Style Sheets

This is the much preferred method for stying the elements on the page, and the site as a whole, as all the rules can be found in only a few locations and will therefore be easier to update.

<head>

<meta charset="UTF-8">
<meta name="description" content="Free Web Tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, SQL">
<meta name="author" content="1SMARTchicken">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>HTML Template</title>


<!-- styles -->
<link rel="stylesheet" type="text/css" href="/docs/style.css">
<link rel="stylesheet" type="text/css" href="/docs/sidebar-styles.css">

</head>

Note

In the above, there are two style sheets being linked to. If the second style sheet has any rules for an element that are of the same specificity and conflict with those in the first linked style sheet, the second one wins because it comes later in the cascade.

Note

And finally, to further confuse things, there is a CSS pseudo property called the !important Rule that can be used to force the use of a style that conflicts with another. However, it can do more harm than good if, at some point, you need to overcome the same rule down the line.

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.