Additional CSS Properties

Lesson Content

Additional CSS Properties

Introduction

In the last lesson, you learned about some of the different text properties like font-size, font-weight, letter-spacing, and font-family. However, those aren’t the only properties we can use to style our text/elements! In this lesson, you will learn more properties to style elements like color, background-color, border, and many more! Let’s get started!

Overview

By the end of this lesson, you should be able to:

- Understand how to use the color property and the different parameters we can pass for that property
- Understand how the background-color property works and how to use it
- Understand how to use the border property and the different parameters we can pass for the property
- Understand the width and height properties in CSS and how to use them to edit the sizing of elements

Starter Code

Just like the last lesson, we will have some starter code that we will edit throughout todays lesson. Here it is:

<body>
    <p class="example1"></p>
    <p class="example2"></p>
    <p class="example3"></p>
    <p class="example4"></p>
</body>

Incase you wanted to code along with the examples (and we highly encourage you to!), make sure to use that code in your HTML file. (Also make sure to link your CSS to HTML!)

The color property

The first property that we will look at in this lesson is the color property. The color property is very simple to understand, all it does is it changes the color of text to whatever color is specified.

There are many ways to declare colors using CSS, but we’ll start with the most basic way; using color names. You can see the code on the left and the output on the right!

(The text on the right has been added with HTML, just focus on the actual color property for now)

.example1 {
  color:red;
}

.example2 {
  color:blue;
}

.example3 {
  color:purple;
}

.example4 {
  color:darkgreen;
}

The easiest and most simple way to declare the color of text in CSS is just to use the color property and enter a common color name like red, green, blue, etc. If you are curious on all the different color names available in CSS currently, you can check them all out here.

Using color names are great if we already have our color in mind, but what if we wanted more customization with our colors? What if we want a more darker shade of red instead of just the class color of red? Luckily, the color property also takes in rgb values and hex values as parameters. Here is the syntax for rgb values:

.myclass {
    color: rgb(0,0,0);
}

.myclass2 {
    color: rgb(163, 91, 17);
}

RGB stands for red, green, blue. In CSS, these values are used to specify the color of an element.

Each color is represented by a value between 0 and 255. The value 0 means that the color is not present, while 255 means that the color is at its maximum intensity.

For example, if the red value is 255, the color will be fully red. If the green value is 0, the color will not have any green in it. Let’s take a look at how these work in CSS using our color property.

.example1 {
  color:rgb(0,0,255);
}

.example2 {
  color:rgb(0,255,0);
}

.example3 {
  color:rgb(255,0,0);
}

.example4 {
  color:rgb(186,86,131);
}

By changing the different red, blue, and green values in the RGB scale, we can effectively create any color we want! You can go to a website like this RGB color picker and create custom colors easily.

RGB isn’t the only way we can change the color of our text however. Another way to change the color of our text in CSS is using hex values. You may have seen them before, here is the syntax for using hex values:

.myclass {
    color:#ff0000; /* This is the color red */
}

.myclass2 {
    color:#0000ff; /* This is the color blue */
}

.myclass3 {
    color:#ee82ee; /* This is a shade of pink */
}

We won’t go into the specifics of using hex values in this lesson, but if you are curious about them, you can check out this awesome explanation by w3schools!

The color property is one that you will find yourself using a lot through CSS, so it’s always good to understand the different parameters and values we can give the property. In the next section, we’ll learn about the background-color property which is very similar to the color property which we just talked about.

The background-color property

Along with changing the text color of our text in CSS, we can also change the color of the background using the background-color property. Here is how it works:

As you can see, using background-color will change the color of the space behind the text. Notice how right now, the background color only takes up the space of the text. Later in this lesson, we will learn how to change the width and height of our HTML elements so that we can make the background take up certain areas of our website!

Just like the color property, we can use rgb values and color names as parameters for the background-color property. (Hex values as well).

In the example above, we are changing the background color of text, but we can change the background color of almost any HTML element, take a look:

We can change the background of almost everything; from buttons to lists to headers! background-color isn’t the only property that can be used on a wide variety of elements, other properties like border and width/height as we’ll learn about can be used on almost any HTML element.

The border property

Open up any website on the internet and you’ll most likely find the border property everywhere. From the text, to the buttons, to even the sections of a site, borders are those things that you don’t realize are there, but adding a few can really make your website much better! Here is how we use the border property in CSS:

We give three parameters for the border property. The first is the border weight, or how big thick our border should be. The second parameter is the border type, which just determines the style of a border, we’ll talk more about the different styles in a bit. Lastly, we have to enter a border color. We can use color names, rgb values, and more for this!

Now that we understand how to the syntax of the border property, let’s see a few examples in action:

.example1 {
  border: 3px solid red;
}

.example2 {
  border: 2px dotted green;
}

.example3 {
  border: 10px dashed rgb(7,182,213);
}

.example4 {
  border: 5px solid yellow;
}

As you can see in the examples, we can customize our borders anyway we want from changing the size, to changing the color, and even the style.

If you are curious on the different styles that we can use for our border like dotted or dashed, you can check out this lesson from w3schools! They go over all the different types of styles we can add to our border along with further customization.

The last thing we will talk about when it comes to borders is how to change ONLY one specific side, and it’s really easy. Here is a picture demonstrating it:

.example1 {
  border-top: 3px solid red;
}

.example2 {
  border-left: 2px dotted green;
}

.example3 {
  border-right: 10px dashed rgb(7,182,213);
}

.example4 {
  border-bottom: 5px solid yellow;
}

The above code would result in something like this:

We can change ONLY specific sides of our borders using the border <side> property. For example, if we wanted to change the left and right sides of our border, then we can use border-left and border-right. The same thing goes with top and bottom as well.

Obviously our borders don’t look that good right now, but with a little bit of styling and trial and error, we can make our borders look really good.

Using Width & Height

In one of the previous sections, we learned about the background-color property which allows us to change the background of certain HTML elements. One problem we encountered however was that the background would only take up the width and height of the text/element. What if we wanted to increase the size of the background? We can do this by changing the widthand height property. Take a look at this:

By setting a specific width and height for our HTML elements, we can not only change their size, but also change how other properties look like border, background-color, etc.

We can change the width and height of almost anything in HTML. Go ahead and try to experiment with these properties. Create a few lists, images, text, and change their width and height and add properties like background-color and border so you can see how they look!

Note:

- For now, we are using pixels as our unit of measurement because it’s the most simple to understand, but down the course, you will be introduced to different units of measurement like viewport units, percentages, and many more!

Practice

Although the text properties that we learned in this lesson are quite easy to understand, it’s always good to do some practice!

1. Start by setting up an HTML file and CSS file. Make sure to link them together.
  1. Create a <div> tag with some text inside of it. Any text will suffice.
  2. Set the background color by using some rgb value. It can be any color!
  3. Set the color of the text to darkgreen
  4. Add a border to only the left and right side of the text. The border should have a weight of 5px, the style of dashed, and a color of blue
  5. Set the width to 300px and the height to 150px
2. Let’s do that one more time to make sure we understand everything!
  1. Create a <p> tag with some text inside of it. Any text will suffice.
  2. Set the color of the text to gold
  3. Add a border to the top and bottom of the text. The border should have a weight of 8px, the style of double, and a color of indigo
  4. Set the width to 500px and the height to 250px
  5. Lastly, let’s add a background color using any rgb value you choose!

These practices don’t really accomplish anything “major”, but they serve to make sure that you understand the properties and allow you to play around with them. In the next lesson, we will learn the CSS Box Model which allows us to learn how to move items around our website!

Lesson Content