oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
There are three ways that CSS can be inserted into a HTML document:
style element;Each of these methods of using CSS has its upsides and drawbacks.
External CSS completely separates HTML from CSS. In the head of a HTML file, one or more stylesheets is called upon via a link element, which is downloaded and interpreted by the browser.
This is the most commonly used method of including styling in a HTML page. Many Web pages can rely on only one stylesheet, removing the need to rewrite or copy code, and the appearance of all of these pages can be changed at the same time.
One Web page can also use multiple stylesheets. In the case that both stylesheets have a rule for a particular thing, the one linked last takes precedence.
<link rel="stylesheet" src="/css/main.css">
<link rel="stylesheet" src="/css/extra.css">
Some Web pages are entirely unique and look nothing like other pages on the website. In cases like this, including the CSS in a separate file only creates two files for a single page. This is the ideal scenario for inline CSS, where we use the style HTML element. CSS rules can be written inside this element, which goes inside of the head.
<style>
body {
color: green;
background-color: beige;
}
a {
color: darkred;
}
</style>
In very rare cases, one might want to give some visual difference to one specific part of the document that is otherwise regular. This styling doesn't apply to anything else on the website. In such a scenario, inline CSS becomes useful... in moderation, of course.
Maybe one paragraph in your entire website must be written in red:
<p style="color: red;">This is the one red paragraph on my whole website. Gaze upon its glory.</p>
Maybe you even want a single red word, which can be achieved via the meaningless span element (like div, but for strings of text):
<p>There are only <span style="color: red;">three red words<span> on this entire Web page!</p>
This being said, if you find yourself using red text often, it is best to both think about why you are using red text—is it all for emphasis? Why not style the em element accordingly?—and, if it is purely for stylistic purposes, consider using a class to cover all cosmetic red text.