Day 42 CSS Layout

Display

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Examples of block-level elements:
​
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer
<section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

Examples of inline elements:
​
<span>
<a>
<img>

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

CSS Layout - Horizontal & Vertical Align

Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins

Center Align Text

To just center the text inside an element, use text-align: center;

Center Vertically - Using padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border

• dashed - Defines a dashed border

• solid - Defines a solid border

• double - Defines a double border

• groove - Defines a 3D grooved border. The effect depends on the border-color value

• ridge - Defines a 3D ridged border. The effect depends on the border-color value

• inset - Defines a 3D inset border. The effect depends on the border-color value

• outset - Defines a 3D outset border. The effect depends on the border-color value

• none - Defines no border

• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

• name - specify a color name, like "red"

• HEX - specify a HEX value, like "#ff0000"

• RGB - specify a RGB value, like "rgb(255,0,0)"

• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

• transparent

Note: If border-color is not set, it inherits the color of the element.

CSS Border - Individual Sides

From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

So, here is how it works:

If the border-style property has four values:

• border-style: dotted solid double dashed;

  • top border is dotted

  • right border is solid

  • bottom border is double

  • left border is dashed

If the border-style property has three values:

• border-style: dotted solid double;

  • top border is dotted

  • right and left borders are solid

  • bottom border is double

If the border-style property has two values:

• border-style: dotted solid;

  • top and bottom borders are dotted

  • right and left borders are solid

If the border-style property has one value:

• border-style: dotted;

  • all four borders are dotted

CSS Layout - float and clear

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

• left - The element floats to the left of its container

• right - The element floats to the right of its container

• none - The element does not float (will be displayed just where it occurs in the text). This is default

• inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Example - Float Next To Each Other

Normally div elements will be displayed on top of each other. However, if we use float: left we can let elements float next to each other:

The clear Property

The clear property specifies what elements can float beside the cleared element and on which side.

The clear property can have one of the following values:

• none - Allows floating elements on both sides. This is default

• left - No floating elements allowed on the left side

• right- No floating elements allowed on the right side

• both - No floating elements allowed on either the left or the right side

• inherit - The element inherits the clear value of its parent

The most common way to use the clear property is after you have used a float property on an element.

When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.