How to add CSS to HTML

The Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) are the two main languages used to create websites. While HTML provides a website's structure, CSS is used to style the website. Together, they give users the ability to design an attractive and well-organized website.

Prerequisites

This article assumes the reader has the following:

A text editor
Basic HTML knowledge.
Basic CSS knowledge.

The style declarations can only be applied to the HTML code when CSS is included in the HTML document. However, many inexperienced developers struggle to incorporate CSS into HTML. As a result, this article covers the three styling methods. These are what they are:

Inline CSS

Here, styles are added directly to the HTML element tags using the style attribute.

<h1 style = "color : blue;">Inline CSS</h1>

For example, If you want to change the text color and background color of an element, you can:

Add the style attribute to the element.
Add the style properties to the style attributes.

<p style = " " > Paragraph </p>

<p style = "color:blue; background-color:yellow;" > Paragraph </p>

This form of styling can only target one element at a time due to the high CSS specificity. Because it makes HTML code difficult to comprehend and clumsy to write, inline style is rarely utilized in everyday applications.

Avoid using inline CSS as much as you can, but if you must, do it sparingly.

Internal CSS

Here, styles are added using the HTML <style> tag in the head section of the HTML document. Then, the style properties are defined using the appropriate selectors in the <style> tag. Internal CSS is also oftentimes referred to as embedded CSS.

<head>
    <style>
        h1{
              color:blue;
        }
    </style>

</head>

<body>

    <h1>Internal CSS</h1>

</body>

How to change the color of the h1 element using the internal styling method.

The styles for a single HTML page are defined using the internal CSS styling method. This is one of the method's main drawbacks.

The internal style method is therefore not used much in practice.

External CSS

The styling techniques discussed so far are all included in the HTML document (either in the head or the body). But in this case, we import the CSS styles via a <link> from an external style sheet. This is significant since it makes the code easier to maintain and read.

The external CSS style method requires us to create an external style (.css) file and link it to HTML.

For instance, if you want to style an HTML element using this technique, you can:

Create the external style sheet file using the .css extension (Create a file called style.css.)
Target the HTML element inside the style.css file using the selector like so.
```
 h1{
     color: blue;
   }
```

Import the style.css file into the <head> section of the HTML document using the <link> tag.

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

<body>
    <h1> External CSS </h1>
</body>

This method's ability to specify styles for multiple HTML pages is one of its greatest features.

Thus, making external CSS the most preferable method for styling web pages.

Conclusion

I hope you were able to learn about the three distinct approaches to including CSS in HTML. Feel free to add CSS to your HTML code using the knowledge you have gained from this article.

I'll be delighted to address any questions you have in the comments section below.

If you want to learn more about web development, feel free to follow me on Twitter.

Thank you for reading🎉.

Command Palette

Prerequisites

Inline CSS

Internal CSS

External CSS

Conclusion

Comments (1)