CSS can be added to HTML documents in 3 ways:
- Inline – by using the style attribute inside HTML elements
- Internal – by placing a block of styles in the
headsection of the document - External – by linking to an external CSS file where all the styles are kept
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>
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>
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>
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>
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.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
