CSS Cheat sheet for Developers

Using CSS on daily basis? Whether you’re a super savvy web developer or just someone who wants to learn web development, this CSS cheat sheet should help you out.

The current cheat sheet is divided into following parts:

Font Properties
Text Properties
Color & Background Properties
Box Model Properties
Classification Properties

Font Properties

Font-Family

For changing fonts of sentences, heading, paragraphs etc.

.p1 {
  font-family: "Times New Roman", Times, serif;
}
h1
{
 font-family: sans-serif;
}

Font-Style

Changes the style of text to italic, oblique and normal.

.p1 {
  font-style: oblique;
}
h1
{
 	font-style: italic;
}
h6
{
	font-style: normal;
}

Font-Variant

Used to convert font to small-caps (convert lowercase to uppercase with size slightly smaller than original uppercase letters) or normal.

.p1 {
  font-variant: normal;
}
h1
{
	font-style: small-caps;
}

Font-weight

Defines weight of Font either by value or by defining specific weight (normal, lighter, bold).

.p1 {
  font-weight: normal;
}
.p
{
 	font-weight: lighter;
}
h1
{
  font-weight: bold;
}
h6
{
 	font-weight: 700;
}

Font-size

Defines the size of font in pixels(px),em(1em=16px),Percentage(%) and vw(view-port width to resize font along with browser window).

body {
  font-size: 100%;
}
.p1
{
 	font-size: 14px;
}
h1
{
  font-size: 1.875em;
}
h6
{
 	font-size:10vw
}
p2
{
 	font-size:large;
}
div
{
 	font-size:x-large;
}

Short-hand font property

font: italic small-caps bold 12px/30px Georgia, serif;

Text Properties

Text-color

Defines the color of text using color name, HEX and RGB.

.p1 {
  color: blue;
}
h1
{
  color: dark cyan;
}

Text-Alignment

Defines the Horizontal Alignment of text. Text can be Left, right, centered aligned or justified.

.p1 {
  text-align: center;
}
h1
{
  text-align: justified;
}

Vertical-Alignment

Defines vertical alignment(as baseline, text-top, super, sub , text-bottom) of an inline element (e.g an image within a line) relative to its parent element.

img.a {
  vertical-align: super;
}

img.b {
  vertical-align: 50%;
}

Text-Decoration

To remove Text decoration i.e.removing underlines from links and to set Text decoration i.e. none, blink, overline, line-through and underline.

p{
  text-decoration: overline;
}
a
{
  text-decoration: none;
}

Text-Transformation

Transform text to uppercase, lowercase or capitalize the first letter of each word.

h3{
  text-transform: uppercase;
}
p
{
  text-transform: capitalize;
}

Text-Indentation

Defines the indentation in the first line of text (prior to first line).

.p1
{
  text-indent: 45px;
}
.p2
{
  text-indent: 2.7em;
}

Letter-Spacing

Used to Increase or decrease space between letters of text.

h1
{
  letter-spacing: 5px;
}
p
{
  letter-spacing: -2px; 
}

Line-Height

Defines the space between lines.

.p1
{
  line-height: 0.9;
}
.p2
{
  line-height: 1.9;
}

Word-Spacing

Defines space between words in text.

h1
{
  word-spacing: 8px;
}
p
{
  word-spacing: -10px; 
}

White-Space

For handling white-space inside an element.
Following example demonstrates how to disable text-wrapping. (By default it is enable)

.p1
{
  white-space: nowrap;
}

Text-Shadow

Defines vertical and horizontal text shadow and text shadow color

h1
{
  text-shadow: 3px 3px blue;
}
h4
{
  text-shadow: 4px 4px 7px blue; 
}

Color & Background Properties

Text-Color

Changes the color of text.
In CSS, colors can be specified as color names or HEX,RGB, RGBS,HSL, HSLA Values.

h1
{
  Color: DodgerBlue;
}
p
{
  Color: rgb(255, 100, 81)
}

Background-Color

Sets the background color of elements.

body
{
  background-color:Tomato;
}

Background-Image

Used to specify Image as background.

body
{
  background-image: url("paper.gif");
}
p
{
  background-image: url("paper.gif");
}

Background-Repeat

To repeat the image horizontally(repeat-x) or vertically(repeat-y) or no-repeat.
(By default the background-image is repeated horizontally and vertically both.)

body
{
  background-image: url("paper.gif");
  background-repeat: repeat-x; 
}
p
{
  background-image: url("paper.gif");
  background-repeat: no-repeat;
}

Background-Position

To set the position of background-image.

body
{
  background-image: url("paper.gif");
  background-repeat: repeat-x; 
  background-position: left top;
}

Background-Attachment

Defines whether Background-Image should remain fixed or should scroll(By specifying background-attachment: scroll)l with the rest of the page.

