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

* 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 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.