CSS Opacity and Transparency

The opacity property specifies the opacity/transparency of an element.

Transparent Image

The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent.

Example

img {
  opacity: 0.5;
}

Continue reading CSS Opacity and Transparency

CSS Pseudo-elements

What are Pseudo-Elements?

A CSS pseudo-element is used to style specific parts of an element.

For example, it can be used to:

  • Style the first letter or line, of an element
  • Insert content before or after an element
  • Style the markers of list items
  • Style the viewbox behind a dialog box

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}

Continue reading CSS Pseudo-elements

CSS Pseudo-classes

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

  • Style an element when a user moves the mouse over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus
  • Style valid/invalid/required/optional form elements

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Continue reading CSS Pseudo-classes

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

  • Descendant combinator (space)
  • Child combinator (>)
  • Next sibling combinator (+)
  • Subsequent-sibling combinator (~)

Descendant Combinator

The descendant combinator matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

Example

div p {
background-color: yellow;
}

Continue reading CSS Combinators

CSS Layout – 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. Continue reading CSS Layout – Align

CSS Layout – display: inline-block

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with
display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline, display: inline-block and display: block:

Example

span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

Continue reading CSS Layout – display: inline-block

CSS Layout – float and clear

The CSS float property specifies how an element should float.

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

The float Property

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. Continue reading CSS Layout – float and clear

CSS Layout – Overflow

The CSS overflow property controls what happens to content that is too big to fit into an area.

CSS Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

  • visible – Default. The overflow is not clipped. The content renders outside the element’s box
  • hidden – The overflow is clipped, and the rest of the content will be invisible
  • scroll – The overflow is clipped, and a scrollbar is added to see the rest of the content
  • auto – Similar to scroll, but it adds scrollbars only when necessary

Continue reading CSS Layout – Overflow

CSS Layout – z-index

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

The z-index Property

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

Continue reading CSS Layout – z-index