CSS CHEAT SHEET
SY N TA X
h1 { color: #333; }
SELECTOR PROPERTY AT T R I B U T E
S PA C I N G
MARGIN
PA D D I N G
BORDER
SELECTORS
TYPE #ID .CLASS
Any HTML entity Used to style one object Used to apply styles to
(multiple objects should multiple, similar items
No punctuation is used not use the same ID on a
web page) Preceded by a “.”
div, span, p, h1,
h2, body, input Preceded by a “#” .menu-item,
.featured-image,
#sidebar, #header-logo, .entry-title
#submit-button
WWW.STNSVN .COM
CSS CHEAT SHEET
PROPERTIES
PROPERT Y W H AT I S I T ? AT T R I B U T E S EXAMPLES
FONT-FAMILY Selects desired font All font names font-family:
for text. Don’t forget ‘Montserrat’, arial,
fallbacks, just in sans-serif;
case!
FONT-SIZE Controls size of text px (10px), % (5%), em font-size: 15px;
(1em)
FONT-STYLE Selects italic style italic, oblique, none font-style: italic;
FONT-WEIGHT Changes boldness of normal, bold, bolder, font-weight: bold;
text 400, 500, 700, etc.
LETTER-SPACING Controls spacing Pixel values letter-spacing: 2px;
between letters
LINE-HEIGHT Sets the line height Number (to be line-height: 1.2;
of text multiplied with
current font size)
TEXT-ALIGN Selects text alignment right, left, center, text-align: left;
justify
TEXT-DECORATION Controls underline underline, overline, text-decoration:
style line-through underline;
TEXT-TRANSFORM Controls Capitalize, text-transform:
capitalization of text Uppercase, uppercase;
Lowercase
WIDTH Sets the width of an pixel (100px), width: 300px;
element percentage (100%)
HEIGHT Sets the height of an pixel (100px), height: 110px;
element percentage (100%)
MIN-WIDTH Sets the minimum or pixel (100px), min-width: 150px;
MAX-WIDTH maximum width of percentage (100%) max-width: 300px;
an element
WWW.STNSVN .COM
CSS CHEAT SHEET
PROPERT Y W H AT I T D O E S AT T R I B U T E S EXAMPLES
MIN-HEIGHT Sets the minimum or pixel (100px), min-height: 150px;
MAX-HEIGHT maximum height of percentage (100%) max-height: 300px;
an element
MARGIN Specifies spacing pixel (10px), margin: 3%;
outside an element percentage (10%)
MARGIN-TOP Specifies spacing pixel (10px), margin-top: 3%;
MARGIN-RIGHT to one side of an percentage (10%) margin-right: 3%;
MARGIN-BOTTOM element (eg, right margin-bottom: 3%;
MARGIN-LEFT side only) margin-left: 3%;
PADDING Specifies spacing pixel (10px), padding: 10px;
inside an element percentage (10%)
PADDING-TOP Specifies interior pixel (10px), padding-top: 10px;
PADDING-RIGHT spacing on side of percentage (10%) padding-right: 10px;
PADDING-BOTTOM an element (eg, right padding-bottom: 10px;
PADDING-LEFT side only) padding-left: 10px;
COLOR Sets color of text. Also hex color: #333333 color: #333333;
affects borders. RGB color: rgb
(0,0,0) RGB color
with transparency:
rgba (0,0,0,1)
BACKGROUND Sets the background color (‘white’), hex background: #ffffff;
of an element code (#ffffff), image
(url ‘http://imageurl.
com’)
BORDER-WIDTH Sets the thickness of pixels (1px) border-width: 1px;
element borders
BORDER-STYLE Chooses the border solid, dashed, dotted, border-style: none;
style double, none
BORDER-COLOR Sets the color of color (‘white’), hex border-color:
borders code (#ffffff) #333333;
WWW.STNSVN .COM
CSS CHEAT SHEET
PROPERT Y W H AT I T D O E S AT T R I B U T E S EXAMPLES
BORDER Shorthand for width, style, color border: 2px solid
writing all border #333333;
properties in one css
rule
BORDER-TOP Control specific width, style, color border-top: 2px solid
BORDER-RIGHT border sides #333333;
BORDER-BOTTOM independently
BORDER-LEFT
BORDER-RADIUS Configure the pixels (90px) border-radius: 90px;
roundness of corner
borders
OPACITY Sets the amount of Number from 0-1 opacity: 0.8;
transparency of an (“0” is transparent,
element. “1” is opaque)
DISPLAY Choose display style block, inline, inline- display: block;
of element block, none
POSITION Choose how element static, relative, position: absolute;
is positioned relative absolute, fixed
to other elements
FLOAT Floats are used to none, left, right float: left;
position elements
beside each other.
CLEAR Control which sides left, right, both, none clear: both;
of the element
floated elements
are allowed on.
OVERFLOW Setting the overflow Visible, hidden, overflow: hidden;
determines how to scroll
handle content that
is larger than its
parent element.
WWW.STNSVN .COM
