CSS Cheat Sheet For Beginners

Memorizing all CSS properties takes some time. Use this cheat sheet to quickly find the right property for the job.

Selectors

h1 { color: blue; }
Selector that finds element by tag name.
#my-id { color: blue; }
Selector that finds element by id. The id is prefixed by hash, but in element the id attribute value is without hash.
.my-class { color: blue; }
Selector that finds element by class name. The class name is prefixed by dot, but in element the class attribute value is without dot.

Colors

color: red;
Sets text color to red
color: #ff0000;
Sets color in RGB format = Red, Green, Blue mix, hexadecimal format is used - Red = FF, Green = 00, Blue = 00
color: rgb(255, 0, 0);
Sets color in RGB format = Red, Green, Blue mix, decimal format is used - Red = 255, Green = 00, Blue = 00
background-color: white;
Sets background color to white

Text Styles and Fonts

font-size: 11px;
Sets text size of matching element to be 11 pixels
font-family: Arial;
Sets font face to Arial
font-weight: bold;
Makes text bold
font-style: normal;
Sets font style of an element. It can be normal, italic or oblique.
line-height: 1.5em;
Sets line height to be 1.5times the font-size of an element
text-decoration: underline;
Makes the text underlined.
white-space: nowrap;
Sets wrapping of a text. Value nowrap means the text won't be wrapped if it's too long.

Layout and Containers

display: block;
Sets an element to be block element.
display: inline;
Sets an element to be inline element.
display: inline-block;
Sets an element to be inline-block element.
width: 100px;
Sets width of an element to be 100px.
height: 200px;
Sets height of an element to be 200px.
padding: 10px;
Sets element padding to be 10px.
margin: 10px;
Sets element margin to be 10px.
border: solid 1px black;
Adds solid black border that has 1px width
border-radius: 5px;
Makes border rounded with radius 5px.
background-image: url('image.png');
Sets background of an element as an image
cursor: pointer;
Sets mouse cursor to be pointer when mouse button gets plced over a matching element.
box-sizing: border-box;
Sets the box model to border-box. This setting tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

Show and Hide

display: none;
Hides an element.
visibility: visible;
Sets visibility of an element.

Alignment

text-align: center;
Sets alignment within an element to center.

Layers and Overlays

opacity: 1;
Sets opacity of an element to 1 = Non-transparent. Anything less than 1 is semi-transparent.
position: relative;
Sets element position to relative.
z-index: 123;
Brings an element on top of all elements that have z-index lower than 123.