body
{
  background-image: url("paper.gif");
  background-repeat: repeat-x; 
  background-position: left top;
  background-attachment: fixed;
}

Background Shorthand

To specify all the background properties (mentioned above separately) in a single property to shorten the code.
Sequence of background properties is: background-color,background-image,background-repeat, background-attachment, background-position.

body
{
  background: red url("img_tree.png") no-repeat scroll right top;
}

Box Model Properties

In CSS, the box model defines the design and layout of every Html element. Box Model and its elements are demonstrated by the following figure:

Margins, Borders and Padding can have 1-4 values.

4 values (Order of values is : top, right, bottom, left)
3 values (Order of values is : top, left & right, bottom)
2 values (Order of values is : top & bottom, left & right)
1 value (Applies to all 4 Sides)

Margins

Margin – Individual Sides

For specifying margin of each side separately using any of the following values:
auto – Margin is calculated by browser (Used to centralize the element within its container)
Specify margin in px, pt, cm,% etc.
inherit – to inherit margin from parent element

p
{
  margin-top: 10px;
  margin-bottom: 50px;
  margin-right: 70px;
  margin-left: 30px;
}
div 
{
    margin: auto; 
}

Margin Shorthand

To define all the 4 margins at once in a single line.

p
{
  margin: 45px 50px 60px 75px;
}

Borders

Border-Style

Defines the style of border as dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

p1
{
  border-style: outset;
}
p2
{
  border-style: dotted dashed solid double; 
}

Border-width

Defines the width of all borders by specifying sizes in px, pt, cm, em, etc or by values medium, thin and thick.

p1
{
  border-style: outset;
  border-width: medium;
}
p2
{
  border-style: dotted dashed solid double; 
  border-width: 25px 10px 4px 35px;
}

Border-color

Defines the color of borders.

p1
{
  border-style: dotted;
  border-color: green;
}

Border- Individual Sides

To specify properties of each of the four borders.

p1
{
  border-style: dotted;
  Border-left-style: solid;
  border-right-width: 5px;
  border-bottom-color: red;
  border-top-style: dashed;
}

Rounded-Border

Defines rounded-border by border-radius property.

p1
{
  border: 6px dotted red;
  border-radius: 7px;
}

Padding

Padding – Individual Sides

For specifying padding of each side separately using any of the following values:

Specify padding in px, pt, cm,% etc.
inherit – to inherit padding from parent element

p
{
  padding-top: 10px;
  padding-bottom: 50px;
  padding-right: 70px;
  padding-left: 30px;
}

Padding Shorthand

To define all the 4 Paddings at once in a single line.

p
{
  padding: 45px 50px 60px 75px;
}

Height and Width of Element

To set the height and width of the area inside the margin,borders and padding i.e. content of element.

Height and width can be defined by following values,
auto – Height and width is calculated by browser (It’s default)
Specify values in px, pt, cm,% etc.
inherit – to inherit width and height from parent element
Initial – Set width and height to default value

div
{
  height: 150px;
  width: 40%;
}

Float and clear

Float

To position and format the content i.e. to wrap text around an element. E.g to float an image to the left/right of text.
It has following values:

left – The element floats to the left of its container
right – The element floats to the right of its container
none – The element does not float (will be displayed just where it occurs in the text). This is default
Inherit – Inherit the float property of parent element

img
{
  float: right;
}

Clear

If we use floating property and we want the element (next to floating element) below rather on the left or right of it, we use clear property.
It has following values,

left – The element is pushed below left floated elements
right – The element is pushed below right floated elements
none – The element is not pushed below both right and left floated elements (Default)
both- The element is pushed below both right and left floated elements
Inherit – Inherit the clear property of parent element

div1
{
  float: right;
}
div2
{
   clear: right;
}

Note:
Clear and float must be the same i.e. as shown in above example if element is floated to right then it should be cleared to right.

CSS Classification Properties

List-Item Markers Style Type

To specify the type of list-item marker, list-style-type property is used. Available list-style-type for unordered lists are circle and square and for ordered lists are upper-roman and lower-alpha.

ul
{
  list-style-type: square;
}
ol
{
  list-style-type: lower-alpha;
}

List-Item Markers Style Image

To define an image as a list item marker, list-style-image property is used.

ul
{
  list-style-image: url('sqpurple.gif');
}

List-Item Markers Position

To position the list item markers, list-style-position property is used.
It has 2 values:

Outside: Bullet points will be outside the list item. List items will be defined vertically (By default)
Inside: Bullet points will be inside the list item. Bullet points will be part of text and list items will not be aligned vertically (Text will be pushed at start)

ul
{
  list-style-position: outside;
}

Remove Default List Settings

List-style-type: none; removes the list-item markers
To remove default margin and padding of list, Set ul/ol margin:0 and padding:0

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}