Welcome to the fifth lesson of our Web Design for Kids series, all about CSS.
We’ve worked very hard on our HTML content, so now it’s time to make it look pretty! We will be adding things to our HTML page here, as well as starting a new file: a CSS document.
Take a look at the completed website we’re building. The files for this lesson can be downloaded here and don’t forget to ask any questions in the comments section at the bottom of this page.
What is CSS Exactly?
Before we start coding away let’s first make sure we understand what CSS is. CSS stands for Cascading Style Sheets and it’s a language which helps us change the way our HTML page looks.
In the picture above, the browser on the left shows a website with no CSS, no styling, while the website on the right has styling. The styling has been written within a CSS file–much better!
CSS is written within a separate file using our text editor. Our HTML document was saved with a .html extension, but our CSS document will be saved with a .css extension.
Creating a CSS File
We will need to start a brand new document in our text editor and save this as “tutstown.css” in “tutsfolder”; alongside “index.html” and the “images” folder.
HTML & CSS
In order for our CSS document to apply styles to our HTML document we need to link them together. This is done through a <link> element within the head element at the very top of our HTML document.
We’ll add this link directly below our title:
<head><title>Tuts Town</title><link type="text/css" rel="stylesheet" href="tutstown.css" /></head>
There are a few important attributes to include within this self closing element, the first of which is type. The type attribute tells the browser what the type of content we are linking. In this case it is a text/css file.
The second attribute we see here is rel, which tells the browser what the relationship is between the HTML and the linked document (our CSS). The CSS document is a stylesheet for our HTML, so that will be what we include here.
Lastly, we have the href which you might remember from our <a> elements. It points somewhere else. In this case it’s telling the browser where to find the CSS file that we have linked to.
If everything’s linked properly, the page will look different when you refresh it in the browser:
Classes
In our CSS file we can list the HTML elements we’ve used and say how we want them to look. There are lots of ways to point to the elements we want, and HTML classes are one of those ways.
HTML classes are attributes that we can add to elements. Once an element has a class name, we can use this in our CSS.
The chosen class name should be a word or words that describe the content in that element.
Adding a class to our <header> might look something like this:
<header class="primary-header"> </header>
Classes are not unique, so several different elements can have the same class name. This makes adding the same styles to lots of elements much more straightforward; we’ll see this in action when we get to our store images!
How CSS is Written
The way you write code is called its syntax. Just as with HTML, CSS needs to be written in the correct way in order to work.
Let’s jump over to our CSS file and, just for practice, change the background-color of the header to blue.
.primary-header {
background-color: blue;
}
So our CSS understands that what we are targeting is a class name, we need to do a few things:
- We need to put a dot
.before the name. - The styling instructions are contained within curly brackets,
{ }. - What we will be styling (
background-color) is immediately followed by a colon: - Then we add the value (which is
bluein this case). - Each style must end with a semicolon
;
It can be very easy to forget these!
Save this CSS file and refresh the browser; if you don’t have this open yet you can do so by double-clicking the “index.html” file in the “tutsfolder”. How neat is that?!
Important! Now let’s delete this styling as our site will not have a blue header!
More Comments
CSS also allows us to include comments in our file that the browser will ignore, but they will look a bit different from our HTML comments.
A CSS comment is contained within these symbols: /* */
/* This is a comment in CSS */
The CSS document in the exercise files will contain a few helpful comments to further explain things.
The Body
The very first bit of actual styling we can do on our website is change the background-color to that lovely light yellow. There are some color values that can be written out in CSS, like blue in the example code above, and the browser understands. For other less common colors we will need to include the color’s hexadecimal, or hex, number instead.
All colors have a hex number to match. Browsers do not understand many colors when they are written out, but they do understand hex numbers very well. The hex number for our light yellow color is #FAF8DA, and we want to apply that to the <body>, to fill the entire page.
body {
background-color: #FAF8DA;
}Important! There is no need for a dot in front of body here because it is not a class name. Instead, we have pointed to the body element straight away.
If you are curious about the hex value of other colors this color-hex site can be very useful.
Fonts
We can also set the font (the style of letters) for our website using body in our CSS.
All we need to know at this point is that we have to link a font from Google to our HTML document. Once this are linked the browser will understand and we can use it.
Here’s a look at the link we need to add within the <head> of our HTML (the same place we linked our CSS document!)
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then we can save this and head over to our CSS document:
body {
font-family: 'Open Sans';
}This will set the font for all the text on the page as Open Sans.
The Header
Within the header we will be changing the text color and size as well as the town’s image size.
First, we need to add the right HTML classes to the elements in the header, so we can use them in our CSS.
Within the opening <h1> tag let’s add a class of main-heading and within the <img> we’ll add a class of town-preview:
<header><h1 class="main-heading">Welcome To Tuts+ Town</h1><img class="town-preview" src="images/townheader.svg" alt="An illustration of Tuts Town tower." /></header>
In our CSS document we can now point to these elements through the class names we set and begin styling.
We set a rather large font-size here of 70px. px, or pixels, is like a dot on the screen. This dot is filled with color and is used as a unit of measurement. The image of our town is also quite large, so we’ll set that at 650px wide.
The color property sets the color of the text, which here (#205D76) is a dark blue.
.main-heading {
font-size: 70px;
color: #205D76;
}
.town-preview {
width: 650px;
}Main
Remember, within main we have smaller sections that contain an image and text. We’ll need to set a size on these images and style the headings and lists with CSS.
Images
The first thing we need to do is set the size of the building images. To set the image sizes all together we can use the same class name for several elements.
We will want to add the same class name, building, to all three store images in our HTML, and then resize them all at once in our CSS, like this:
.building {
width: 200px;
}
Headings
Our three smaller headings can also have the same class name and we’ll use that to change the color and font-size of the text.
.category-heading {
color: #205D76;
font-size: 30px;
}Lists and Links
After the heading within each section we have our unordered shop lists–remember them? In addition to changing the size and color of the links here, we will also need to change the color of the list’s bullet points.
Let’s add a class of store-list to the <ul> and store-link to the <a> in our HTML document and then save it.
.store-list {
color: #FFC122; /* Changes list’s bullet point color */
}
.store-link {
color: #EA6E2F;
font-size: 20px;
}
You might notice, when looking at our website in the browser, that there’s not much spacing between list items, making it look a bit crowded. We will be talking all about spacing and adding some here in the layout tutorial later on in the series.
Footer
After we add a class of primary-footer to <footer> and created-by to the <p> element within this footer we can declare the background-color as well as the text color and font-size:
.primary-footer {
background-color: #FFC122;
}
.created-by {
color: #FFFFFF;
font-size: 20px;
}
Conclusion
In this lesson we learned all about how to link an HTML and a CSS document together and then add lovely styles to our elements through classes. At this point what we see in our browser will still not match the fully designed website preview we have been referencing, but look at what a difference some color and sizing can do! It’s only going to get better.
Next we will be moving our content into place on the screen using some extra clever CSS layout techniques.
See you around town!
