How To Add CSS

To apply CSS styles to your HTML documents, you can use three different methods: **External CSS**, **Internal CSS**, and **Inline CSS**. Each method has its own specific use cases and benefits.

1. External CSS

External CSS is the most common and recommended way to add styles. You write your CSS in a separate .css file and link it to your HTML page using the <link> tag inside the <head> section.

Benefits: You can change the look of an entire website by editing just one file!

<head>
    <link rel="stylesheet" href="mystyle.css">
</head>

2. Internal CSS

Internal CSS is used to define styles for a **single HTML page**. You define the styles inside a <style> element, which is placed within the <head> section of the HTML page.

<head>
    <style>
        body {
            background-color: lightgreen;
        }
        h1 {
            color: maroon;
            margin-left: 40px;
        }
    </style>
</head>

3. Inline CSS

Inline CSS is used to apply a unique style to a **single HTML element**. You add the style attribute directly to the HTML tag. This method is generally discouraged for large projects but can be useful for quick fixes.

This is an Inline Styled Heading

<h1 style="color: blue; text-align: center;">This is a heading</h1>
<p style="color: red;">This is a paragraph.</p>

Cascading Order

What happens when multiple styles are applied to the same element? They "cascade" into a new virtual style based on priority:

Inline style (highest priority)
External and Internal styles (in the order they are defined in the head)
Browser default (lowest priority)

Note: Inline styles will override any internal or external styles applied to the same element.

« Previous Lesson Next Lesson »