Scribd
Upload
1K views1 page

CSS Cheat Sheet & Syntax Guide

This CSS cheat sheet provides a concise reference to CSS syntax, selectors, properties and values for formatting text, backgrounds, borders, boxes, positioning and lists. Key information includes shorthand property syntax, external and internal style sheets, box model properties, pseudo-classes, font properties, text properties, background properties, positioning schemes and list styling options. Comments and various units are also outlined.

Uploaded by

gambo_dc
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views1 page

CSS Cheat Sheet & Syntax Guide

This CSS cheat sheet provides a concise reference to CSS syntax, selectors, properties and values for formatting text, backgrounds, borders, boxes, positioning and lists. Key information includes shorthand property syntax, external and internal style sheets, box model properties, pseudo-classes, font properties, text properties, background properties, positioning schemes and list styling options. Comments and various units are also outlined.

Uploaded by

gambo_dc
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS CHEAT SHEET

Shorthand*
background border border-bottom border-left border-right border-top font list-style margin padding Syntax selector {property: value;} External Style Sheet <link rel="stylesheet" type="text/css" href="style.css" /> Internal Style <style type="text/css"> selector {property: value;} </style> Inline Style <tag style="property: value">

SYNTAX

BOX MODEL
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;

Comments
/* Comment */

BORDER
border-width Width of the border border-style dashed; dotted; double; groove; inset; outset; ridge;
solid; none

Pseudo Selectors
:hover :active :focus :link :visited :first-line :first-letter Class ID div span color cursor display

GENERAL
String preceded by a period String preceded by a hash mark Formats structure or block of text Inline formatting Foreground color Appearance of the cursor
block; inline; list-item; none

border-color Color of the border

POSITION
clear float left top position Any floating elements around the element?
both, left, right, none

Floats to a specified side


left, right, none

Media Types
all braille embossed handheld print projection screen speech tty tv

overflow How content overflowing its box is handled


visible, hidden, scroll, auto

The left position of an element


auto, length values (pt, in, cm, px)

The top position of an element


auto, length values (pt, in, cm, px) static, relative, absolute

visibility visible, hidden

FONT
font-style
Italic, normal

z-index

Element above or below overlapping elements?


auto, integer (higher numbers on top)

font-variant normal, small-caps font-weight bold, normal, lighter, bolder, integer


(100-900)

BACKGROUND
background-color background-image background-repeat Background color Background image
repeat, no-repeat, repeat-x, repeat-y

Units
Length % em pt px Keywords bolder lighter larger font-size

Size of the font

font-family Specific font(s) to be used

TEXT
letter-spacing Space between letters line-height text-align Vertical distance between baselines Horizontal alignment

background-attachment Background image scroll with the element?


scroll, fixed

background-position

(x y), top, center, bottom, left, right

LIST
list-style-type Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none

text-decoration blink, line-through, none, overline,


underline

text-indent text-transform vertical-align word-spacing

First line indentation


capitalize, lowercase, uppercase

list-style-position Position of the bullet or number in a list


inside; outside

Vertical alignment Spacing between words list-style-image

Image to be used as the bullet in a list

* The properties for each selector are in the order they should appear when using shorthand notation.

You might also like