MAKING LAYOUTS WITH CSS (Pt a) - Part 5 of Frontend Development Series

This article was first shared on my blog - Dillion Megida's Blog

On the series, today's topic is Making Layouts With CSS - designing layouts with CSS.

We have been made to understand that CSS gives beauty to our webpage by giving it styles. There are a lot of libraries out there such as Bootstrap which has already made layouts designed for you, but I'd advise that before going into such libraries, understand how they work. They work with the same CSS rules.

According to our guideline - Roadmap - Frontend, we have;

Table of Contents

• Floats
• Positioning
• Display
• Box-model
• CSS Grid
• Flex box
• Conclusion

It's a bit of a long read, so why not grab some coffee ☕

I would explain Flexbox and CSS Grid in my next article on this series.

Before I dive into the contents, I'd like to state some CSS Tips
Name your classes properly - Logic-wise and proper casing, advisably, camelCase
Understanding id and class - id is unique for only an element, and cannot be reused. class can be used for several elements.
!important - Once stated with a value for a property directed towards elements, such values cannot be overwritten.
Understand measurements - px, em, rem should be used appropriately to ensure consistency in pages.
Website Compatibility - Some websites don't accept certain properties. A solution to fixing this sometimes is to add certain prefixes.

Floats

.element {
    float: none | right | left;
}

This property allows an element to be positioned at the right of the left side of its container. The none simply means, do not float.
Take a look at this code,

<!-- index.html -->
<div class='container'>
    <div>

    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

/* style.css */
.container {
    width: 400px;
    background-color: lightblue;
    height: 400px;
}
.container div {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.container p {
    font-size: 30px;
}

This is the normal result we expect to happen, since the div element is stated before the p element. Lets make the div float to the right.

/* Add the property of float to the above program */
.container div {
    float: right;
}

Our result is,

What do you notice?

The div is floated right, and not only that, the text wraps the div. The text occupies the available spaces. This is the basic implementation of float.
Read More on CSS Floats here - CSS Float

Positioning

This property allows you to place elements in certain sections of your page.
Some methods applied may be restricted by the parent element while some others allow the element to be independent.
The positioning values for CSS are static, fixed, relative and absolute.
The elements are further positioned using top, down, left and right properties.

These properties can only be used when the display property is set.

- position: static

This is the default positioning of any element. It's positioned depending on the flow of the page. They are not affected by top, bottom, left or right.

- position: relative

This positions an element relative to its default position. When top for example is applied, it pushes the element downwards. The space left at the top of the element does not accommodate any other element. Such elements are dependent on the parent element to determine it's position.

- position: absolute

This property makes an element loose possession of its default position thereby allowing other elements to take up its space. When top is applied, it acts relative to the parent element, but it doesn't push any other element.

- position: fixed

This value ensures that an element is given a particular position irrespective of where it is placed. The element is independent of the parent element as it can be placed anywhere. Instead, they are positioned relative to the viewport. Therefore, any page scrolling whatsoever doesn't disrupt the position of the element. They also lose possession of the space they occupy by default hence, other elements can occupy their former positions. For example, position: fixed; top: 0 would take the element to the top of the page.

The difference between fixed and absolute is that fixed is positioned relative to the viewport while absolute is positioned relative to the parent element. Similarities remain that they do not affect other elements unlike relative, static, and sticky.

- position: sticky

This value toggles between relative position and fixed position. Some conditions are declared for the element. The element starts from the relative position, as soon as those conditions are met, the position is changed to fixed. For example, position: sticky, top: 0. Here, as soon as the element reaches the top of the browser (maybe after page scrolling), it becomes fixed.
Whatever makes the element to lose its top property of 0, it becomes relative.

Display

This property as the name implies controls how your elements are displayed. There are many different values for this property but I'd be explaining the major ones. The default display value is either block or inline. Each of determined in different use cases.

- display: block

The value block allows the element to be displayed on a new line and stretches to the left and right of the maximum space available. We have block-level tags such as <p>, <h1-h6> and so on, which as you may have noticed, maximizes the available width, hence, other elements are pushed to a new line.

- display: inline

The value inline allows the element to just take up the maximum required width. It doesn't display a new line except there's no available space. Inline elements includes <a>, <span>, etc.

With display: inline, properties such as height & width would take no effect because as I mentioned, the elements only take up the maximum required space it takes for them to be displayed. This is only possible in display: inline-block.

Note: These are default values. You can override them e.g manually changing the display of <a> elements to block or change the display of <p> elements to inline depending on how you want them to be displayed.

- display: none

The value none when used with the display property on a browser simply tells the browser that while rendering the page, the element should be removed. An alternative to this is a property visibility with value hidden. The difference between these methods is that display: none removes the element from its position thereby allowing other elements to occupy that area, while visibility: hidden ensures that no other element occupies that area, but the element remains invisible.

- display: inline-block

The value inline-block allows the elements to behave like inline elements, but properties like height and width can be applied to them.

- display: flex

The value flex displays an element as a block-level flex container.

- display: grid

The value grid displays an element as a block-level grid container.

These are the major display values. You can find a list of other values here and you can read more on display property here

Check out this W3Schools Resource for the position property.

Box-model

Each element on your page is treated as a box.
The Box model refers to everything that surrounds an element in a box. Such things are padding, margin, borders and the actual content.
For a default element as a box, say <p class='name'>Dillion

and we have this css;

.name {
    width: 400px;
    padding: 10px;
    margin-left: 30px;
    border: 2px;
}

The total width of the box is 400px (width of content) + 10px * 2 (padding-left and padding-right) + 30px (margin-left) + 2px * 2 (border-left and border-right) ======= 454px. Our content is 400px, but the width of the box is 454px.
This is the concept behind the box model - where are element is treated as a box with extra properties and the content itself.
Read more on box models here

As I earlier stated, I would be explaining CSS Grids and CSS Flex in my next article.

Conclusion

With appropriate usage of the above properties for layouts, a beautiful looking webpage would be the outcome.

I hope it was worth the read.

I believe you understand the concept of Layouts with CSS now (excluding flex and grid). Kindly refer to the shared articles above if you don't understand completely.

Watch out for my next article on this series.
You could reach out to me on Twitter @iamdillion

Thank you 🤗

Conclusion

Comments

[Nicholas Stimpson]

In one example, you've written

/* Add the property of float to the above program */
.container div {
    display: float;
}

where you meant

/* Add the property of float to the above program */
.container div {
    float: right;
}

[Dillion Megida]

Thanks for the correction, I'll change that now

[DrMandible]

Good stuff. Small typo: under "- display: block" you wrote "flex" but you meant "block". Looking forward to the next part.

[Dillion Megida]

I actually meant grid, I just realized. Thanks so much

[Tconcept22]

Very interesting,
Thanks. But do you have YouTube video on Javascript complete package
[e-mail]

[Dillion Megida]

Thanks for the compliment, I don't have a youtube channel.

[syedadil2k19]

Thanks for this. I had been ignoring CSS but feeling its need, now that I've gotten into Angular. This is a perfect start for me.

[Dillion Megida]

I'm glad it was helpful.
Thank you