Adding Styles - Part 2

Adding styles - part 2

Continuing from the previous section, let's add some more styles to our page.

The buttons

The buttons look rather plain for now, but that won't be true for long. Let's change some of the properties.

button {
    background-color: black;
    color: white;
    border: solid rgb(160, 78, 146) 3px;
    border-radius: 15px;
    margin-left: 5px;
    padding: 5px 8px 5px 8px;
}

So what's happened here? Let's take a look:

• background-color: black; - this just changes the background-color of the button to black

• color: white - this changes the color of the text in the button to white

• border: solid rgb(160, 78, 146) 3px - this gives the button a solid 3-pixel-thick border that is colored in with a shade of purple.

• border-radius: 15px - this allows me to curve the corners of the border of an element. In this case, it has a radius of curvature of 15 pixels.

• margin-left: 3px - this adds 3 pixels worth of space on the left of the element (remember what a margin is?)

• padding: 5px 8px 5px 8px; - this adds padding on the inside of the button. Going clockwise, it gives 5px padding at the top, 8px on the right, 5px at the bottom and 8 px on the left.

Remember the useless button?

Let's change the styling of the "useless-button" a little. This button, as you may recall, does nothing (hence its id). Recall also that we gave it the id "useless-button" so we can select the element by its id and assign some styling to it. I'm just going to add 1 change, but feel free to add as many as you'd like.

#useless-button {
    border-radius: 0;
}

Here, I have reduced the curvature of the border to 0, i.e. the corners are no longer curved.

Exercise

Try adding some styling to the form and/or the input field, and maybe to the other elements in other ways.

Pseudoelements and pseudoclasses

You may have noticed some sites have buttons or other elements that seem to change their appearance/style when you, for example, hover over them, or click them. This is achieved by pseudoelements and pseudoclasses, which are essentially used as styling rules for elements and are applied when an action is done on the element.

In general, styling can be added for the pseudoclasses/pseudoelements as follows:

element:pseudoclass { /* single colon */
    /* styles */
}

element::psuedoelement { /* double colon */
    /* styles */
}

A full list of these pseudoelements/classes can be found here but for now let's use one pseudoclass in particular, the :hover pseudoclass.

This pseudoclass allows us to define styling that will be applied when the user hovers over an element. Let's apply it to our button:

button:hover {
    font-weight: bold;
    border-radius: 5px;
}

Nothing much going on here except two things:

• font-weight: bold; - this makes the text bold

• border-radius: 5px; - this changes the border radius to 5px

Reloading the page shows no obvious changes. But when you hover your cursor over the element, you'll see the changes come into effect:

There are many more possible pseudoelements and pseudoclasses that can help make a complex webpage more interesting and dynamic, but for now let's leave it at this. Feel free to look through the resource above to see a list of pseudoelements; assigning style to them is the same as assigning style to any regular element.

Final result

Now that we're done adding some style to the document, this is the end result:

The CSS file should look like this:

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;
}

button {
    background-color: black;
    color: white;
    border: solid rgb(160, 78, 146) 3px;
    border-radius: 15px;
    margin-left: 5px;
    padding: 5px 8px 5px 8px;
}

#useless-button {
    border-radius: 0;
}

button:hover {
    font-weight: bold;
    border-radius: 5px;
}

Our page now has some structure, thanks to HTML, and a little style thanks to CSS. In the next section, we'll look at adding JavaScript to the page to add some interactivity.