CSS Cheatsheet

Syntax

selector1 {
  property: value;
  property: value;
}

selector2 {
  property: value;
}

Selectors

• div selects all div elements
• div,p for all div and all p elements
• div p all p elements inside a div element
• input[type=submit] all input elements with the attribute type="submit"
• .myclass for elements with the attribute class="myclass"
• div.myclass for div elements with the attribute class="myclass"
• #myid for elements with the attribute id="myid"
• div#myid for div elements with the attribute id="myid"

When elements match multiple selectors the preference is

• Most specific rule first, then
• Last matching rule in the file

See more: w3schools

Class VS Id

An Id is unique, a class can be used on multiple elements.

margin vs padding, width vs actual-width, height vs actual-height

Properties

• color

  • blue, #000000

• font-family

  • 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

• font-weight

  • bold

• font-size

  • 200%, 1.2em, x-small, 18px

• text-align

  • center

• text-decoration

  • underline

• width

  • 200px, auto

• background-color

• border

  • 1px solid grey

• border-radius

  • 5px

Wrap text around image

Image property: float: left; or float: right;