A Pure Guide On How To Link CSS With HTML For Beginners.
Tags: css, html, frontend, coding
Published: 2023-11-17 01:20:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezi3p8r5uhwii4gvqi6p.jpg)



There are few several ways to implement CSS styles sheet into HTML document file. The CSS implementation play an important role in the presentation of web pages by applying CSS rules to style the HTML element tags. It defines the visual styles of a HTML markup such as: colors, background-color, padding, margin, font-size and positioning of HTML elements.
We will be looking into three ways of implement CSS into a HTML file which include: 
1.Inline CSS
2.Internal CSS or Embedded CSS
3.External CSS 
4.@Import CSS. 
Inline CSS: An inline CSS is used to apply a unique style to a single HTML element tag. With Inline CSS, we can define the style attribute within a HTML element tag.
Example: Use visual studio code editor or any other editor.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inline CSS</title>
</head>
<body>
    <h1 style="color: green; text-align: center;">Hello World!</h1>
    <!-- You can add the font-size too and the value of your choice -->
</body>
</html>

```

Here we have been able to apply inline CSS rule using the style attribute
NOTE: An Inline CSS is used to style a specific HTML element and contains the CSS property in the body section attached to the element (within the element tag using the style="" attribute). 
For Instants, with the above example you’ll only need to add the style attribute to each HTML tag, without using selectors like an ID, Class or tag element selector.

However, inline CSS in HTML can be useful in some situations. For example, in cases where you don’t have access to CSS files or need to apply styles for a single element only. 
Inline CSS is the technique to define the single element with the insert style sheets in an HTML document.

This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.

Advantages of Inline CSS:
You can easily and quickly insert CSS rules to a HTML element tag. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website.
You don’t need to create and upload a separate document as in the external style sheet or internal style sheet.
Disadvantages of Inline CSS:
Adding CSS rules to every HTML element tag is time-consuming and can make your HTML structure messy.
Inline CSS styles cannot be reused anywhere else with other HTML element tag. 
Styling multiple elements can be tough and to edit, because they are not stored in a single file.
Internal CSS or Embedded CSS: An internal CSS (or Embedded CSS) can be use to style a single HTML file and its also an effective method of styling a single page. 
The internal CSS rules are defined inside the head element tag <head></head> within the style element tag <style></style> and the CSS style rules are all written inside the style tag.

Here is how you can write internal CSS: if you are using vs code, create a HTML file and use Emmet abbreviation to add all the necessary default element tags (the boiler plate), by using shift + 1.
1.Open your HTML file and locate <head> opening tag above the <body> tag.
2.In between the opening element tag and the closing element tag of the head tag add the style tag <style></style>
Example: Use visual studio code editor or any other editor.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal CSS</title>
    <style>

    </style>
</head>
<body>

</body>
</html>

```


3.Write your CSS code in between the opening style tag <style> and closing style tag </style>

Your HTML file will look like this:
Example: Use visual studio code editor or any other editor.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal CSS</title>
    <style>
        h1{
            background-color: aquamarine;
            color: white;
            text-align: center;
        }

        p{
            background: #000;
            color: #fff;
            font-size: 20px;
            text-align: center;
        }

    </style>
</head>
<body>
    <h1>Hello World!</h1>
    <p class="hello">Hello! Welcome</p>
</body>
</html>

```
However, using this style for multiple HTML files is time-consuming as you need to put the CSS rules on every single page of your website.

Advantages of Internal CSS:
You can use class name and id as selectors in this style sheet. 
You can select elements by class name, id or element tag name. 

Disadvantages of Internal CSS:
Adding the code to the HTML document can increase the page’s size and make it much longer than it should be.
It can be difficult to make change on both HTML part and CSS part at the same time.
Adding the internal CSS style inside the HTML file page sometime is not a good practices, especially when it comes to the image content, video content and others.

External CSS: An External CSS (An external cascading style sheet) is a separate CSS file that can be access through a link tag within the head element tag of the HTML file by creating a link using the link element tag.
Multiple HTML file or web pages can use the same link to access the same style sheet.
The link to an external style sheet is placed within the head tag of the HTML file.
The external style sheet may be written in any text editor but must be saved with a .CSS file extension and must be link inside a HTML file above, inside the head tag.
The external CSS is a more efficient method to write CSS style rules, especially for styling a large website.
By editing one .CSS file, you can change the look of your entire site at once.

The Following steps are how to write and use external CSS: if you are using vs code, create a HTML file and use Emmet abbreviation to add all the necessary default element tags (the boiler plate), by using shift + 1.  and add the style rules

1.Create a new .CSS file with the text editor you are using.
2.In between the <head> of your HTML file, add a link element tag with reference to your external .CSS file.
Example: Use visual studio code editor or any other editor.

```
<link rel="stylesheet" href="style.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>External CSS</title>
</head>
<body>
    <h1 id="hello" class="hello">Hello! Welcome</h1>
    <p id="hello" class="hello">Hello! Welcome</p>
</body>
</html>

```

3.By default, link tag comes rel attribute and href attribute but the external CSS styles sheet is link-up inside href attribute like the above example explains. Don’t forget to change style.css with the name of your .CSS file.
Example: Use visual studio code editor or any other editor.

```
<style>
        h1{
            background-color: aquamarine;
            color: white;
            text-align: center;
        }

        p{
            background: #000;
            color: #fff;
            font-size: 20px;
            text-align: center;
        }
</style>

```

Advantages of External CSS:
The external style sheet is generally use to separate HTML file from CSS style sheet for clean and readable code. 
It make your code readable, reusable and organize.
You can use the a single .CSS file to style multiple HTML pages.
Once the CSS code is in a separate file, your HTML files will have a cleaner structure than that of internal CSS and inline CSS.
It is used when you want to make changes on multiple pages at the same time.
Disadvantages of External CSS:
Your pages may not be rendered correctly until the external CSS is linked.
CSS @Import Rules: The CSS import rule is use to import one style sheet into another style sheet. It a convenient way to load additional style sheet into a CSS style sheet.
Example: Google Fonts (Use visual studio code editor or any other editor).

```
<style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
        Body{
            font-family: 'Poppins', sans-serif;
        }
</style>
```

NOTE: The @import rule must be at the top (inside) of the style sheet. The url(), with a string inside a bracket function represent the location of the resource to import from, i.e we use the url() function to provide a file path or to find the location.