CSS How To

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS is used to apply CSS on a single line or element.

See this example:

<p style="color:blue">Hello CSS</p>

Output:

Hello CSS

Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html.

See this example:

<head>
<style>
body {
    background-color: linen;
}

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

Output:

This is a heading

This is a paragraph.

External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css for example style.css.

See this example:

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the "style.css" looks:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Output: