Lesson 6

Intro to CSS

Using CSS to add design

CSS works by targeting 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.

You say things like: I want my h1 to be big, bold, red and centred:

For more information about CSS see *CSS - The Language of Design.
Let's set up a CSS file so we can start making our apps look better.

Thimble has automatically created a stylesheet for you called style.css. Select this from the left side panel.

1. Inspect style.css

Currently the style.css contains just one instruction to update the font.

Why are design instructions in a different format?

When Sir Tim Berners-Lee created the web he was primarily concerned with making information as easy to share as possible. As more and more people started to use the web, design became much more important and so a new language - CSS - was developed to breathe life into the HTML content.

See *Separation of Concerns for more information about how separate content from design.

2. HTML connection to CSS

Your stylesheet is connected to the index with a link tag in the "head". This is like the meta element, it doesn't require a closing tag.

This link instruction is put in the head element of the HTML page.

What do rel and href stand for?

REL stands for relationship (so in this instance the CSS document’s relationship to the index.html is that it is a stylesheet). HREF stands for hyper text reference.

3. Inspect "body" selector in CSS

To create an instruction in CSS we first tell it what element to target - in this case the "body", and then we list the changes between curly brackets.

Why does CSS use { } instead of < >

CSS is a completely different language to HTML and so it has (rather confusingly!) a different bracket system.

4. Align your text

Each instruction starts with a property to change, for example text-align. This is followed by a colon : and then the value it should be changed to, for example 'center'. Note the spelling of 'center' here. See *International English for more information about spelling.

Finally we add a semi-colon to tell the browser that we've finished.

For more information about the changes available in CSS see *Online Resources.

What other fonts can we use?

You can use any font that you have the copyright to on the web. See *Fonts for a font challenge!

*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.

*International English

When Sir Tim Berners-Lee created the language of HTML he decided to use international (American) English as it is the most widely used version. This can sometimes trip up those of us in the UK when we are spelling words like colour (color) and centre (center). If you find this frustrating, just remember how lucky we are that the language is written in our language in the first place. No matter you are in the world and what language your content is written, the HTML is always in english - pretty cool for us english language speakers!

*Separation of concerns

In computing we often talk about the idea of the "separation of concerns", and in web development this means having separate languages and files for content, design and interactivity.

This separation is important because it makes our code easier to change. For example, multiple content files can reference the same design file. This means that a change only needs to be made in that one stlye page and it will affect all the content pages.

*Online resources

There are a whole host of online resources related to CSS styles. Pretty much anything you can imagine from a design perspective is possible with CSS. One of the best starting points is to Google what you want to do (e.g ‘make the background red’) and find the code. But if you need inspiration, W3 Schools has a great CSS reference web page - you can find it here.

*Fonts

If you're feeling brave, why not add a custom font to your web app. Google have a great tool called "Google Fonts" which allows you to import a font directly into your page. Have a look at it here.

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson