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.


Transform 2D


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 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