CSS From Zero to Advanced Last Part: Design a website

Let’s Learn how to layout a website

1. Introduction

2. Reminder block and inline tags

3. Width and height

4. Margin and Padding

5. Overflow

6. Word-wrap

7. FlexBox

8. Float property

9. Display

10. Vertical-align

11. Position: absolute and others

Introduction

What is shown ahead in a general and simple way is the standard of any website. In practice of course this may change a lot, depending of the client needs.

Reminder block and inline tags

• Block tags → always have a jump lines before and after
• Inline tags → always inside a block tag.

Width and height

Only applicable on block tags; The value is in px or percentage (adaptability with the screen). You can define also min and max for these properties.

Example:

Margin and Padding

There are two types of margin:

• Inside → padding with value in px
• Outside → margin with value in px

Default margins are different for all block tags, for example there is no margin for <div> tag.

Default margin for <di> tag.

Now let’s give it some space to breed.

And now margin.

Margin and padding are applying by default at all sides of the block. If you want to specify for particular sides then you have to use:

• margin-top
• margin-bottom
• margin-left
• margin-right
• padding-top
• padding-bottom
• padding-left
• padding-right

In the first example all the sides are specified, there is a second example:

50px top and bottom and 20px are left and right.

For center alignment of blocks there are two rules:

• Define a width
• Margin value auto

Overflow

When you are specifying the size of the blocks sometimes your text inside is going to be bigger than your block.

We have four values to face this:

• Hidden: the text is cut and no visible

• Auto: (recommended) browser adjust automatically the needs for your block

• Scroll : add scrollbar. This one looks pretty much the same as Auto
• Visible (default)

Word-wrap

If you have to place a very long word in a block, which does not fit in the width of your block word-wrap makes it possible to force the break of very long words.

The problem

First solution

Second solution

Flexbox Concept

The principle of layout with Flexbox is simple: you define a container, and inside of it you place several elements. Imagine a box in which you put in several objects: this is the principle.

FlexBox CSS Properties

Display

By default your containers, block tags are always vertical because they break the flow of the page. To initialize flexbox you need to apply the following property on the container that is containing the element or elements that you want to align horizontally.

Flex-direction

We can control the alignment of the elements within a container within the flex property. Considering the principal axis, in other words the x axis and the secondary axis, the y axis.

• Row
• Column
• Row-reverse
• Column-reverse

Instead of column-reverse you can write any of the three other options.

Flex-wrap

Sometimes you have many elements inside the container, in order to tell them the flow that will follow themselves automatically flex-wrap comes in handy.

• nowrap
• wrap
• wrap-reverse

Justify-content: For x axis

It aligns the elements along the horizontal direction the X-axis:

• Flex-start
• Flex-end
• Center
• Space-between
• space-around

You may write any other of the 4 options left instead of space-between.

Align-Items: For y axis

It aligns the elements along the vertical direction. The Y axis also known in some books as the secondary axis.

• Flex-start
• Flex-end
• Center
• Baseline
• Stretch

Here is an example of everything that we’ve seen:

.box is our container

Now let’s add more advanced values:

Align-self

Sometimes you need an element to stick out of the group. Here is an example:

Remember box is our container

Here we take element one and three to place them out of the group.

We can take one, two or as many elements as we want and place them specifically where we want. As you can see we need to select the container and the specific element to move out of the rest, write align-self and lastly write the instruction that we want.

Align-content

Remember flex wrap? Sometimes when you have so many elements, you want to control more than the flow that is moving those elements. You want to control the way they arrange on the screen.

• flex-start
• flex-end
• center
• stretch
• space-between
• space-around

There are also another values for internet explorer 10, but these are very rarely used since internet explorer… Well…

Order

It’s simply choosing the order organization. By default elements appear the same as they are written on the code.

Sintaxis:

item { order: number | initial | inherit; }

By default all elements have the value 0. That means again that they will appear as written in the code.

Example:

.flex-item:nth-of-type(3){ order:-1; background-color:yellow;}

The third element .flex-item has a -1 value, that means that it will appear ahead of the other elements, as long as the other elements keep their 0 value.

Second example:

.flex-item:nth-of-type(1){ order: 1; background-color:tomato;}

The first element .flex-item has a 1 value, that means that (yes what you are thinking is correct) it will appear behind of the other elements.

So let’s take a look of how it will look:

.flex-item:nth-of-type(3){ order:-1; background-color:yellow;}
.flex-item:nth-of-type(1){ order:1; background-color:tomato;}

Element 2 and 4 have a 0 value.

Exercise

I know what you are thinking, you’re thinking that, it seems so confusing and troublesome. Believe me, with effort and practice you will find flex-box quite useful. I recommend you to use the following game:

Flexbox Froggy

It’s kinda fun and you will practice without getting too much frustration.

Float property

Changes the normal flow of an element. It defines how an element should be floating and the place of an element on its container’s right or left side.

float: none|inherit|left|right|initial;

Display

It defines how the components(div, hyperlink, heading, there are many) are going to be placed on the web site. Just like the name suggests the property is used to dictate the display of the different parts of the site.

display: value;

Block is the default div value and places the element one after another vertically.

Inline

The default property of anchor tags. It is used to place the div inline in a horizontal manner. The inline display property ignores the height and the width that is set by the user.

Inline-block

Using both properties mentioned above, block and inline, aligns the div inline but the difference is it can edit the height and the width of block. Basically, this will align the div both in block and inline fashion.

None

It hides the div or the container which uses this property. Using it on one of the div it will make job cleaner.

Vertical-align

How you would solve the baseline problem here?

First of all, we can use this property because we changed display property into inline-block.

• Baseline (default) : align the base element with the base of the parent element
• Top : align on the top
• Middle : centered vertical alignment
• Bottom : align on the bottom
• A value in px or percentage.

Position: absolute and others

Static

Default value that any element has. If you have multiple <div> let’s say one after the other, they will appear on the page directly below one another. When static is used things like top, bottom, left or right have no effect at all. To fix that you have to give position a value:

Fixed

Identical to the absolute positioning, which will be explained below, but this time, the element remains visible, even if one goes further down the page. It’s a bit like the background-attachment: fixed. The element will be taken out of the normal flow and be placed exactly where you want it to be, even if you scroll down or up it will be there. It must have a top or bottom position set, otherwise it will simply not exist on the page.

Sticky

It’s pretty much the same as fixed. But there is a nice aesthetic characteristic. When you scroll up or down fixed simply doesn’t move. Sticky on the other hand at the beginning behaves like relative at the moment the sticky element touches the edge of the viewport this element will become fixed.

Relative

It works the same way as static, but it allows you change an element's position. You are locking the element to be positioned relative to other elements on the page.

If we have two <div> both with static values, but the second has a top: 50 px value this value won’t work remember? Well if you just add position relative now will work.

Parent child

Let’s write the following:

Previously maybe you thought “locking? locking to what?” Well here the child is locking its position to its parent. This will look like this:

A flat element… It’s just the other element is right behind it! Top is 0 and left is too.

Z-index

It controls the vertical stacking order of elements that overlap. Affects elements that have a position value other than static which is the default.

If you want to fix the pink rectangle from the previous example you have to modify top, left or both and in conjunction with z-index it will start to look like that hard pink and green squares.

Absolute

Allow us to place an element anywhere on the page (top left, bottom right, center, etc.)

Once absolute has been stablished, now you have to decide where to put it using one or more of the values below:

• Right : position relative to the right of the page
• Left : position relative to the left of the page
• Top : position in relation to the top of the page
• Bottom : position relative to the bottom of the page.

Values are in px or %.

Be careful with absolute since pretty much places the element on another layer different from the natural web site flow. For example if you don’t pay attention enough it may be on top of other elements, yes covering them. For example: you can have two <div> one inside of another, the parent set to relative and the child set to absolute. The child will appear on top of the parent element but only can move within its parent space, considering of course that the parent has its position set, like in this case, because if it doesn’t have it, then the child with look one step back searching for an element that has its position set. In this case because there are no more elements then the child will use the <body> itself as a parent. Let’s say that there are lots of elements, then the child will go back until it finds an element that has its position set.

The absolute positioning is not necessarily always compared to the top left corner of the window! If you set an absolute block A that is in another block B, itself set to absolute (or fixed or relative), then your block A will have his origin set to the upper left corner of block B.

If you find my content helpful please consider making a donation at:

https://ko-fi.com/devondeveloper

This content it’s free but believe me, if you take a coding bootcamp or web development course there is no real difference with the information you just read. By making a donation You are helping me to keep creating Great Quality content for You, so you can become the Best web developer you can be.

Javascript Fundamentals Part 1: Intro

Back to the top.