Quick reference

basic selectors

tagname find all tags of this kind

div {}

#idtext find all tags with attribute id="idtext"

#menu {}

.classname find all tags with attribute class containing the "classname"

.thumbnail {}

mixing selectors for one element

tagname.classname find all tags by tagname that also have the class "classname"

div.thumbnail {}

.classname1.classname2 find all tags that have both classes

.thumbnail.highlighted {}

mixing selectors for digging deeper

selector1 selector2 find all elements matching selector2 that are inside any element matching selector1 (at any depth)

.navigation li {}
div.menu img

selector1>selector2 find all elements matching selector2 that are right inside any element matching selector1

ul>li {}
div.thumbnail>img

colors in CSS

transparent colorless, invisible
black color name
#000 RGB one character
#000000 RGB (normal)
rgb(0,0,0) RGB numbers, 0-255
rgba(0,0,0,1) RGB plus alpha channel number 0-1 0 = transparent 1 = opaque 0.7 = transparent enough ;)

basic units

px pixels
% percentage (of wrapper size or font size)
vw size relative to the width of element
vh size relative to the height of element
em size relative to the current font size
rem size relative to the font size set globally on the page

simple style for appearance

color font color color: #FFFFFF;

font-family font font-family: "any font name", sans-serif;

font-weight font weight font-weight: bold; // bold font-weight: normal; // plain font-weight: 300; // can be given numerically, useful for google fonts

font-size font size font-size: 12px; font-size: 50%; font-size: 0.5em; font-size: 12pt;

text-decoration underline etc. text-decoration: none; //no underline text-decoration: underline;

background-color background color background-color: #FFFFFF;

background definition of the background (color, image gradients) background: transparent url('tlo.png') no-repeat center; background: #ad4f56 url('tlo.png') no-repeat top left; background: transparent url('tlo.png') repeat-x bottom;

background-image definition of the image. You can change the image without altering the other settings made before background-image: url('tlo.png')

border sets border for an element border: 1px solid red; border: 3px dashed #000000; border-top: 2px solid #ccc;

layout definition

display the treatment of the item on screen display: block; display: inline; display: none;

Margin margins on an item, auto for the right and left is centered margin: 2px 3px 4px 5px; margin: 10px 30px; margin: 20px; margin: 0 auto; //centered

padding think of it as an inner margin defined as the margin but without the auto option

width width

min-width minimum width of the elastic element

max-width the maximum width of the elastic element

height height

min-height the minimum height of the elastic element

max-height maximum elastic element

float "wrap stuff around me" float: left; float: right;

clear I don't want to wrap around anything clear: left; clear: right; clear: both;

overflow what to do with content when it's too long overflow: hidden; overflow: visible; overflow: auto;

grid grid layout definition

.grid-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 500px;
  grid-template-areas: "alice alice"
                       "bob jim"
}

.something {
  grid-area: alice;
}

Stuff not meant to be used for layouts

position method of calculating the position of the item position: static; // default. "Revert to normal layout"

 position: absolute; // Rips the element out of the document and puts on top of it - you can now set coordinates. Creates a new coordinates system for elements inside

position: fixed; //Same as absolute, but relative to the screen layout (does not move when user scrolls)

 position: relative; //Moves element based on it's initial position. Creates a new coordinates system for elements inside

top bottom left right set position

top: 10px; left: 10px;

bottom: 100px; right: 20%