CSS

Alignment

You can put two divs on the same line using the float css indicator. In the example below, divs with the id="same-line" will float next to each other rather than being separated by a line break.

#same-line {
  float: left;
}

You can form a div onto a new line using the clear indicator. Divs with the id="new-line" from the example below will be pushed down onto a new line away from any floating counterparts.

#new-line {
  clear: left
}

You can horizontally centre a div by setting margin to auto.

div {
  margin: auto
}

You can space HTML elements using white space by adding the pre tag to the white-space property. By default white space is collapsed by HTML displays so you cannot easily space elements using a white space.

p {
  white-space: pre;
}

before / after

You can add text content to a before / after relative tags by enclosing the content inside "" quote marks. If you don’t include the content inside quote marks it will not be parsed as valid css.

p::before {
  content: "some text"
}

Subsequent Sibling Selector, or the ~ Tilde

The subsequent sibling selector allows you to select subsequent elements on a page relative to another element IF they share the same parent element.

.x ~ p {
  color: blue
}

In the example below, the p element text before the x class line is not styled but the two elements after it are styled. Furthermore, the last element inside a div - which gives it a different parent from the x class element - is ignored.

See the Pen Tilde CSS selector example by Dkowski (@dkowski) on CodePen.

Checkbox

You can alter the styling of an elements based on the state of a checkbox that is associated with it by using the :checked (and unchecked or default) property of the input[type="checkbox"]. An easy way to do this is to use the subsequent sibling selector ~ tilde character to target specific elements around an input that share the same parent thus linking them.

input[type="checkbox"]:checked ~ p {
  color: blue
}

In the example below the default version of the input element is used to style the p element when it is unchecked and the :checked element is used to style it when toggled on.

See the Pen Checkbox association by Dkowski (@dkowski) on CodePen.