Home

 

 

CSS Type & Font

font-family

  • Defines the font[s]. If the first font is not found, it will attempt to load the next font.
  • font-family:font
  • font-family: Arial, Helvetica, sans-serif;
  • font-family: Verdana;

font-size

  • Sets the size of a font. Fixed font sizes are points (pts) and pixels (px). Relative or scalable font sizes are defined in percent (%) or ems(em).
  • Values large, x-large, xx-large, smaller, larger, inherit
  • Pixel -fixed size based on screen pixels
  • .main-content { font-size:9px;}
  • Point - fixed size based on print specs
  • .main-content { font-size:9pt; }
  • Percent - scalable size relative to parent
  • .main-content {font-size:100%;}
  • Percent - scalable size relative to parent
  • .main-content {font-size:90%;}
  • Percent - scalable size relative to parent size
  • .main-content {font-size:90%;}
  • Em - scalable size relative to parent 1 em = default font size 2 em = 200%
  • .main-content { font-size:2em;}
  • Named Font Size relative to parent

font color values

  • #RRGGBB - Each digit uses values from 0-9 + A-F. All equal values make a shade of gray.
  • Black
  • <span style="color:#000000;">text</span>
  • White
  • .white-text { color:#FFFFFF; }
  • Blue
  • .blue-text {color:#0000FF; }
  • Red
  • #alert { color:#FF0000; }

font-style

  • normal | italic | oblique | inherit
  • .norm { font-style:normal; }
  • Inline
  • <span style="font-style:italic;">
  • .oblique { font-style:oblique;}
  • .revert { font-style:inherit;}

line-height

  • value (px,pt,em,%) | normal | inherit
  • line-height:12px;

font-weight

  • normal | bold | bolder | lighter | 100 - 900 | inherit
  • .bold-font {font-weight:bold;}

text-transform

  • capitalize | uppercase | lowercase | none | inherit
  • .title-text { text-transform:capitalize; }

font-variant

  • normal | small-caps | inherit
  • .sub-title { font-varient:small-caps; }

text-decoration

  • none | underline | overline | line-through | blink | inherit
  • .text-underline { text-decoration:underline; }

font-size-adjust

  • font-size-adjust relationally changes font-size from its parent.
  • span-shrink { font-size-adjust: .75; }

font-stretch

  • normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
  • .stretch-txt { font-stretch:wider;}

CSS Background

background-color

  • #RRGGBB - Each digit uses values from 0-9 + A-F. All equal values make a shade of gray.
  • background-color:#fff000;

background-image

  • Specifies a background image. Uses url() parameter
  • background-image:url(http://www.csscheatsheets.com/images/header.gif);

background-attachment

  • fixed | scroll | inherit
  • body { background-attachment: fixed; }

background-repeat

  • no-repeat | repeat | repeat-x | repeat-y | inherit
  • body { background-repeat: no-repeat; }

background-position

  • top | top left | top center| top right | center left | center center | center right | bottom left | bottom center | bottom right | % % | px px
  • background-position: 0% 0%

CSS Text Block

word-spacing

  • normal | inherit | num+px | number+% | number + em;
  • .para { word-spacing: 2em; }

letter-spacing

  • normal | inherit

text-align

  • left | right | center | justify | inherit

vertical-align

  • baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

text-indent

  • length - Indents first line
  • text-indent:12px;

white-space

  • normal | pre | nowrap | inherit

CSS Container/Box

  • Properties you can apply to CSS containers.
  • Shorthand tip: Most box properties can use shortcut syntax to specify top,bottom, left and right
  • [top & bottom] [left & right ]
  • { margin: 20px 10px; }
  • [top] [bottom]] [left & right ]
  • { padding: 1em 3em; }
  • top left right bottom
  • { padding: 20px 10px 2px 5px; }

display

  • inline | block | compact | none | inherit
  • .box {display:block; }
  • .box {display:inline; }
  • .box {display:compact; }
  • .box {display:none; }

border

  • #RRGGBB - Each digit uses values from 0-9 + A-F. All equal values make a shade of gray.
  • border-top-color | border-right-color | border-bottom-color | border-left-color
  • .box {border:solid 1px #CCCCCC; }
  • .border-black {border-color:#000000; }

border-style

  • none | solid | dashed | dotted | double | groove | ridge | inset | outset | hidden | inherit
  • border-right-style | border-bottom-style | border-left-style | border-top-style

border-width

  • border-width: number px | medium | thick | inherit
    border-right-width | border-bottom-width | border-left-width | border-top-width
  • .box {border-width:2px; }

border-color

  • border-right-color | border-bottom-color | border-left-color | border-top-color
  • .box {border-color:#FF0000; }

border-style

  • none | solid | dashed | dotted | double | groove | ridge | inset | outset | inherit
  • .box {border-style:dashed; }

outline

  • outline-color | outline-style | outline-width
  • {
    outline: #0000FF solid thin
    }

CSS Block Size & Positioning

  • Any element can become a block element by setting display:block;
  • Any element can become a block element by setting display:block;

width

  • number+px | number+% | auto | inherit
  • .container { width:80%; }

height

  • number+px | auto | inherit
  • .container { height:50%; }

float

  • Moves an element to the left of the container. If an element precedes it, it floats to the edge of that item.
  • left | right | none | inherit
  • .left-div { float:left; }

clear

  • Pushes element in specified direction to the next line.
  • left | right | both | none | inherit
  • #footer { clear:both; }

margin

  • Determines inset space of outside edge of element.
  • margin-top | margin-right | margin-bottom | margin-left

padding

  • Specifies inset from inside edge of container.
  • padding-right | padding-bottom | padding-left | padding-top

max-width | min-width | min-height | max-height*

    Note: does not work in IE - see workaround below
  • .class { max-width: 640px;}

    <[! --[if IE]>
    .class { width: expression(this.width > 640 ? 640: true); }
    < ![endif]-->

position

  • absolute | fixed | relative | static | inherit

visibility

  • visible | hidden | inherit

width

height

left

  • number+% | number+px | auto | inherit

top

  • number+% | number+px | auto | inherit

right

  • number+% | number+px | auto | inherit

bottom

  • number+% | number+px | auto | inherit

z-index

  • Layers of an absolutely position element. There are more numbers, but Firefox uses number 0-999.
  • Note: If IE and you have two relatively positioned elements with two different z-Indexes, IE appearsto ignore this. You need to have both elements in the same relative container for z-index to work.

clip

  • number+px | auto | inherit

overflow

  • overflow-x | overflow-y
  • visible | hidden | scroll | number+px | auto | inherit

List

list-style-type

  • disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit

list-style-image

  • css property used to set the bullet to a custom image
  • .bull-list { list-style-image:url(images/someimage.jpg); }

list-style-position

  • inside | outside | inherit

Mouse

cursor

  • crosshair | text | wait | default | help | e-resize | ne-resize | n-resize | nw-resize | w-resize | sw-resize | s-resize | se-resize | number+px | auto | inherit

Print

page-break-before

  • auto | always | avoid | left | right | inherit

page-break-after

  • auto | always | avoid | left | right | inherit

 

opacity | filter:alpha(opacity=50)

  • opacity is for mozilla browsers, filter:alpha is used for IE
  • transbox { opacity: .5; filter: alpha(opacity=50); }

caption-side

  • top | bottom | left | right | inherit

empty-cells

  • show | hide | inherit

table-layout

  • auto | fixed | inherit

content

marker-offset

  • number+px | auto | inherit

quotes