Wednesday, December 7, 2016

A Quick and Practical CSS Cheat Sheet

Cascading Style Sheets, or CSS for short, is a style sheet language written in a markup language. CSS defines the presentation, look and formatting elements of Web documents, such as the layout, colors and fonts.
CSS syntax is comprehensive, and it is not easy to always know the exact syntax, or know all the available CSS properties and corresponding values. To help CSS developers and designers, Toptal created a quick reference guide and offered it to the community as a free download. The CSS reference guide includes CSS syntax, the most important selectors, properties, sizes and units, and other useful CSS information in a short and informative format. We hope you will find the CSS cheat sheet a valuable resource.
You can also check the Toptal resource pages for additional information on common CSS mistakes, a CSS hiring guideCSS interview questions and CSS tips and best practices.
Download CSS Cheat Sheet

CSS Cheat Sheet


Syntax
Box Model
/* Comments */
@media type {
  selector {
    property: value;
  }
}
Note: media type is optional
CSS Box Model
Inline Style
  <tag style="property: value;">
Embedded Style
  <head>
    <style type="text/css">
      selector { property: value; }
    </style>
  </head>
External Style Sheet
  <head>
    <link rel="stylesheet"
     type="text/css" href="style.css" />
  </head>
Boxes
margin
margin-top
margin-right
margin-bottom
margin-left
Selectors
padding
padding-top
padding-right
padding-bottom
padding-left
*
All elements
tag
All tag elements
border
border-top
border-right
border-bottom
border-left
tag *
All elements within tag
tag tag2
tag2 elements within tag
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
tag, tag2
All tag and tag2 elements
tag > tag2
tag2 is a child of tag
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
tag + tag2
tag2 preceded by tag
.class
Elements with class ‘class’
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
tag.class
All tags with class ‘class’
#id
Element with id ‘id’
Size and colors
tag#id
Tag with id ‘id’
Relative sizes
em | rem | ex | ch
vw | vh | vmin | vmax | %
Pseudo-selectors
:active
Adds style to active element
Absolute sizes
cm | mm | in
px | pt | pc
:after
Adds content after element
:before
Ads content before element
Colors
Hex #ff00ff
:first­-child
Adds style to first child
RGB rgb(255,0,255)
:first-letter
Adds style to first character
Positioning
:first-line
Adds style to first line
position
absolute | fixed | relative | static | inherit
:focus
Adds style to focused element
:hover
Adds style when mouse is over
float
left | right | none | inherit
:link
Adds style to unvisited link
:visited
Adds style to visited link
top, right,
bottom, left
Sets the offset from the edge
Text
font-family
Specifies the font family
clear
left | right | both | none | inherit
font-size
Specifies the font size
font-style
normal | italic | oblique | inherit
display
Specifies element placing in the document flow
font-variant
normal | small-caps | inherit
overflow
visible | hidden | scroll | auto | inherit
font
-weight
normal | bold | bolder | lighter | int (100- 900) | inherit
visibility
visible | hidden | collapse | inherit
color
Sets the color of text
line-height
normal | int | % | inherit
z-index
auto | int | inherit
text-align
left | right | center | justify | inherit
Dimensions
height
auto | int | % | inherit
text-
decoration
none | underline | overline | line-through | blink | inherit
max-height
none | int | % | inherit
max-width
none | int | % | inherit
text-indent
int | % | inherit
min-height
int | % | inherit
text-
transform
none | capitalize | uppercase | lowercase | inherit
min-width
int | % | inherit
width
auto | int | % | inherit
vertical
-align
int | % | baseline | sub | super | top | text-top middle | bottom | text-bottom | inherit
Other
background
Format:
background (color) (image)
  (repeat) (position)
white
-space
normal | nowrap | pre | pre-line | pre-wrap| inherit
cursor
Set the type of cursor
word-spacing
normal | length | inherit
quotes
Set type of quotation marks

This article was originally posted on Toptal