I’m sure you are looking at other websites, and noticing that there are more than just a straight line of elements, that go straight down. So far, there hasn’t been a way to put elements side by side, or create unique formations of elements. This is what this last section will teach you!
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father
has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
The <span> element allows you to add different CSS elements to the same element without creating a new line break. This is useful if you want to color a certain word or phrase, like in the above example, or a good way to start creating horizontal content.
Containers is a pretty complex topic. Imagine you want to make a change to a large group of code, and you want to link a group of elements together. To solve this, you want to encase them all in a <div>. <div>s are among the most common element used in web development, so it is important to learn how they work. <div>s are just ways to group your code. You can also add CSS to <div>s and they will apply the CSS to the group. Combine with classes, and you can make selective CSS components.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Div Example</title>
<style>
/* CSS styles for the div */
.container {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto; /* Center the div */
text-align: center;
}
</style>
</head>
<body>
<!-- HTML content with a div -->
<div class="container">
<h1>Hello, World!</h1>
<p>This is a simple example of a styled div.</p>
</div>
</body>
</html>
believe it or not, this is centered on the screen
So far, all of our elements have been sticking to the left of our document, unless we add padding and margin. But even then, they are still technically sticking to the left. The CSS style flex allows us to change that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
/* CSS styles for the flex container */
.flex-container {
display: flex;
justify-content: space-around; /* Align items with space around */
align-items: center; /* Center items vertically */
height: 200px;
background-color: #f0f0f0;
}
/* CSS styles for the flex items */
.flex-item {
width: 100px;
height: 100px;
background-color: #3498db;
color: #ffffff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<!-- HTML content with a flex container and flex items -->
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
When typing the style display: flex on a container, you can now use other CSS styles on the children of the container to decide where each element will go on the screen in relation to the edges.
<aside> 💡 While this is only one example, there are hundreds of combinations of flex box that can be created. I highly recommend going to Flexbox Froggy (linked below) to learn more about flex box as I can’t talk about all of them in this guide.
</aside>
Instead of typing display: flex, we can type display: grid to turn our container into a grid where we can place elements in a table-like way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
/* CSS styles for the grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
gap: 20px; /* Gap between grid items */
}
/* CSS styles for the grid items */
.grid-item {
background-color: #3498db;
color: #ffffff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<!-- HTML content with a grid container and grid items -->
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
This follows the same as flex box as you add the display: grid to the container parent. In this case, however, you can add how you want to format the grid, and customize it how you want.