How To Add CSS Styles To Your HTML

From here on out, we are going to be dealing with mainly CSS code. It is only for relevant examples that there will be HTML code present as well.

CSS syntax is added in the following way:

element_name {
  property: value;
}
 
/* For example */
div {
  background-color: red;
}

CSS files have the extension .css. For example, index.css or styles.css.

CSS, like HTML, is also case-insensitive. Therefore, BACKGROUND-COLOR: RED and background-color: red work the same. However, it is recommended to use lowercase letters as they are easier to read, and write

The next prudent question to ask ourselves is, how do we add CSS to our HTML to make it appealing? Because HTML on it's own is actually quite terrible looking.

There are four ways that you can add CSS to your HTML.

1. Inline CSS

This refers to adding styles right within the HTML element - as we have been doing in the HTML examples. It involves giving the element the style attribute and then adding the CSS properties you want.

Example:

<div style="background-color: red">
  This is a section with a red background color.
</div>

This will create a section with a red background color. The above example is called inline styling and it should only ever be used if:

The styles you are applying to the element are only going to be used in that element alone.
You want to override some global styles that you might have applied in your actual CSS file.

The reason it is important to note the two points above is because of CSS Specificity - which means that inline styles will override all other styles that you have applied in an external CSS file. More on this in the module CSS Specificity

2. Internal CSS

This refers to adding CSS styles in the head of your HTML document, inside style tags.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- meta tags and other relevant data -->
 
    <!-- Style tag for CSS -->
    <style>
      div {
        background-color: red;
      }
    </style>
    <!-- End of style tag -->
 
    <title>Internal CSS</title>
  </head>
  <body>
    <div>
      <h1>A section with a red background color</h1>
    </div>
  </body>
</html>

The <style> tag indicates to the browser that you are about to add in CSS code, and it should intepret everything inside the style tags as CSS code and not HTML. Remember, HTML will not throw you an error on the screen. So, if you forget to add in these tags, your web app might not show an error, and it is up to you to determine that it is an error, and to find out where the error is.

The downside to adding CSS styles in this way is that they will only apply to the current document in which they are found. For example, if you had the above styles in a HTML file called index.html, and you created another file called about.html, the styles in the index.html will not apply to the about.html. If you want them to apply, you will have to add them in the head tag of the about.html file.

3. External CSS

In your HTML document, in the head of your HTML, you can link your stylesheet in the following way:

The <link> tag is discussed in the module about HTML Tags

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- meta tags and other relevant data -->
 
    <!-- Link to your external CSS file -->
    <link rel="stylesheet" href="index.css" />
 
    <title>External CSS</title>
  </head>
  <body>
    <div>
      <h1>A section with a red background color</h1>
    </div>
  </body>
</html>

Once you do this, you can begin to add relevant styles in your CSS file and they will apply to the current document. For example, in your actual CSS file, you can have the following:

div {
  background-color: red;
}

This, like the other examples above, will render a section with a red background color;

This is the main way - and also the recommended way - that you will be using to add your CSS files to your HTML documents.

NOTE: It is the recommended way. However, even when you have an external CSS file, always select the most convenient one for what you are currently doing. For example, sometimes you need to apply overriding styles to your elements. This is where CSS Specificity comes in. More on this in that module.

In the next module, we are going to talk about CSS Selectors.

4. Using an external stylesheet

This involves getting an external stylesheet and then linking it in your HTML, on in your CSS. You will find yourself having to link stylesheet such as when you want to add a custom font to your webpage (if you haven't downloaded it), or if you want to use a CSS framework.

Example:

<!-- Linking an external CSS file of a custom Google font -->
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
    rel="stylesheet"
  />
</head>
 
<!-- Linking a CSS Framework -->
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
    referrerpolicy="no-referrer"
  />
</head>

Or, in your CSS:

/* Linking an external CSS file of a custom Google font  */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

Why Use CSS?Comments In CSS