How to use CSS in HTML pages?

Mayank Sharma
2 Min To Read
March 2, 2022
- Css in html

CSS (Cascading Style Sheets) - It’s a presentation language.

So, while HTML provides meaning to the content. CSS styles the appearance of content.

HTML & CSS should be kept separate. It’s a good coding practice.

Applying CSS

Step 1: Choose the HTML element(s) to which you want to apply the style → Using a selector

E.g. the following will select all the paragraph elements on the page.

p { 
 // Our CSS style
}

Note

We can be more specific by using class and id attributes in the HTML elements and targeting them in the CSS. To learn more about them, you may read this article of ours.

Step 2: Apply the styles to the selected HTML element(s) → Using a property-value pair

E.g. the following will set the font-size, color and background color in the <p> (paragraph) elements.

p { 
    font-size: 17px;
    color: white;
    background-color: #a39d9d; 
}

How to link HTML and CSS

It can be done in three ways:

External CSS file

Include all of styles in a single external style sheet, and refer that from within the <head> element of HTML document. It allows us to use the same styles across an entire website and make sitewide changes by editing just one CSS file. (best practice)

In our HTML file, we will link the external CSS file as follows:

<head>
    <link rel="stylesheet" href="path of the external CSS file">
</head>

Internal CSS

Putting our CSS code inside <style>...</style> element in the same HTML file. (to be avoided)

For example, in our HTML file:

<!-- Internal CSS -->    
<head>
    <style>
        h2 {
            color:green;
        }
    </style>
</head>

Inline CSS

Putting our CSS code inside the HTML element tag itself. (to be avoided; worst practice)

For example, in our HTML file:

<!-- Inline CSS -->
    <h1 style="color:aqua">Cheers 2 Freedom</h1>
    <p style="color:blue; font-size:14px;">Welcome to the course on CSS.</p>

CSS Comments

HTML comments start with .

CSS comments start with /* and end with */.