How to add CSS to HTML

Ogechì🖤 — Tue, 23 Aug 2022 20:37:00 +0000

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.

Only when CSS is added to the HTML document can the style declarations be applied to the HTML code. However, many newbie developers have trouble adding CSS to HTML. Therefore, the three styling techniques are covered in this article. They are as follows:

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>

Due to its high CSS specificity, only one element can be targeted at a time with this type of styling. Inline styling is not used in daily applications except in rare cases, because the HTML code becomes cumbersome and unpleasant to read.

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 the <link>tag from an external style sheet. This is important 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 a 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.
Import the style.css file into the <head> section of the HTML document using the <link> tag.

   h1{
       color: blue;

       font-size: 16px;

     }

How to target the `h1` element in the external stylesheet

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

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

How to import the style.css file into the HTML document

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🎉.