CSS Cheat Sheet!

The ultimate CSS cheat sheet for any beginner! Use this a quick reference whilst your getting a grip to coding!

Types of CSS

  Inline CSS
  Internal CSS
  External CSS

Inline CSS Syntax

  style="property: value;"

Internal CSS Syntax

  <style type="text/css">
    selector { property: value; }
  </style>

External CSS Syntax

  selector { property: value; }

Classes & Ids

  Multiple Classes Per Page
  Single Id Per Page

  .class { }
  #id { }

CSS Comments

  /* This is a comment. */

CSS Font Styling

  font-family: value;
  font-size: value;
  color: value;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;

CSS Text Styling

  word-spacing: value;
  letter-spacing: value;
  line-height: value;
  text-indent: value;
  text-decoration: value;
  text-transform: value;
  text-align: value;
  text-shadow: values;

CSS Backgrounds

  background-color: value;
  background-image: url('');
  background-repeat: value;
  background-position: value;
  background-attachment: value;
  background: color url('') position;

CSS Links

  a {}
  a:visited { }
  a:hover { }
  a:active { }

CSS Lists

  list-style-type: value;
  list-style-image: url('');
  list-style: value url('');

Cursor Styling

  cursor: value;

CSS Pseudo-Elements

  :first-letter
  :first-line
  :before
  :after

CSS Attribute Selectors

  [attribute] { }

CSS Display

  display: block;
  display: inline;
  display: none;
  visibility: hidden;

The CSS Box Model

  margin: value;
  padding: value;

  border: size style color;

  width: value;
  height: value;

  overflow: auto;
  overflow: scroll;
  overflow: visible;
  overflow: hidden;

  float: value;
  clear: value;

  position: fixed;
  position: static;
  position: relative;
  position: absolute;
  z-index: value;