JONCODED

CSS setup

3 ways (and the best way) to add styling to an HTML page

jon's photo
jon
·

2 min read

CSS setup

Table of contents

How we can add CSS to an HTML page:

Prerequisites

  • Code editor

  • HTML file

  • Web browser

Methods of adding CSS

For an HTML-only page, we have three ways to add CSS:

  • in-line (style attribute)

  • <style> tags

  • style sheets

In-line (style attribute)

Although not the best practice (or even a good practice), we can learn how CSS works, by using the style attribute in-line within each HTML tag:

<html>

    ...

    <body>

        <h1 style="font-size: 128px">Big Heading!</h1>

    </body>

</html>

During development, we can use these in-line styles mainly for testing a specific styling!

Style tags

We could also use HTML <style> tags:

<html>

    ...

    <body>

        <style>
        h1 { font-size: 128px }
        </style>

        <h1>Big Heading!</h1>

    </body>

</html>

However, with more styling rules, this can easily become messy and lengthy!

Style sheets

The "SS" in "CSS" allows us to separate the styling concerns from the HTML file, by placing them into a style sheet:

/* style.css */

h1 { 
    font-size: 128px
}

We then reference the above style.css file in the HTML page using a special <link> tag within the <head> tag, which itself lives in the <html> tag:

<html>

    <head>

        ...

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <h1>Big Heading!</h1>

    </body>

</html>

Next, we shall learn how to connect those styles in our HTML with CSS selectors!

CSSHTML