How to Add CSS to your HTML Pages

Read the full article here:

In this article, we'll discuss three methods to add or link CSS to an HTML document:

Inline styles
The style tag
External stylesheets

Inline Styles

Inline styles in HTML allow you to apply custom CSS styling rules directly to elements within an HTML document. To apply inline styles, you need to add the style attribute to the HTML element you wish to style. The style attribute should contain one or more CSS property-value pairs enclosed within curly braces. Below is an example:

<h2 style="color: red; font-size: 24px;">Hello World</h2>

Style Tag

Another common way of adding CSS to your document is using the style tag. The Style tag in HTML allows you to define CSS rules directly inside an HTML document (usually the head of the markup). This method is common when working on single page website where there is less styling needed.

<!DOCTYPE html>
<html>
   <head>
      <title>Style Tag Example</title>
      <style>
         h1 {
            color: blue;
            font-size: 36px;
         }
      </style>
   </head>
   <body>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

One significant advantage of using the Style tag is that you can define specific styles for different media types. For example, you can define different styles for printing, screen, or mobile views.

External Stylesheets

An external stylesheet is a separate CSS file that is linked to an HTML document using the link tag. This file typically has a .css extension and contains the style rules for the entire website. Here's an example:

<!DOCTYPE html>
<html>
   <head>
      <title>External Stylesheet Example</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

In the example above, the link tag is used to point to style.css, which is a separate file that contains CSS rules for the website. However, keep in mind the inline styles have the highest priority so they will override the stylesheet.

Check out this post here. Also, have a look at my blog. Thanks!

Code with Saleh