Skip to main content

The holy trinity of the CSS

• 5 min read
Web Development

Older Article

This article was published 6 years ago. Some information may be outdated or no longer applicable.

Now that I’ve finished with HTML, I started adding some design to the “skeleton” of my web page. This article isn’t about colour pickers or background design. It’s about the concept of CSS itself.

I’ve tried to summarise the three main CSS concepts (Box model, Flexbox and Grid) so you can understand the approach to CSS. I’ll also present the layout of a web page that you can build by combining these 3 CSS models to position content.

CSS Box model

The box model is essential for web page design. It shows that content isn’t just a line or phrase on the page, but that it also carries some “hidden” elements.

If I write a paragraph “CSS box model is the fundamental of design”, it’ll appear as a line of text. But it’s built from different boxes, as shown here:

(https://seenthis.net/messages/759834)

We need to examine the model from the inside out.

The first box (orange) is our content. No further explanation needed.

The second box is the padding. It defines the space between the content and the border. We can add properties to a content’s border to make it look better. These properties define the empty space between the content and the border. The value determines the distance of the content from the sides.

Two options to define this distance, both producing the same result.

The first (and longer) version spells out each value:

p {
  padding-top: 15px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 10px;
}

The second version is shorter, representing the values clockwise from the top:

p {
  padding: 15px 10px 15px 10px;
}

In padding, you can also define width.

The next “box layer” lets you design the border of the content. It’s the thin line between padding and margin (dark blue in the figure above).

The border is invisible by default, but you can make it any colour or change the design to a red dotted line, a blue border, or whatever you need just on the top of your content.

By specifying which border you’d like to design, you can style each side of the border differently.

For example, the following will produce a dotted, red, slightly rounded border with solid style on the sides.

See the Pen KKwjObg by Balázs Kemenesi (@KemenesiB) on CodePen.

Last in the box model is the margin. In terms of positioning, it works like padding, but it defines the distance between elements.

Setting the margin property to auto positions the element horizontally to the centre of the page. You can also set the margin value to “inherit” so that an element inherits the value from its parent element.

Example?

Flexbox

CSS Flexbox is an excellent replacement for Floats (which let you place an element on the right or left side of the container, causing text to wrap around it). With Flexbox, you can define the layout more naturally, not just horizontally but with full control over your web page layout. Flexbox defines content in containers and provides different positioning and resizing solutions. These containers hold the actual content: the “flex item”.

To use the Flexbox layout, add this to your code:

.mainmenu {
  display: flex;
}

Then you can start designing your layout. The four main properties you can adjust:

  • Alignment

justify-content for positioning, grouping and stretching flex containers. align-items for positioning flex items inside the container. align-self for aligning items individually.

  • Wrapping

flex-wrap gives you more control over flex items. It prevents content from slipping and creates an “invisible grid.”

  • Order

flex-direction orders containers vertically or horizontally (reverse too) with a single line of code. order swaps elements.

  • Size

flex defines the width of individual items in a container. It uses numbers that scale the size relative to other elements.

CSS Grid

The grid system also helps with layout and positioning. It creates a hypothetical grid on your webpage so you can place content into transparent containers. Think of it as having an invisible table in the background.

Just like Flexbox, you need to declare you’re using the Grid model:

p {
  display: grid;
}

A grid has columns (vertical lines) and rows (horizontal lines), plus gaps between them that you can adjust. To set the size of your grid, define the number of rows and columns. In this example we want four rows and four columns (so we add four values):

p {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rowss: auto auto auto auto;
}

(https://kipalog.com/posts/CSS-Grid-module-layout—items—Phan-2)

These lines function as a map when positioning an element.

After you’ve “mapped” the position you want, you give that information to place the items.

There are different ways to position an element. The most precise is positioning by start/end lines, following this order: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at:

button1 {
  grid-area: 3/2/3/4;
}

This positions our element between the 2nd and 4th column lines, limited between the 3rd and 4th horizontal lines.

Conclusion

The methods above describe only positioning, but that should be the first step in designing a page. Without it, the page would just look like a simple document with everything stacked below each other.

When I started out, it helped a lot to plan everything on a blank piece of paper with a pen. It’s easier to visualise the design and positioning that way.

Once the positioning is in place, you can move on to the rest of the design: colours, animations and the other tricks that make a page catch someone’s eye.