Scribd
Upload
123 views1 page

Css Cheatsheet Portrait

This CSS cheat sheet provides a concise overview of common CSS selectors, properties, and values for positioning and styling elements, text formatting, borders, backgrounds, and other properties. Key selectors are described for targeting elements by tag name, id, class, descendant and child relationships. Common properties are outlined for controlling the box model, positioning, text styling, borders, backgrounds, and other visual effects. The cheat sheet is a useful reference for CSS basics.

Uploaded by

dovidiu
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
123 views1 page

Css Cheatsheet Portrait

This CSS cheat sheet provides a concise overview of common CSS selectors, properties, and values for positioning and styling elements, text formatting, borders, backgrounds, and other properties. Key selectors are described for targeting elements by tag name, id, class, descendant and child relationships. Common properties are outlined for controlling the box model, positioning, text styling, borders, backgrounds, and other visual effects. The cheat sheet is a useful reference for CSS basics.

Uploaded by

dovidiu
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 brought to you by pxleyes.

com

Selectors Box Model


div all DIV tags
div, span all DIV tags and all SPAN tags
div span all SPAN tags inside DIVs
#content element with ID “content”
.box all elements with CLASS “box”
ul#box UL tag with ID “box”
span.box all SPAN tags with CLASS “box” content
* all elements
#box * all elements inside #box
a:link, a:active, links in normal state, in clicked state,
a:visited and in visited state padding
a:hover link with mouse over it border
div > span all SPANs one-level deep in a DIV margin

Positioning Text
position places elements on screen, e.g. font-family font used, e.g. Helvetica, Arial
absolute, fixed, relative font-size text size, e.g. 60px, 3em
float stacks elements horizontally in a color text color, e.g. #000, #abcdef
particular direction, e.g. left font-weight how bold the text is, e.g. bold
top, left, right, specifies the offsets used in absolute, font-style what style the text is, e.g. italic
bottom fixed, and relative positions, e.g. text-decorationsets a variety of effects on text, e.g.
top:10px;left:10px underline, overline, none
display sets how the element is placed in the text-align how text is aligned, e.g. center
doc flow, e.g. block, inline, none line-height spacing between lines, e.g. 2em
z-index sets the stacking order of elements, letter-spacing spacing between letters, e.g. 5px
e.g. z-index of 1 is below z-index of 2 text-indent indent of the first line, e.g. 2em
overflow sets what happens to content outside text-transform applies formatting to text, e.g. upper-
of container, e.g. auto, hidden case, lowercase, capitalize
vertical-align align relative to baseline, e.g. text-top

Borders and Lists Everything Else


border sets border style for all borders, in background sets background of an element, in the
the format: border: (solid, dashed, format: background: (color) (image)
dotted, double) (width) (color), e.g. (repeat) (position), e.g. background:
border: solid 1px #000 #000 url(bg.png) repeat-x top left
border-top sets border style for a specific cursor sets shape of cursor, e.g. pointer
border-bottom border (same property syntax used outline a border drawn around an element
border-left for padding and margin, e.g. that doesn’t affect the box model
border-right margin-left) border-collapse sets how borders within tables
list-style-type sets style of bullets, e.g. square behave, e.g. collapse
list-style- sets how text wraps when bulleted, clear sets on what side a new line starts in
position e.g. outside, inside relation to nearby floated elements,
list-style-image sets an image for a bullet, e.g. e.g. left, right, both
list-style-image:url(bullet.png)
Always write <!doctype html> in your files! imsky.org

You might also like