So, what can CSS actually do? Learn about basic CSS properties such as color, background-color, font-size and more…

Getting started

If you don’t already know the syntax and structure of CSS, check out my last article before reading this. If you know the CSS syntax already, let’s continue!

For this tutorial, we’re going to have some very basic HTML - we will be focusing on the actual CSS. Make a new project folder with index.html and style.css files in it. Add the following code to your index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic CSS properties</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>I am a heading!</h1>
    </body>
</html>

In this tutorial, we will be testing our styles on that <h1> element above. Now you’re ready go dive in!

The color property

The first property that I want to cover today is the color attribute. It does exactly what you’d think - changes the text color of an element. Open up your CSS code and type the following:

h1 {
    color: red;
}

If you don’t understand the layout of this code, you might want to go back to my CSS syntax tutorial for a quick reminder. Here, we are styling the <h1> with our color property, which has a value of red.

IMPORTANT NOTE - color is spelt the American way. Deal with it. If you spell it “colour”, CSS will have no idea what you are going on about. If you are getting annoyed right now, think of all the terabytes saved worldwide by removing that one letter 😛

When you preview your code, you should see this:

A red heading

So here we are giving color a value of red, but what values can we even give color?

Color names

Color names are like in the example above, where we used the color name red. There are common colors (such as yellow and blue) as well as less common ones (such as MediumSpringGreen or BlanchedAlmond).

You can see the full list of color names here.

NOTE: The next section goes into some more advanced color types. If you’re not interested, you can skip past.

RGB values

RGB stands for Red, Green and Blue, which are addded together to produce many colors. The values for R,G and B range from 0-255. Here is an example of an RGB color:

h1 {
    color: rgb(244, 188, 66);
}

Try replacing your existing CSS with this and see what happens.
A pink heading

RGBA values

This is exactly the same as RGB, except with the added A value, standing for alpha (opacity). The value for A is a decimal from 0.0 (completely transparent) to 1.0 (completely opaque). Try adding a 50% opacity to our rgb value from above - see if you can guess what the code will be:

h1 {
    color: rgba(244, 188, 66, 0.5);
}

Update your CSS file and see what effect it has on the text:
A pink heading with a 50% opacity

Hex values

Hex values are another way of writing RGB values (they do not support RGBA). Hex uses characters 0-f, in hexadecimal (base 16). Hex codes in CSS are made up of a #, followed by six characters - for example, #37e22b. Hex colors are made up of two-character pairs:

  • #37e22b
    • 37 - Red
    • e2 - Green
    • 2b - Blue

Sound confusing? Don’t worry - all that you need to remember is that they are another way of writing RGB and how to write them. Try replacing your CSS color value with the hex code from above:

h1 {
    color: #37e22b;
}

Now, preview your code and see what happens:

A green heading with a hex value of #37e22b

Hex values are the most used way of representing colors in CSS.

Other types of colors

There are a few less common color types allowed in CSS such as HSL and CMYK.

Color converter

If you need help converting colors, check out this handy tool.

Color picker

If you need help finding the RGB or HEX value of a particular color that you have in mind, check out this color picker.

The background-color property

The background-color property changes the background color of an element. It takes the same values as the color property (the types I discussed above). Remove your existing color property, and replace it with this:

h1 {
    background-color: lightskyblue;
}

Reload the page to see how the background-color property works:
A black heading with a light blue background

In the next tutorial, I’ll be teaching you how to make this look a lot better with the padding, width and height properties.

By the way - the stuff that we’re making at the moment looks TERRIBLE. But don’t lose hope - it all starts somewhere. You need to know the actual CSS properties and how they work before you can make complex stuff that looks good. That’s my inspiring pep-talk done for the moment 😛

The background-image property

Here is where things start to get fun - let’s play with some images! Like in HTML, images are linked from URLs (see this article). The same thing applies in CSS! Here is how you declare a background image in CSS:

h1 {
    background-image: url('https://codetheweb.blog/assets/img/header-img.jpg');
}

The single quotes are not necessary, but it is good practice to put them in.

Try replacing the background-color in your CSS with the background-image url from above. See what happens:
A black heading with an image as a background

It cuts off some of the image, but at least there is an image there! In this post, I’ll be talking about more cool ways to manipulate the background image.

OOOKAY. Now we’re done with colors and backgrounds!

The font-size property

This property is used to change the size of the text, and takes an amount of pixels as a value, eg. 100px. See if you can work out what the syntax will look like:

h1 {
    font-size: 100px;
}

Remove your background-image property and replace it with a font-size of 100px. Reload the page and see what happens:
A large black heading

WOAAH! Now it’s huge! Play around with the values and see what you think looks good.

The text-align property

This is the last property I’ll be covering in this tutorial. The text-align property is used to, well, align text. It accepts four values: left,right, center and justify. By default, text is aligned to the left in CSS. See if you can work out how to center it:

h1 {
    text-align: center;
}

Now, remove font-size fromm your CSS file (again so we can focus on text-align) and add the above CSS instead. Preview it and see what happens:
A centered heading

You can also align it to the right (with text-align: right;):
A right-aligned heading

Conclusion

Okay, that’s it for today! I hope you enjoyed it ;)

If you have any questions, feedback or need help then let me know below in the comments. If you liked this article, I’d love it if you shared it with your friends and joined the newsletter for new posts.

Have fun, and I’ll see you next time where I’ll be talking about CSS sizing and positioning. See you then!

This article is the second post in my Learn CSS series. You can view all my CSS tutorials in order on the learn CSS page — to help you along your coding journey.