CSS Properties Cheatsheet

Text Properties

Property Description Values
color Sets the text color. color name, hex, rgb, rgba
font-family Specifies the font of text. "Open Sans", Arial, sans-serif
font-size Sets the size of text. 14px, 2em, 200%
font-style Defines whether text is italicized. normal, italic, oblique
font-weight Sets the boldness of text. normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
letter-spacing Adjusts the spacing between letters. normal, 1px, 2px
line-height Sets the size of text 1.2; 1.5; 1.6
text-align Aligns text horizontally left, center, right, justify
line-height Sets the size of text 1.2; 1.5; 1.6
text-decoration Adds decorations: underline, overline, line-through
text-transform Changes text case uppercase, lowercase, capitalize
white-space Controls how whitespace is handled normal, nowrap
word-spacing Adjusts the spacing between words. 1.0; 1.15; 1.5

Box Model Properties

Property Description Values
width Sets the width of an element. auto, 100px, 50%
height Sets the height of an element. auto, 100px, 50%
max-width Specifies the maximum width. 100px, 100%
max-height Specifies the maximum height. 100px, 100%
min-width Specifies the maximum width. 100px, 10%
min-height Specifies the maximum height. 100px, 10%
margin Sets the outer margin around elements. 2px
padding Sets the inner padding inside elements. 2px
border Sets the border around elements. 1px
box-shadow Adds shadow around elements. inset, horizontal offset, vertical offset, blur radius, spread distance, color
box-sizing Determines how the width and height of an element are calculated content-box, border-box
Ruleset Explanation
a {
color: blue;
}		 Sets the color of the link blue
a:link {
color: black;
}		 Sets the color of the unvisited link to black
a:visited {
color: gray;
}		 Sets the color of the link to gray after the link has been visited.
a:hover {
color: orange;
}		 Sets the color of the link to orange when the cursor is over the text.
a:active {
color: orange;
}		 The color will turn orange when the user click the link and holds down the cursor
a {
cursor: pointer;
}		 Changes the cursor to a pointer when hovering over the link

Skeuomorphism and Flat Design

Type of button Ruleset Appearence
Default button button {
height: 50px;
width: 200px;
cursor: pointer;
font-weight: 600;
font-size: 15px;
}
Skeuomorphism .skeuomorphic {
border: 2px solid #0c960c;
border-radius: 5px;
color: #F8F8F8;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
background: linear-gradient(#1D1, #0ebc0e);
text-shadow: 0 -2px #0c960c;
} 		Skeuomorphic button
Skeuomorphic hover .skeuomorphic:hover {
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 0px -2px 2px rgba(255, 255, 255, 0.25) inset, 0 2px 2px rgba(255, 255, 255, 0.4) inset;
background: #0ebc0e;
background: linear-gradient(#0ebc0e, #0c960c);
border-color: #064f06;
}
Skeuomorphic active skeuomorphic:active {
margin-top: 2px;
margin-bottom: -2px;
box-shadow: 0px 2px 2px rgba(63, 63, 63, 0.1), 0px -2px 2px rgba(255, 255, 255, 0.25) inset, 0 2px 2px rgba(255, 255, 255, 0.4) inset;
background: #0c960c;
background: linear-gradient(#0c960c, #0ebc0e);
}
Flat button .flat {
background-color: #1D1;
color: #fff;
border: 2px solid #12dd23;
border-radius: 10px;
} 		Flat button
Flat hover .flat:hover {
background-color: #0c960c;
transition: background-color .15s, font-size .15s;
font-size: 18px;
}
3D button button {
padding: 5px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
box-shadow: 0px 5px;
} 		original state
3D button hover button:hover {
cursor: pointer;
} 		state when cursor over
3D button active button:active {
margin-top: 5px;
color: black;
box-shadow: 0px 0px;
} 		state when button clicked