#4: How to Make HTML Look Nice
Now for the good stuff! We’ve learned the basics of HTML, so let’s start learning about its best mate: CSS.
CSS stands for Cascading Style Sheets. This is the code that adds style to your HTML building blocks. In CodePen we’ve been playing with the HTML window, but now we can play in the CSS window too, and the two together will give us a much prettier result.
Let’s try something straight away!
Exercise 1
Begin with a brand new pen, give it a title, and save it. Now add a paragraph element to the HTML window (remember you’ll need an opening and a closing tag) and write some text in it.
Next, write the following in the CSS window:
p { color: red; }Don’t worry about getting the spaces exactly the same–just like in HTML they don’t matter too much. See what’s happened to your paragraph? It should have turned red. If it didn’t, make sure you typed the code properly!
And you can change the colour to whatever you like; try swapping the red for your favourite colour and see if it works?
ps) if you need to know what colour names you can use in CSS, they’re all on this page.
How Does CSS Work?
Our little line of CSS code has a few parts to it:
- First we said “look at the paragraph”
p. - Then we put a set of curly braces
{}to hold some instructions. - Our only instruction was “do something to the colour” which we did with
color:(we usually use American spelling in CSS, though British English will work too). - And then we said “make it red” with
red;.
What Other Things Can We Change With CSS?
We can change loads of things!
Exercise 2
Go back to your first pen and fork it (so we’re working on a new version). Change its title so you don’t confuse the two.
Now, after the red; we can add another style rule. Let’s make the paragraph bigger with font-size: 30px;. Did it work?
Now add another. Perhaps background: yellow;. And then border: 2px solid blue;. And finally (this is a good one) add padding: 20px;.
You might find that the CSS code is getting a little difficult to read all in one line, so we often make things neater by arranging CSS like this:
p {
color: red;
font-size: 30px;
background: yellow;
border: 2px solid blue;
padding: 20px;
}It’s the same code you just wrote, but clearer to read, don’t you think?
Selecting Stuff
As you can imagine, just like we selected the p in our CSS, we can select all the different HTML elements. If we had used a <div> tag we could have coded:
div {}Or if we’d used an <h2> we could have selected it with:
h2 {}These are very simple CSS selectors. But if our HTML code gets a bit more complicated we might need to be a bit more precise with our CSS selectors. We’ll learn more about how in the next tutorial.
Links (and Styling Them With CSS)
Let me introduce you to a new HTML element (one of the most important): the “anchor” which looks like this:<a>. Anchors are what we use for linking. When you click a link on a website, it’s probably an anchor tag.
We make it link to somewhere else (either a page on the same website, or on another website, or a file to download..) by adding an extra bit to the opening tag:
<a href="">This is a link</a>You see the href=""? That’s what we call an attribute, and in this case we can add a URL to it, like this:
<a href="https://google.com">This is a link to Google</a>Exercise 3
Start a new pen, give it the title “styling links”, and add an anchor tag to the HTML window. You can put any text you like between the opening and closing <a></a> tags, and you can put any website address you like between the speech marks of the href="" attribute. Pick the URL of your favourite Youtube video, or a website you like visiting.
Now save it and test it out! You should notice two things:
- Your anchor sends you to the place you linked to.
- Your anchor has an underline to begin with, but that disappears when you hover over it.
We can style the anchor in any way we like; in its normal “state” and in its hover “state”. Try it yourself. In the CSS window add two “declarations”, like this:
a {}a:hover {}
Between the curly braces of the first one, add some style rules to make the anchor look different. Change its colour, its background color, and perhaps its font-size. Now put some different rules in the second declaration–the one which controls how it will look when you hover over the anchor.
Tip: if you want to you can control the underline using the text-decoration property. You can either say:
text-decoration: underline;to give it an underline- or
text-decoration: none;to give it no underline
Try using these rules to swap when the anchor has an underline. How would you do that?
Save the pen, and test it again! Do your styles work when you hover over the link?
That’s All For Now!
And that brings us to the end of our first CSS tutorial–you’ve learned quite a lot! You should now know how to use selectors to point at your HTML elements, and add some simple style rules to change how things appear. Next time we’ll look a little more into CSS selectors!
