Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

Website Layout

10 mintues

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Website Layout

A website is typically divided into sections such as headers, menus, content, and a footer.

Numerous layout designs are available to select from. Nonetheless, the structure outlined above is among the most prevalent, and we will delve deeper into it in this tutorial.

Header

Typically situated at the top of the website (or just below a top navigation menu), a header commonly features a logo or the website name.

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

Result:

Header

Navigation Bar

A navigation bar comprises a list of links intended to assist visitors in navigating through your website.

Example

/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links – change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

Result

Content

The layout in this section typically varies based on the target audience. Among the most common layouts are:

Single-column layout (frequently employed for mobile browsers)
Two-column layout (commonly utilized for tablets and laptops)
Three-column layout (primarily reserved for desktops)

We’ll develop a 3-column layout and adapt it to a single-column layout on smaller screens.

Example

/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* Responsive layout – makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Result

Tip: To create a 2-column layout, set the width to 50%. For a 4-column layout, use 25%, and so on.

Tip: Curious about how the @media rule works? Learn more in our CSS Media Queries chapter.

Tip: A more modern approach to creating column layouts is to use CSS Flexbox. However, Flexbox is not supported in Internet Explorer 10 and earlier versions. If you need to support IE6-10, use floats as demonstrated above.

To learn more about the Flexible Box Layout Module, check out our CSS Flexbox chapter.

Unequal Columns

The main content constitutes the largest and most significant section of your website.

Unequal column widths are frequently employed, prioritizing the main content with a larger portion of space. Side content, if present, is typically utilized for alternative navigation or to provide supplementary information related to the main content. Adjust the widths as desired, ensuring they collectively sum up to 100%.

Example

.column {
float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout – makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
    width: 100%;
  }
}

Result

Footer

Positioned at the bottom of your webpage, the footer typically includes details such as copyright information and contact details.

Example

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Result

Footer

Responsive Website Layout

By implementing portions of the CSS code provided earlier, we’ve developed a responsive website layout that dynamically adjusts between two-column and full-width column configurations based on screen width.