TL;DR — There are three options for styling HTML elements. You can style HTML elements by using the inline CSS. The internal CSS is for styling whole pages. The external stylesheet can set rules for entire websites when you know how to link HTML to CSS.
Contents
Options for styling HTML elements
Inline CSS allows you to add styles to specific HTML elements.
The internal CSS stylesheet allows you to include CSS code in <head> section of a markup document.
External stylesheet works by linking a .css file, containing all the CSS rules, to an HTML document.
Inline CSS
You can use inline style CSS to modify HTML elements. It uses the style attribute.
Warning: inline CSS styling is not a good practice. It is difficult to manage and update. Additionally, combining HTML with CSS leads to messy and difficult-to-read code.
Note: use inline CSS to make minor modifications to your elements. However, consider other practices as the main styling method.
Internal CSS
Another way to include CSS in HTML is to use an internal stylesheet. It contains CSS rules for the entire page. The <style> element contains a block of styling rules and is placed in the <head> element of HTML files.
<head>
<style>
h1 {
color: red;
margin-left: 20px;
}
p {
color: blue;
}
</style>
</head>Note: this stylesheet is applied to style HTML documents, meaning that it changes individual pages. Pages styled with internal CSS load slower than with other options.
External CSS
An external CSS style sheet is a separate file that contains a list of CSS rules and has the .css extension. You need to link it to an HTML document.
How to link HTML to CSS after you created the external stylesheet?
You need to use the <link> element and put it in the <head> of HTML pages.
Remember: the .css file cannot have any HTML tags. Also, there is no set number for external CSS stylesheets that can be linked to HTML documents.
Cascading order
When you specify more than one CSS rule to an element, the style for that item follows the cascading rule. Number one has the highest priority:
- Inline style
- Internal and External stylesheets
- Browser default
The inline CSS style, defined by using the style attribute, overrides the style declared on the internal or external stylesheet for that element.
Tip: the cascading rule can be useful whenever you're using an external .css file on a few pages and need to tweak one or two elements.
Style HTML: useful tips
- The best practice for styling HTML documents is the external stylesheet. It lets you set CSS rules for several files and is very easy to update.
- You can use any text editor to create an external stylesheet. This process is similar to creating an HTML file.