How To Use To Add CSS Style Rules To HTML Documents
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
- Element of
- Intimidated By CSS? The Definitive Guide To Make Your Fear Disappear
- What does
How To Use To Add CSS Style Rules To HTML Documentsdo? - The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
- Display
- inline
- Usage
- textual
Code Example
<style>
#roman {
list-style-type: upper-roman;
padding-left: 50px;
color: #000080;
}
#roman li:before {
content: "...";
color: #000080;
padding-left: 0px;
}
</style>
<p>Use CSS to:</p>
<ul id="roman">
<li>Style text, lists, tables, and more,</li>
<li>Control page layout,</li>
<li>Define any aspect of the presentation of a webpage.</li>
</ul>Use CSS to:
- Style text, lists, tables, and more,
- Control page layout,
- Define any aspect of the presentation of a webpage.
Styling an HTML Document
There are three ways to add CSS to an HTML document:
- With an external style sheet,
- With the style attribute on any HTML element, a tactic referred to as inline CSS,
- With an internal style sheet.
The <style> tag is used to create an internal style sheet. So, when does it make sense to use an internal style sheet?
It generally only makes sense to use an internal style sheet if you are creating a one-page web page. If the web page get’s any larger than that use an external style sheet instead.
