How to link css to a html file?

Last update: 01 - 11 - 2023

What is CSS?

CSS is the acronym for Cascading Style Sheet. The reason for the name is because this language reads the information that is written inside its tag or external file from top to bottom. These style sheets are responsible for giving visual form to an HTML file, it is the technology responsible for applying colors, margins, sizes, fonts, positioning and animations to the elements found on a web page.

How CSS works

In order for our styles to be displayed on the screen it is necessary to know the ways in which CSS can be worked with. There are three ways to apply styles with CSS:

  1. Adding inline styles to a HTML file

    2. Including CSS inside HTML elements is the least recommended of the options, although there are very specific cases where it is required. This way consists of giving a "style" attribute to the HTML tag you want to modify, for example:

    <h1 style="font-size: 20px;">Main Title</h1>

    Important note!

    Applying inline styles will replace the same property that you have written in the dedicated CSS file or style tag that you have placed in the head. In the previous example a font size of 20 pixels was used, if in the external file or in the tag you used the same property with a different size, the one that will have priority when rendering the page are the inline elements.

  2. Adding a tag style to a HTML file

    3. Using the style tag inside the head of the HTML document is an option if the styles you want to implement are few. Giving CSS styles in this way saves weight on your web page by avoiding creating an extra file.

    This tag should be at the end of the other tags inside the head, like this:

    <head>
    <meta charset="UTF-8">
    <meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

      <!-- Tag style here --> 
      <style>
      <!-- Your CSS code --> 
      </style>
    </head>

  3. Adding CSS styles with an external file

    4. Defining the CSS code in an external file is the most recommended way to style a website. These files are created with the .css extension and are usually named like the HTML file itself (with its respective .css extension), such as index.css, styles.css, app.css or main.css. Although they are standards, the name does not matter much as long as the path is well written in the HTML head, for this the link tag is used.

    <head>
      <meta charset="UTF-8">
      <meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

      <!-- CSS link tag placed at the end of head tag -->
      <link rel="stylesheet" href="file-route.css">
    </head>

CSS syntax

Now that you know the ways to add CSS to your HTML document it is time to know how these styles are written.

CSS is written through declarations where a selector, a property and a value are defined.

The selector is the HTML element to which you want to apply the styles, these can be selected by the same name of the tag, by class or by a unique identifier.

The properties are what modify the characteristics of that element, such as its font size, color, internal and external margins, etc.

The value indicates in what way or how the property will be modified.

These declarations must be enclosed in a block with curly braces ( {} ) and each property with its value must end with a semicolon ( ; ).

selector{
  property:value;
}

/* Modifying a h1 tag */

h1{
  font-size:20px;
  color:#fff;
  text-align:center;
}

Now we will explore the CSS selectors in the next chapter of this saga. 😁

Back