CSS styleguide

This is my attempt to present the most important elements of the standard CSS functions. For an extensive overview, refer to the W3C spec.

Animate

Transform 2D

Translate

The translate() method moves an element from its current position (according to the parameters given for axis). To move an element 50 pixels to the right, and 100 pixels down from its current position:

div {
    transform: translate(50px, 100px);
}

p.abs {
  	position: absolute;
  	top: 50%;
	left: 50%;
	transform: translate (-50%, -50%);
}

Select

Combinators

Select all children

div > p {
  background-color: yellow;
}

Select adjacent elements

“adjacent” means “immediately following. To select all p elements that are placed immediately after div elements (p elements must follow div directly):

div + p {
  background-color: yellow;
}

Select all siblings

Select all p elements at the same level as div

div ~ p {
  background-color: yellow;
}

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *