Lesson 4

Setting up our CSS

Connecting our stylesheet to do some design

CSS works by targetting HTML elements and giving them a list of style instructions. If you think about it, any particular part of a design could be described by how it looks.

Thimble has already created a CSS stylesheet called style.css. Currently, there is an instruction there that is updating the font family.

Let's add another instruction, this time to the h1 elements, to change the look of your app name.

We use colons at the end of the style property we want to set, and semi-colons at the end of each line to tell the browser we’ve finished.

We need to tell the browser to read our CSS file. It doesn’t magically know it’s there. When the browser loads the app, it downloads just one file: our index.html. So, it’s important we tell it to read any new files we use.

Back in your index.html you can see that Thimble has already created a link to this style.css file.

HTML uses the link element to point to our new file. We tell the browser it’s a stylesheet and use the "href" attribute to give it the location of our file.

CSS - The Language of Design

CSS stands for Cascading Style Sheets. It was developed by Håkon Wium Lie and Bert Bos in the early 1990s.

Fundamentally, CSS gives developers the ability to breathe life into HTML - colours, borders, backgrounds and more.

We’ll be showing you a variety of CSS commands, but to see an entire list of them have a look at the W3 Schools CSS Ref page here.

The importance of cases

You may have seen that whether you type in upper or lower case matters sometimes when you’re coding, but not all the time. It’s normally best practice to keep everything lowercase when you are coding in HTML and CSS, to make sure that you can always references files and elements.

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson