CSS Reference Cheat Sheet

Use this CSS Cheat Sheet as a handy guide while designing. CSS is a very important aspect of web design, alongside HTML and JavaScript.

Jump To Section:

CSS Selectors
CSS Box Model
CSS Dimensions
CSS Margins
CSS Padding
CSS Borders
CSS Positioning
CSS Lists
CSS Backgrounds
CSS Fonts
CSS Text

CSS Selectors
*	selects all elements
p	selects all <p> elements
#container	selects element with ID “container”
.box	selects all elements with CLASS “box”
h1, h2	selects all <h1> elements and all <h2> elements
div p	selects all <p> elements inside <div> elements
div#box	selects <div> tag with ID “box”
span.box	selects all <span> tags with CLASS “box”
#box *	selects all elements inside #box
div > span	selects all <span> elements one-level deep in a <div>
a:link	selects all unvisited links
a:active	selects links in clicked state
a:visited	selects all visited links
a:hover	selects link with mouse over it

CSS Box Model

CSS Dimensions
height	sets the height of selected element
width	sets the width of selected element

CSS Margins
margin	sets all margins (top, bottom, left, right) of the selected element
margin-top	sets the top margin of selected element
margin-bottom	sets the bottom margin of selected element
margin-left	sets the left margin of selected element
margin-right	sets the right margin of selected element

CSS Padding
padding	sets all padding (top, bottom, left, right) of the selected element
padding-top	sets the top padding of selected element
padding-bottom	sets the bottom padding of selected element
padding-left	sets the left padding of selected element
padding-right	sets the right padding of selected element

CSS Borders
border	sets border style for all borders, in the format: border: (solid, dashed, dotted, double) (width) (color), e.g. border: solid 1px #000
border-color	sets the color for all borders
border-style	sets the style for all borders
border-width	sets the width for all borders
border-top	sets all top border properties
border-top-color	sets the top border color
border-top-style	sets the top border style
border-top-width	sets the top border width
border-bottom	sets all bottom border properties
border-bottom-color	sets the bottom border color
border-bottom-style	sets the bottom border style
border-bottom-width	sets the bottom border width
border-left	sets all left border properties
border-left-color	sets the left border color
border-left-style	sets the left border style
border-left-width	sets the left border width
border-right	sets all right border properties
border-right-color	sets the right border color
border-right-style	sets the right border style
border-right-width	sets the right border width

CSS Positioning
position	type of positioning used for selected element (absolute, fixed, relative or static)
float	used to determine if a box element is floated
top, left, right, bottom	specifies the offsets for each position
display	sets how the element is displayed (block, inline or none)
z-index	sets the stacking order of elements (z-index:2 sits on top of z-index:1)
overflow	sets what happens to content if it overflows an element’s box (auto, hidden)
clear	sets which sides of an element where other floating elements are not allowed.
cursor	sets type of cursor

CSS Lists
list-style	sets all list properties of selected element
list-style-type	sets style of bullets or markers (square, circle, disc, none, etc.)
list-style-position	sets how text wraps around bullets (inside, outside)
list-style-image	sets an image as the bullet example: list-style-image:url(bullet.png)

CSS Background
background	sets background of an element, in the format: background: (color) (image) (repeat) (position) example: background: #000 url(bg.png) repeat-x top left
background-color	sets the background color of an element example: background-color: #CCCCCC;
background-image	sets the background image of an element example: background-image: url(\path-to-image\background-image.png);
background-repeat	sets the repeat property of the background image example: background-repeat: repeat-x; (repeat, repeat-x, repeat-y, no-repeat, inherit)
background-attachment	sets whether a background image is fixed or scrolls with the page
background-position	sets the position of the background image example: background-image: top right;

CSS Font
font	sets all font properties at once
font-family	set the font family to be used (Arial, Helvetica, etc.)
font-size	set the size of the text
font-weight	set the boldness, or weight, of the text (bold, bolder, normal, lighter, etc.)
font-style	sets the style of the text (normal, italic, etc.)
font-variant	sets the text variant (normal, small-caps)

CSS Text
color	sets the color of text (#000, #efefef, blue, etc.)
text-align	sets the alignment of text (left, right, center)
vertical-align	sets alignment relative to baseline
letter-spacing	sets the spacing between letters
line-height	sets the spacing between lines
text-indent	sets the indention of the first line of selected element
text-transform	changes the formatting of text (uppercase, lowercase, capitalize)
text-decoration	applies effects to text (underline, overline, none)
white-space	sets how white-space inside element is handled (normal, nowrap, pre, etc.)
word-spacing	sets the spacing between words in selected text

Alexander Online Media

Alexander Online Media is a One Stop Shop for Web Design and Development, SEO and Online Marketing. Contact us today to discuss your project!

Ready To Get Started?

Do you want to boost your business with a new website design or marketing campaign? Click the link below and we can schedule a quick call to discuss your project.

CSS Reference Cheat Sheet

Jump To Section:

CSS Selectors

CSS Box Model

CSS Dimensions

CSS Margins

CSS Padding

CSS Borders

CSS Positioning

CSS Lists

CSS Background

CSS Font

CSS Text

Alexander Online Media

Ready To Get Started?

Alexander Online Media

Areas Serviced