An Introduction to CSS: Styling Your Web Pages [Part 2]

If you missed our last post in the series you can find it here: Intro to CSS [Part 1].

Table of Contents

Lets talk Layout

In the last article, we looked at how to style the content of our web pages with CSS Selectors. In this article, we will continue our introduction to CSS by looking at how to modify the layout of our pages. We will also look at how to use CSS to control the size and spacing of elements on a page.

The Box Model

To start we should get familiarized with the box model. This is a way of describing how elements are laid out on a web page. It consists of four parts:

• Content area: the area inside the element’s border.
• Padding: the space between the content area and the border.
• Border: the line that separates the padding from the margin.
• Margin: the space between the border and the edge of the page.

You can use CSS to manipulate the box model by setting properties for each of these parts individually. For example, to add padding to an element, you can use the padding property:

.className {
  padding: 10px;
}

This will add 10 pixels of space around the content of the .example element.

Example Box Model:
+-----------------+
|     margin      |
|                 |
| +-------------+ |
| |   border    | |
| |             | |
| | +---------+ | |
| | | padding | | |
| | |         | | |
| | | content | | |
| | |         | | |
| | +---------+ | |
| |             | |
| +-------------+ |
|                 |
+-----------------+

To see this in action You can go to the browser and right click on any page element and select Inspect Element or Inspect. You might have to click the Select an element in the page to inspect it or press `Ctrl + Shift + C. This will allow you to hover over any element on the page to see its box model.

You can use CSS properties like padding, border, and margin to control the size and spacing of the different areas of an element, but more on this later.

CSS Units

One of the biggest parts of styling is figuring out how to scale content. Before we can do that we need to understand the unquie units of measure within CSS. Here are some of the most commonly used units:

CSS Layouts

CSS provides a range of techniques for creating layouts on a web page. Here are some of the most commonly used techniques:

• Floats: Allows you to move an element to the left or right of its container.
• Flexbox: Allows you to align and distribute content within a container.
• Grid: Allows you to create a grid of columns and rows to lay out content on a page.

Floats

The float property allows you to move an element to the left or right of its container. This is useful for creating layouts where you want to have content on the left and right side of a page. We can use the float property to move an element to the left or right of its container.

/* Float an element to the left */
.float-left {
  float: left;
}

/* Float an element to the right */
.float-right {
  float: right;
}

Flexbox

The flexbox layout is a one-dimensional layout method for laying out items in rows or columns. It allows you to align and distribute content within a container. The flexbox layout is defined by a set of properties that are applied to a parent container. These properties control how the child elements are laid out within the container.

/* Define a flex container */
.flex-container {
  display: flex;
}

/* Define a flex item */
.flex-item {
  flex: 1;
}

Grid

The grid layout is a two-dimensional layout method for laying out items in rows and columns. It allows you to create a grid of columns and rows to lay out content on a page. The grid layout is defined by a set of properties that are applied to a parent container. These properties control how the child elements are laid out within the container.

/* Define a grid container */
.grid-container {
  display: grid;
}

/* Define a grid item */
.grid-item {
  grid-column: 1 / 3;
}

CSS Properties

CSS provides a wide range of properties for styling and laying out content on a web page. Here are some of the most commonly used properties:

CSS Selectors

CSS selectors are used to select elements on a web page. There are many different types of selectors, but here are some of the most commonly used:

Applying CSS Example

Lets take what we have learned about CSS and apply it to a simple HTML structure. We will start by creating a new file called index.html and adding the following code to it:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css" />
    <!-- Don't forget this line! -->
  </head>
  <!--This is named container, because it contains the h1 and p tags-->
  <body class="container">
    <!-- Notice we have 2 h1 tags but they're styled differently -->
    <h1 class="title">My Web Page</h1>
    <!-- We want easy to understand class names, so we use something like PageHeader-->
    <h1 class="pageHeader">Welcome to my styled Webpage</h1>
    <p>This a very simple web page.</p>
  </body>
</html>

Next, we will create a new file called styles.css and add the following code to it:

.title {
  color: red; /* Set the text color to red */
  font-size: 32px; /* Set the font size to 32px */
  font-weight: bold; /* Set the font weight to bold */
}

.container {
  display: flex; /* Make the container a flex container */
  flex-direction: column; /* Make the container display items vertically */
  justify-content: center; /* Center the items vertically */
  align-items: center; /* Center the items horizontally */
  width: 100%; /* Make the container fill the entire screen horizontally */
  height: 100%; /* Make the container fill the entire screen vertically */
  background-color: #eee; /* Add a background color */
}

.pageHeader {
  font-size: 24px; /* Set the font size to 24px */
  font-weight: bold; /* Set the font weight to bold */
}

p {
  font-size: 16px; /* Set the font size to 16px */
}

Now, if we open index.html in a web browser, we should see the following:

Feel free to play with the code here and see how it affects the page!

See the Pen Simple CSS by Mark Spratt (@hopelezz) on CodePen.

TODO:

• Add a border to the container
• Change the color of the title to blue
• Change the font size of the title to 48px
• Add a text shadow to the title
• Change the background color of the container to purple
• Try playing with Grid instead of Flexbox. What happens? (Don’t forget to use the grid-template-areas property!)

To Wrap Up

CSS is a powerful tool for designing and styling web pages. In this article, we covered the basics of CSS, including syntax, selectors, specificity, and layout properties. By mastering these concepts, you can create beautiful, responsive web pages that look great on any device. In the next article, we will look at how to use CSS to create animations and transitions.

Resources

I highly recomend you check out the following resources to learn more about CSS:

• CSS Reference
• CSS Tricks
• Flexbox Froggy