Most of the work we have done with CSS is fairly simple: changing fonts, colours, spacing, and borders. All of those changes are useful and necessary, but not the hard part of CSS.

Things become more interesting when you start moving stuff around the page.

CSS display property

The display property specifies the display behaviour (the type of rendering box) of an element.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

Example

Use of some different display vlaues.

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

CSS clear property

The clear property controls the flow next to floated elements.

The clear property specifies what should happen with the element that is next to a floating element.

Example

The <p> element is pushed below left floated elements (the <p> element do not allow floating elements on the left side):

img {
   float:left;
}

p.clear {
   clear:left;
} 

css position Property

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed or sticky).

Example

position an <h2> element:

h2 {
   position: absolute;
   left: 100px;
   top: 150px;
}

css z-index property

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position sticky)

and flex items (elements that are direct children of display; flex elements).

Example

Set the z-index for an image:

img {
  position: absolute;
  left: 0px;
  top: opx;
  z-index: -1;
}

CSS top Property

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Example

Set the top edge of the positioned <div> element 50px down from the top edge of its nearest positioned ancestor:

div {
   position: absolute;
   top: 50px;
   border: 3px; solid green,
]

CSS direction Property

The direction property specifies the text direction/writing direction within a block-level element.

Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support

multiple languages in the same document.

Example

Set the text direction to “right- to-left”:

p.rtl {
   direction: rtl;
}

CSS right Property

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Example

Set the right edge of the positioned <div> element 150px to the right edge of its nearest positioned ancestor:

div.absolute {
   position: absolute;
   right: 150px;
   width: 200px;
   height: 120px;
   border: 3px solid greeen;
}

CSS unicode-bidi Property

The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages, in the same document.

Example

Override text:

div {

direction: rtl;

unicode-bidi: bidi-override;

}

CSS bottom Property

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Example

Set the bottom edge of the <div> element to 10px above the bottom edge of its nearest parent element with some positioning:

div.absolute {
    position: absolute;
    bottom: 10px;
    width: 50px;
    border: 3px solid  #8AC007;
}

CSS Overflow Property

The Overflow Property Specifies what should happen if content overflows an element’s box.

This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.

Example

Show different overflow property values:

div.ex1 {
    overflow: scroll;
}

div.ex2 {
    overflow: hidden;
}
 
div.ex3 {
    overflow: auto;
}

div.ex4 {
    overflow: visible;
}

CSS left property

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Example

Set the left edge of a positioned <div> element to 150px from the left edge of its nearest positioned ancestor:

div.c {
    position: absolute;
    left: 150px;
    width:200px;
    height: 120px;
    border: 3px solid green;
}

CSS Clip Property

What happens if an image is larger than its containing element?

The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.

The clip property does not work if “overflow:visible”,

The clip property is deprecated and will be replaced by the clip-path property in the future.

Example

Clip an Image:

img {
   position: absolute;
   clip: rect(0px,60px,200px,0px);
}

CSS float Property

The float property specifies whether an element should float to the left, right, or not at all.

Absolutely positioned elements ignore the float propety!

Example

let an image float to the right;

img {
  float: righth;
}

CSS Visibility Property

The visibility property specifies whether or not an element is visible.

Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

Example

Make <h2> elements visible and hidden:

h2.a {
   visibility: visible;
}

h2.b {
    visibility: hidden;
}