Please right click and VIEW SOURCE to see how these examples are used.

External CSS

Internal CSS

Inline CSS

Self-defined class in external CSS file.

Note, the order of priority in displaying CSS is as follows:

1. Inline CSS
2. Internal CSS
3. External CSS

What this means is that if you modified a tag using external CSS, but then
put a different style on that same tag using inline CSS, the inline CSS is the
one that will be displayed because it has a higher priority.

For example:

This is an <h1> tag, but it is not RED like it is
defined in the external CSS file.

(Except for the text in the <span> tag, which is even deeper inline than the inline CSS for the <h1> tag.
An example of how span is defined and how to use it can be found HERE)

In general, it is good practice to use External CSS, because you can change the style
of a webpage without having to change the HTML code itself. For instance, if you wanted
to change your website's style to match the current season or holidays, you can just
switch out the CSS file, which changes the style, without changing any of the content (HTML).

Extra fun by linking an external font to change the font style~

Useful links:
HTML Color Picker
Google Fonts
Where I found the example I used above for the stylized font