Chapter 2

Adding Style with CSS


Congratulations on making it through Chapter 1! As you can see, Chapter 2 is much prettier. We're going to be focusing one of the most useful HTML elements of all.

You may notice that the HTML source in the editor looks very similar to the sources in the previous chapter. We're still just making simple headings and paragraphs with the same elements as before, but now they look totally different!

The magic is in the new <style> element, which can change the appearance of any element in the script. The style element itself is usually invisible, working behind the scenes to make the rest of your page look nice. However, I've put one right below here, and I'll even make it visible on the page for you:

We've been using a combination of English and HTML so far, but the text inside a style element is in another computer language called CSS, which stands for Cascading Style Sheets. Do you have any guesses about how it works yet?

It's a lot to throw at you at once, but you may already be able to figure out how to change the background color of h1 elements to green. Try it out! If you think you got it right, check the heading at the top of the page to see if anything changed! (Can you figure out how any of the other settings work yet?)

CSS is a tool for customizing HTML elements, but it is usually separate from the elements themselves. That means that when you're writing the text in your script, you can focus on what it says, without needing to worry about the details of color, font, and so on.

❤️

Let's get started learning this new language! Click on the next → page button above the script editor to continue.