Adding Styles - Part 1

Let's get started with some styling. But what styles do we add?

Why not start with the background color of the page?

Body background color

You'll notice how the white colored page doesn't match up with the grey background of the html-logo picture. There's two ways to fix this: either edit the image so it has a transparent background, or change the background color of the document to match the image. The second one is easier, so let's do that for now.

First, use the Eyedropper to get the hex code of the color of the image by clicking anywhere on the background of the image with the eyedropper active. You'll find that it is #25272a.

Now, go to the styles.css file and add this snippet:

body {
    background-color: #25272a;
}

Go back and refresh the page. You should see the page background color change to match that of the image.

If reloading the page doesn't change the style, open up the Browser inspector, select the element for which you changed the style, and check if the CSS rule has been applied. If it shows up in the inspector, then there is something wrong with the CSS (syntax, invalid value, wrong file name in the import etc.). Otherwise, reload the page with cache by hitting ctrl + shift + r

Text color

We have a new problem now. You can't see the text! So let's change the text color. This is done by assigning a value to the color property.

body {
    background-color: #25272a;
    color: honeydew;
}

honeydew is one of the valid colors recognized by browsers, and is a very light shade of creamy-white-yellow. Feel free to choose a different text color though, as long as it makes the text visible.

Font family

Now I want to change the font. There's nothing wrong with it, I just want a different one. I like Trebuchet MS, but you can pick any font you want. To assign a font, the font-family property has to be used:

body {
    background-color: #25272a;
    color: honeydew;
    font-family: 'Trebuchet MS', sans-serif;
}

This changes the font to Trebuchet sans-serif. Reload the page to see the changes.

You can look up fonts online to choose one that is suitable for your page. You can also import a font if it is not natively supported by a browser.

Inheritance

You'll notice that when a property is added to the <body> tag, it changes the values for all tags inside it (i.e. I did not have to add styling specifically for the <p> tags and the divs and headings etc.). This is because, when styling is applied to an element, the same properties are inherited by all elements nested within it. This is why, if I want to change a property for every element on the page, I just need to assign it to the <body> tag.

I can later overrule a property by giving a more specific selector (i.e. I can add a new color: red to the <p> tag, which makes it so that the <p> tags have red text but the rest of the page remains as-is).

Hyperlinks

You'll notice that the hyperlinks have not changed color, even though we specified a different color for the text. This is because the <a> tag has a different default color that overrules any color specified earlier. We need to define a new rule to change the color specifically for the <a> tag

Note that hyperlinks are often colored differently from the rest of the text to highlight them.

In the CSS file, add this new rule below the body tag rule:

a {
    color: yellowgreen;
}

Now reload the page, and you'll see the links are colored yellowish-green.

Image dimensions

Let's go to the html-logo image. You'll see that it is quite large, and we want to resize it to make it smaller. One way is to give it a static/absolute height and width:

#html-logo {
    width: 300px;
    height: 176px
}

Note that we use the id as a selector here to specify the styling only for this image.

You'll see the image get smaller, but it also means you need to "hardcode" the values. You could use relative measurements so that the image gets bigger/smaller according the screen size, but that is left as an exercise.

Don't forget the divs

Remember our "long-div" and "short-div" classes? Let's use those to assign some properties.

For the "long-div", I might want the text to be italicised, like this. I can use the font-style property for this:

.long-div {
    font-style: italic;
}

As for the "short-div", I want something called "small-caps", which is when the font appears in all capital letters but sized according to the smaller letters. See for yourself with the font-variant property:

.short-div {
    font-variant: small-caps;
}

The page so far

So far, these are the styles we have added:

body {
    background-color: #25272a;
    color: honeydew;
    font-family: 'Trebuchet MS', sans-serif;
}

a {
    color: yellowgreen;
}

#html-logo {
    width: 300px;
    height: 176px
}

.long-div {
    font-style: italic;
}

.short-div {
    font-variant: small-caps;
}

The page should look like this:

Next steps

Next, we'll continue adding some style to the buttons, and introduce pseudoelements and pseudoclasses.

PreviousThe Box ModelNextAdding Styles - Part 2

Last updated