All about CSS3 for Absolute Beginners: Part 3
Hi everyone, I hope you're making great progress in this web development journey. Best of luck to all the curious future web developers and let's continue the ride of learning CSS.
Background Color
Earlier, we learned how to change the color of text such as a paragraph or a heading. Talking about containers like divs, we may also need to give a background color to a whole container. To test that, let's create a nice box and then fill it with a color of our choice.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
We made container a div in the body tag and gave it a class "box" to target it in CSS. Then we gave it a height and width of 200 pixels each to make it a box shape.
CSS Background Properties and the Box Model
In HTML, we can add an image on our webpage but it gives us less control. With the background-image property, it's going to be more adjustable and customizable. Moreover, the background property also accepts other values such as position, repeat and size, making it convenient to reach a desired effect for your webpage. Let's go through each value one by one.
background-image
To use this property, go ahead and create a nice box whose background is going to be your image. To make that, create a div and give it some width and height.
After that, you can give the path to your image exactly like how you would give it in the image tag's source (src) attribute. Give this path in the URL function. It would look like this:
.box {
background-image: url("images/headphones.jpg");
}
background-position
Your image may not fit nicely after using the background-image property. To fix that, we can use background-position. The value can be chosen from left, right, top, bottom, center or by giving x and y coordinates.
.box {
}
Try experimenting with different values to see the behavior.
background-size
This controls the size of the image. Sometimes, it may not fit into containers, so we will need this property. Mostly used values are cover and contain. Cover forces the image to fit inside the container, usually cropping it's edges. Contain would make it fit inside a container and ensure its fully visible without cropping anything.
.box {
background-repeat
.box {
Before we wrap up the background, notice that the code has become a bit repetitive. To make it short, we can use a shorthand property. Here is how it would work:
.box {
Box Model in CSS
The box model is a fundamental part of CSS and something that you will work with a lot in your CSS projects. To understand, consider the picture below:
.jpg)
This is a normal box that we have been building using the div tag. When we analyze it, it has some margin around it, then the border starts in which there is some padding and finally the content. Let's understand margin first:
Margin property in CSS
To analyze what margin does, create two boxes of the same dimensions and give them each a class called box. See the output, then add margin like this:
.box {
Now observe that there is a space between both the boxes. This is the margin between them. You can increase or decrease the quantity to make observations.
You will notice that margin is applied on all sides of the box. Sometimes we might want to give margin only on the top, bottom, left, right or maybe one or two of these. Then that's easy:
.box {
.box {
Border Property in CSS
To add a nice border around an element, use the border property in CSS. Here is how the code would look like:
.box {