How to Apply and Link CSS to HTML

😄 This post is based on the content from coding.courses.

Two Ways to Apply CSS Directly to HTML

1. Applying CSS with an Internal Stylesheet – Using the <style> Tag

An internal stylesheet is a method of applying CSS directly to an HTML document by placing CSS rules inside the <style> tag, instead of using an external CSS file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>style Tag</title>
        <style> /* The area where CSS styles can be written */
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            The style tag represents an area where CSS styles can be
            written in an HTML document.
        </p>
    </body>
</html>

# Where to Place the <style> Tag

The <style> tag is used in an HTML document to create an area for CSS rules that specify the styles of the elements you want to style.

Unless it is an explicit exception specified by the HTML standard, there are no particular restrictions on where the <style> tag can be placed. However, because HTML documents are rendered from top to bottom, the <style> tag should be placed before the elements to be styled. Otherwise, the elements to be styled may be rendered first and then have CSS applied to them, causing their styles to suddenly change from the user's perspective, much like the screen is flickering...

However, it is very important to use structural markup in an HTML document.
The elements that are displayed on the screen, including the elements the author wants to style, are located within the <body> tag. This is the basic structure of HTML.

When the <style> tag is placed inside the <head> tag, it helps you understand the structure of the HTML document because the document's structure does not become more complex, and it is easier to recognize the location of the <style> tag. This makes it more convenient in various ways when specifying the styles of elements and working with the HTML document.

# Using Multiple <style> Tags

ultiple <style> tags can be included in an HTML document.
When styling, you can divide your CSS rules among multiple <style> tags based on convenience, readability, the elements or characteristics being styled, and other considerations.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Using Multiple style Tags</title>
        <style>
            /* Desktop */
            h1 {
                color: white;
                background-color: black;
            }
            p {
                color: gray;
            }
        </style>
        <style>
            /* Mobile */
            @media (max-width: 500px) {
                h1 {
                    font-size: 1.8em;
                }
                p {
                    font-size: 0.9em;
                }
            }
        </style>
    </head>
    <body>
        <h1>Using Multiple style Tags</h1>
        <p>
            Multiple style tags can be included in an HTML document.
        </p>
    </body>
</html>

2. Applying CSS with Inline Styles – Using the style Attribute

Inline styles refer to applying styles only to a specific element by using the style attribute within the element to which CSS is applied.

<h2 style="color: white; background-color: black;">
    style Attribute
</h2>
<p style="color: gray;">
    Inline styles refer to applying styles only to a specific element
    by using the style attribute within the element to which CSS is applied.
</p>

Inline styles, which apply styles directly to an element, are generally best avoided.

They are difficult to maintain, and you may need to use the same styles multiple times throughout the document. Also, because CSS is written directly within the elements of an HTML document, CSS information and HTML structural information are mixed together, making the code less readable and harder to understand.

In addition, because properties and values are listed directly without using CSS selectors, pseudo-classes such as :hover and :focus, or pseudo-elements such as ::before and ::after, cannot be used.

However, there are cases where inline styles must be used.
When using an HTML template to send email, only inline styles can be applied to the corresponding HTML template. This is because email does not support most other methods of applying CSS due to important security policies.

1. Applying CSS with an External Stylesheet – Using the <link> Tag

Linking an external CSS file to HTML is the most common and useful method.
You can link a single CSS file or multiple CSS files.

An external CSS file must be created as a separate file with the .css extension, and the HTML <link> tag is used to link it.

The <link> tag uses the rel attribute to specify the link relationship with an external resource, and the href attribute to specify the URL of the external resource to be linked. rel="stylesheet" is used to link a CSS stylesheet to an HTML document. CSS stylesheets are used to apply styles to HTML documents.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Depending on convenience, readability, and the elements or characteristics being styled, you can also link multiple CSS files:

<head>
    <link rel="stylesheet" href="styles1.css">
    <link rel="stylesheet" href="styles2.css">
    <link rel="stylesheet" href="styles3.css">
</head>

2. Applying CSS with an External Stylesheet – Using the @import Rule in a <style> Tag

The @import rule allows you to import one stylesheet into another.

The syntax of the @import rule is as follows:

@import url("URL of the external CSS file");
@import url("URL of the external CSS file") list-of-media-queries;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>style Tag</title>
        <style> /* The tag that provides an area for writing CSS rules */
            @import url("sheet.css");
        </style>
    </head>
    <body>
        ....
    </body>
</html>

Like the <link> tag, you can use the @import rule to link multiple external stylesheets.

<style>
    @import url("sheet1.css");
    @import url("sheet2.css");
    @import url(sheet3.css);
</style>

One thing to keep in mind is that when using the @import rule, it must precede all other types of rules except the @charset rule.

<style>
    @import url("sheet2.css"); /* @import must come first. */
    h1 {color: red;}
    p {color: blue; background-color: yellow;}
    table td, 
    table th {border: 1px solid #000000;}  
</style>

References

How to Apply and Link CSS to HTML - codingCourses

Learn about the different ways to apply and link CSS to HTML, along with the characteristics of each method.

coding.courses