CSS Layouts

Hello, everyone! Welcome to the CSS Layouts lesson.

In this lesson, we will learn how to use CSS properties to create more complex and customized layouts.

What is layout?

Layout is the organization of elements on a web page. A good layout is one that is easy to use and pleasing to the eye.

CSS Properties for Layouts

There are many CSS properties that can be used to create layouts. Some of the most common CSS properties for layouts include:

• Float: Defines whether an element should float to the left or right of the page.
• Clear: Defines whether an element should prevent other elements from floating around it.
• Display: Defines the display type of the element.
• Width: Defines the width of the element.
• Height: Defines the height of the element.
• Margin: Defines the space between the element and other elements on the page.
• Padding: Defines the space between the content and the border of the element.

Examples

Let’s see some examples of how to use CSS properties to create layouts.

Example 1:

The following CSS code uses the float property to create a two-column layout:

.col-left {
  float: left;
  width: 50%;
}

.col-right {
  float: right;
  width: 50%;
}

Example 2:

The following CSS code uses the clear property to prevent elements from floating around an element:

.col-left {
  float: left;
  width: 50%;
}

.col-right {
  float: right;
  width: 50%;

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

Example 3:

The following CSS code uses the display property to create a grid layout:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  width: 100%;
  height: 100px;
}

Note

It’s important to use CSS selectors to control which CSS rules are applied to which elements. This will help keep your CSS organized and easy to maintain.

Summary

In this lesson, we learned about CSS layouts. We explored some of the CSS properties that can be used to create more complex and customized layouts.

In the next topic, we will learn about flexbox, a CSS property that can be used to create flexible and responsive layouts.

Compartilhar

Compartilhar

Siga-me