How To Add CSS

❮ Previous Next ❯

When a web browser reads a style sheet, it uses the details to ensure that the HTML document appears as intended.

Three Ways to Insert CSS

You can add a style sheet in three different methods:

External CSS
Internal CSS
Inline CSS

External CSS

Using an external style sheet, you can alter the appearance of a whole website by modifying only a single file!

In every HTML page, you should put a link to an external style sheet file within the element in the head section.

Using an external style sheet involves writing it in a regular text editor and then saving it with a .css extension.

Remember, the external .css file shouldn't have any HTML tags in it.

Note: when using property values like (20) along with units like (px) in your code, ensure there's no space between them.
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

Internal CSS

You can use an internal style sheet when a specific HTML page needs its own unique style.

The internal style is set within the <style> element found in the head section.

Inline CSS

You can use an inline style to give a specific style to just one element.

For inline styles, just include the "style" attribute in the element you want to style. This attribute can hold various CSS properties.

Tip: Using inline styles means mixing how things look with what they say. This makes style sheets less helpful. Only use inline styles occasionally.

Multiple Style Sheets

When properties are defined for the same element in different style sheets, the values from the last read style sheet will be applied.

If you set the internal style after linking to the external style sheet, the <h1> elements will appear in an 'orange' color./p>

Cascading Order

What happens when an HTML element has more than one style?

All the ways things look on a page will blend together to create a new set of looks in a special list. This happens according to some rules, and the most important rule is number one.

Inline style (inside an HTML element)
Style sheets are like clothing instructions for a website. They can be either inside the website's code or separate files.
Browser default

When using inline styles, they are the most important and will replace any external styles, internal styles, or default browser styles.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
<link rel="stylesheet" href="/assets/files/mystyle.css">
  </head>
  <body>
    <h1 class="my-heading">This is a heading</h1>
    <p class="my-para">My first paragraph.</p>
  </body>
</html>

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

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1.my-heading {
        color: orange;
      }
     p.my-para {
        color: orange;
      }
</style>
    <link rel="stylesheet" type="text/css" href="/assets/files/mystyle.css">
  </head>
  <body>
    <h1 class="my-heading">This is a heading</h1>
    <p class="my-para">The style of this document is a combination of an external stylesheet, and internal style</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="/assets/files/mystyle.css">
    <style>
      h1.my-heading {
        color: orange;
      }
     p.my-para {
        color: orange;
      }
</style>
  </head>
  <body>
    <h1 class="my-heading">This is a heading</h1>
    <p class="my-para">The style of this document is a combination of an external stylesheet, and internal style</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid