Adding CSS to HTML

To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won’t change the appearance of the HTML. We have to ways to achieve this.

Inline Styles – Allows you to add styles to specific elements.
Internal Styles – Allows you to include CSS Code in the <head/> section of your HTML Page.
External Styles – Allows you to link external style sheets from CSS files saved with a .css extension.

Inline Styles

A few things to know about an Inline style are;

It uses the style attribute. Itâ€™s important to note 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.

Internal Styles

A few things to know about an internal style are;

It contains CSS rules for the entire page.
It uses the <style> element – which contains a block of styling rules and is placed in the <head> element of HTML files.

External Styles

A few things to know about an external style are;

It contains CSS rules for the given page that links it.
It uses the <link> element put in the <head> element – which has an href attribute with the address or link or path to the external .css file

CSS Tips

Here a few tips to note:

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.
Use inline CSS to make minor modifications to your elements.
When you specify more than one CSS rule to an element, the style for that item follows the cascading rule : inline > internal + external > browser default.
You can use any text editor to create an external stylesheet. This process is similar to creating an HTML file.

Back to Lesson