Scribd
Upload
1K views

Css Cheatsheet

This CSS cheat sheet provides a concise summary of common CSS selectors, properties related to the box model, positioning, text formatting, borders and lists, and other properties. It lists and defines key selectors like div, span, id and class selectors. It also summarizes common properties for formatting text, setting borders, positioning elements, and controlling layout with various box model, positioning and other properties. The cheat sheet acts as a handy reference for many fundamental CSS concepts and properties.

Uploaded by

clickhere2
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Css Cheatsheet

This CSS cheat sheet provides a concise summary of common CSS selectors, properties related to the box model, positioning, text formatting, borders and lists, and other properties. It lists and defines key selectors like div, span, id and class selectors. It also summarizes common properties for formatting text, setting borders, positioning elements, and controlling layout with various box model, positioning and other properties. The cheat sheet acts as a handy reference for many fundamental CSS concepts and properties.

Uploaded by

clickhere2
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS Cheat Sheet brought to you by pxleyes.

com

Selectors Box Model Positioning


div all DIV tags position places elements on screen, e.g.
div, span all DIV tags and all SPAN tags absolute, fixed, relative
div span all SPAN tags inside DIVs float stacks elements horizontally in a
#content element with ID “content” particular direction, e.g. left
.box all elements with CLASS “box” top, left, right, specifies the offsets used in absolute,
ul#box UL tag with ID “box” bottom fixed, and relative positions, e.g.
span.box all SPAN tags with CLASS “box” content top:10px;left:10px
* all elements display sets how the element is placed in the
#box * all elements inside #box doc flow, e.g. block, inline, none
a:link, a:active, links in normal state, in clicked state, z-index sets the stacking order of elements,
a:visited and in visited state padding e.g. z-index of 1 is below z-index of 2
a:hover link with mouse over it border overflow sets what happens to content outside
div > span all SPANs one-level deep in a DIV margin of container, e.g. auto, hidden

Text Borders and Lists Everything Else


font-family font used, e.g. Helvetica, Arial border sets border style for all borders, in background sets background of an element, in the
font-size text size, e.g. 60px, 3em the format: border: (solid, dashed, format: background: (color) (image)
color text color, e.g. #000, #abcdef dotted, double) (width) (color), e.g. (repeat) (position), e.g. background:
font-weight how bold the text is, e.g. bold border: solid 1px #000 #000 url(bg.png) repeat-x top left
font-style what style the text is, e.g. italic border-top sets border style for a specific cursor sets shape of cursor, e.g. pointer
text-decorationsets a variety of effects on text, e.g. border-bottom border (same property syntax used outline a border drawn around an element
underline, overline, none border-left for padding and margin, e.g. that doesn’t affect the box model
text-align how text is aligned, e.g. center border-right margin-left) border-collapse sets how borders within tables
line-height spacing between lines, e.g. 2em list-style-type sets style of bullets, e.g. square behave, e.g. collapse
letter-spacing spacing between letters, e.g. 5px list-style- sets how text wraps when bulleted, clear sets on what side a new line starts in
text-indent indent of the first line, e.g. 2em position e.g. outside, inside relation to nearby floated elements,
text-transform applies formatting to text, e.g. upper- list-style-image sets an image for a bullet, e.g. e.g. left, right, both
case, lowercase, capitalize list-style-image:url(bullet.png)
vertical-align align relative to baseline, e.g. text-top Always write <!doctype html> in your files! imsky.org

You might also like