10.45 What is CSS?
Table of contents
- View the browser’s default styles
- Add CSS to override the default style
- Debug the problem
- Use the inspector to make temporary edits
- What you’ve learned
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
- 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:
Add the following CSS to this file and save:
So the entire file looks like this:
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
Now look at the
<h1> style definition in the Inspector.
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.
- 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> tags and save:
Your file now looks like this:
Refresh your browser and now you’ll see the changes applied:
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:
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.