10.45 What is CSS?

Table of contents

Edit this page

This article introduces CSS, the language used to style web pages. Read it to learn how to apply CSS rules to your website.

Your website has some content, but it’s using the default styling that comes with your browser. You can override these defaults with CSS. CSS stands for Cascading Style Sheets, so-called because some rules override other ones, in a cascade.

View the browser’s default styles

Let’s view what the styles looks like currently. In the browser, right-mouse and click on Inspect. Expand the nested HTML on the left, so you can see the <h1> tag.

A screenshot showing the browser's inspector, showing h1 css

Troubleshoot

  • Your panels might be arranged differently, with the code on the right. If you want to rearrange them, in Chrome, click the three dots on the toolbar that contains the words Console, Elements etc then choose your preferred Dock Side option.

The styles panel on the right shows me that the default styles for the <h1> HTML tag are that the font size is 2em (as in em-dash) and the font weight is bold.

The browser’s inspector

  • Notice too that raw HTML is also displayed in the Inspect panel, in the Elements tab, on Chrome (other browsers may be a little different, but essentially do the same thing). Compare the HTML here with the HTML in your file. It’s the same, give or take some whitespace. The Inspector is a good place to go to troubleshoot and debug your code when problems arise.

Add CSS to override the default style

You’re going to try to override the default style. But heads up: it’s not going to work at first. You will have the opportunity to debug the problem.

Open the file called main.css in the assets/css/ folder:

Screenshot showing the empty file where the reader will put their css code

Add the following CSS to this file and save:

  h1 {
    color: red;
    font-family: sans-serif;
  }

So the entire file looks like this:

  /* You will put CSS style information here. */

  h1 {
    color: red;
    font-family: sans-serif;
  }

Refresh the browser page. You expect the colour of the heading to go red, and the font to change style, right? But it’s not changed. What has gone wrong? Let’s debug the problem.

Debug the problem

First, look in your Inspector, in the HTML Elements panel. Is the HTML tag indeed <h1>? Yes, that is correct. The word “Portfolio” is surrounded by <h1> tags:

  <h1>
    Portfolio
  </h1>

Now look at the <h1> style definition in the Inspector.

Using the inspector to show that the css styles aren't being applied. The screenshot shows that the new styles do not appear in the browser's inspector

Does the color: red instruction appear? No: the code you wrote isn’t getting referenced. That’s the clue you need to figure out what’s going wrong. The solution is to add a reference to the CSS file so that the browser knows to run it when it interprets the HTML file.

Troubleshooting

  • Things go wrong in programming all the time. The trick is not to panic, and to look for clues. It can be, believe it or not, fun.

In the portfolio.html file, add the following line between the <head> and </head> tags and save:

  <link rel="stylesheet" href="/assets/css/main.css"/>

Your file now looks like this:

  <!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="/assets/css/main.css"/>
    </head>
    <body>
      <header>
        <h1>
          Portfolio
        </h1>
      </header>
      <main>
        Book list goes here
      </main>
    </body>
  </html>

Refresh your browser and now you’ll see the changes applied:

The css now works as the screenshot shows the h1 rendered in red

Use the inspector to make temporary edits

You can temporarily make changes in the Inspector to see how they’d look on the page. Have a go: make the <h1> text display in a different font, or change the colour to blue. To edit colour, right-mouse on the colour chip to bring up the colour editor:

A gif showing the user changing the color of the text in the inspector

What you’ve learned

  • Browsers have default styling, but it’s not pretty
  • You use CSS to override these default styles, and add new ones
  • The HTML page needs to know where its CSS stylesheet is, via a link in the <head> of the HTML file
  • The inspector is a handy tool for debugging and trying out changes to the CSS.
  • CSS rules are applied in a cascade, hence the name.