You are here
CSS cheat sheet
Liraz Siri - Mon, 2010/03/22 - 14:02
While reading CSS books and experimenting I found it helpful to take notes and put together a cheat sheet for quick reference. I figured others might find it useful so I'm sharing. I've also uploaded a simple PDF version.
Selectors
Basic
h1
select all <h1> tags
h1.special
select h1 tags of the special class
h1#special
select h1 tags of special id
p a
select <a> tags descendant from p
h1, h2
select both h1, h2
*
select all tags
implicit in
.class = *.class
#class = *#class
#banner *
select all tags inside banner
a:link
selects link that guest hasn't visited
regular style
a:visited
link that visitor has clicked before
a:hover
link when mouse is hovered over
a:active
link when it's clicked (just a ms)
.class1.class2
select elements that have both class1 and class2
Pseudo-classes
generate content
:before
inserts content before
p.tip:before {content: "HOT TIP!" }
:after
like :before but after
properties
generated pseudo-classes can be styled like any other
display
color
border
content
string
content: "(link) "
urls
content: url(path/to/image)
attributes
content: attr(href)
combinations
content: " [" attr(href) "]"
:first-child
select and format just the first child of an element
e.g.,
li:first-child { font-weight: bold; }
formats all first elements in bold
:focus
when element receives focus (e.g., click or tab)
e.g.,
input:focus { background-color: #FFFFCC; }
Advanced selectors
child selectors
body > h1
select any h1 that is a child of body
adjacent siblings
h2 + p
select p right after h2
attribute selectos
img[title]
select only img tags with "title" attribute
.photo[title]
select any element with photo class and a title attribute
input[type="text"]
input fields of type text
a[href][title]
select a that has both href and title attrs
*[title]
any element that has title attribute
img[title~="Figure"]
any img with title that contains Figure in it
regexp match?
img[title^="bar"]
any img with title that starts with "bar"
img[title$="bar"]
any img with title that ends with "bar"
img[title*="bar"]
any img with title that contains substring "bar"
*[lang|="en"]
any element with lang attr that
equals en
begins with en-
Pseudo-classes
:first-line
:first-letter
just the first letter
can only be applied to block elements (not inline)
Psuedo-elements
:before
:after
# examples
h2:before {content: "]]"; color: silver;}
body:after {content: " The End.";}
Floats
containing block
nearest block-level ancestor
floated element generates a block box
regardless of its type
will be laid out as a float
Rules
-
stay within borders of containing element
left/right outer edge may not be to the left of inner left/right containing block.
-
give precedence to existing floats
- prevent floats from overwriting each other
-
floats are safe
left outer edge must be to the right of the right outer edge of a preceding element.
-
no overlapping between float elements
if they collide the loosing element will be floated down
-
can't be higher than inner top (pre-padding) of containing parent
-
floats can't be higher than the tops of preceding floats
If we have 3 floats, and the first two are floated to the left, the third float will float only as high as the second float.
-
floats can't float higher than the top of the line box generated by a preceding element
-
floats get pushed down to a new line height if there isn't room for them in the containing box
-
given the above constraints, float as high as possible
-
left floating elements try to float as left as possible, right floating elements try to float as right as possible
BUT
a higher position is preferred to floating more right
Rule consequences
when floated element is taller than container?
the bottom sticks out of the container
countermeasure
floated element will expand to contain floated
descendants
negative margins
can cause floats to appear to escape their parents
just like negative margins on non-floated elements
can make the child appear wider than it's parent
if floated element is wider than it's parent
it can stick out
negative margins may cause a float to overlap inline elements
inline elements rendered on top of the float
a float expands to contain anything in it
move to the left or right edge of the
browser window (or containing window)
floated inline methods are treated like blocks
content with a background or border runs underneath the float
how to prevent this - overflow: hidden
clear property
don't wrap around a floated item
left - drop below left floated items
right - drop below right floated items
both - drop below both
Positioning
position := static | relative | absolute | fixed | inherit
static
generated as normal
relative
offset by some distance
element retains it's shape
space it would ordinarily have occupied preserved
absolute
removed from the flow
positioned with respect to its *containing* block
may be another element in the document
space the element might have occupied is closed up
as if the element didn't exist
positioned element generates a block-level box
even if it's inline
fixed
element box behaves like absolute
but containing block is the viewport itself
containing block
in HTML the root element is HTML
some browsers use body
initial containing block
rectangle the size of the viewport
nearest ancestor (of any kind) that has position value != static
block-level containing ancestor
padding edge (I.e., border bounded area)
inline-level containing ancestor
content edge of the ancestor
in ltr lang - top left corner, right bottom corner
no ancestors?
initial containing block
important - elements can be positioned outside containing block
maybe it should be called "positioning context" instead
offset properties
top, right, bottom, left := <length> | <percentage> | auto | inherit
percentage
containing width for left / right
height for top / bottom
auto
element position if it were static
positioning can cause height/width to be calculated automatically
e.g.,
height 100%
top: 0
bottom: 0
width 100%
left: 0
right: 0
margins apply to the position boundaries
you're really specifying the position of the outer edge
setting width/height can make a difference
IF you set borders, padding, margin
because width/height set inner edges
the content box
fixed position
can be used to simulate frames of old
just like absolute position except
the containing block is the viewport
Properties
formatting text
line-height
letter-spacing # how much space to add between letters
font-family
sans # clean and simple appearance (for headlines)
Arial
Helvetica
Verdana
Tahoma
Formata
Sans
serif # better for long passages of text
Georgia
Times
Times New Roman
popular combinations
Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, monospace
Georgia, "Times New Roman", Times, serif
font size
keywords
xx-small x-small small medium large x-large xx-large
each increase or decreases by 1.2
ems and percentages the same thing
font styles
font-style: italic|bold|normal
text-transform: uppercase
font-variant: small-caps
text-decoration: underline|overline|line-through|blink
spacing attributed
letter-spacing
word-spacing
line-height
normal setting is 120%
alignment
text-align: left|center|right|justify
text-indent
e.g., text-indent: 3em
indent first line 3em
text-shadow
<color> <offset-x> <offset-y> <blur-radius>?
text-shadow: green 5px 0.5em;
not supported in Firefox
white-space
normal | nowrap | pre | pre-wrap | pre-line | inherit
normal := discards extra whitespace
collapses multiple "spaces"
pre := treated as if it's pre
whitespace is nog ignored
pre-line := whitespace collapsed, linefeeds honored
pre-wrap :=
like pre except lines wrap
no-wrap := prevent wrap breaks from being rendered
line breaks must be inserted with <br />
lists
list-style-type: square|disc|circle
list-style-position: outside|inside
margins and padding
margin: 5px
5px on all sides
margin: 5px 1px
5px top and bottom
1px on the sides
margins between elements don't get added
the larger of the two margins is applied
padding is added
whenever vertical margins touch the margins collapse
inline vs block
display: inline|block;
inline elements don't get any taller with padding or margins
except for img tags
colors
rgb(30%, 30%, 30%)
#FFF #FFFFFF
names
aqua
fuchsia
lime
olive
red
white
black
gray
maroon
orange
silver
yellow
blue
green
navy
purple
teal
border
each side can have a different property
width / height
em is the text size
percentages = size of containing element
max-width
min-width
max-height
min-height
width/height do not include borders, padding and margins
just the content
displayed width = width + left padding + right padding + left border
+ right border + left margin + right margins
height property
dangerous because it's hard to know in advance the size of content
in a box
amount of margins between paragraphs, headlines
varies from browser to browser
for consistent predictable results set this yourself
background images
background-image: url(images/bg.gif);
url is relative to the stylesheet not the HTML page
root relative
absolute
background-repeat
repeat
normal setting, repeat both on x and y
repeat-x
repeat-y
no-repeat
displays the image a single time
background-position
precise values
<distance-from-left> <distance-from-top>
keywords
<horizontal> <vertical>
<horizontal> := left|center|right
<vertical> := top|center|bottom
bottom is the bottom of the content
not necessarily the bottom of the pag
e.g.,
background-position: left center
percentages
short hand
background := <background-color> <background-image>
<background-attachment> <background-position>
it's possible to replace borders with hand-drawn lines
overflow := hidden | visible | scroll | auto
visible - normal setting what browsers usually do
scroll - add scroll bars
auto - make scroll bars optional
hidden - hides extended content
clipping can provide precise control over hidden content overflows
visibility := visible | hidden | collapse | inherit
in invisible state the element is still there
you just can't see it
it effects layout normally
descendant of invisible element can be visible
Outlines
Like borders except:
- they don't cause reflow: good for adding an outline to emphasize focus
- they can be non-rectangular
- they can invert the background
Syntax:
outline := <outline-color> || <outline-style> || <outline-width>
outline-width := thin | medium | thick | <length>
only one (unlike borders with top bottom left right)
outline-style := dotted | dashed | solid | double | groove |ridge | inset | outset
outline-color := <color> | invert | inherit
Tips
separation of concerns
HTML should describe structure
don't use class names that describe style
CSS should describe styling
start with an inline style sheet
after perfection move CSS code to an external sheet
title attribute adds tooltips to images and links
don't use div when you can use HTML tags
classes vs ids
classes for repeating elements
id selectors for unique elements
ids get priority
margin: 0 auto
lets content float
equivalent to <center>
margins collapse
line-height creates implicit padding
Workflow
put temporary code on top of the stylesheet
makes it easiest to work with firebug
name classes by structure, not styling
separation of concerns
HTML for content structure
CSS for styling
refactor
eliminate code
CSS
HTML
let the future take care of itself
use advanced selectors (instead of tons of classes)
use more tag types when available
not everything should be a div
minimize reloads
edit CSS mode
better than editing on server
copy to server at the end
refactor in gvim
debugging
draw borders to better understand box model
use two firebug windows
one for selecting
one for editing live
Misc
element types
replaced vs non-replaced
whether or not the content is included in the HTML
most html tags non-replaced
replaced tags
img
input tag
block vs inline
block
by default
fills its parent element
can not have other elements at its sides
I.e., generates a break before and after box
e.g.,
p
div
li
special case that generates marker
inline
generated line boxes that are flowed within parent
internal style sheet
<style type="text/css"></style>
only in the head
inline style sheets
no time and bandwidth saving
class names
letters, numbers, hyphens and underscores
must start with a letter
case sensitive
terminology
ancestor
descendent
parent
closest ancestor
child
closest descendent
siblings
inheritance
not passed
border properties
placement properties
margins
paddings
Specificity of CSS properties
highest specificity wins
weights
tag selector = 1
class selector = 10
ID selector = 100
inline style = 1000
overruling specifiy
!important after any prperty
a { color: teal !important; }
organizing styles and stylesheets
name styles by purpose not appearance
refactor common styles to separate classes
combine multiple classes
group styles
apply to related parts ofa page
group styles with related purpose
xhtml
differences from HTML
lowercase tags
quotation marks required for xhtml
all tags must be closed
<br />
validator.w3.org
tags
p # for paragraphs
li
dl # definition list
dt # definition term
blockquote # quotes
q # one line quotes
cite # referencing
address # identify and supply contact info
table
tags
caption
attribute align=top|bottom
colgroup
col
thead
tr
th
tbody
tr
td
cell properties
text-align
vertical-align top|baseline|middle|bottom
border-collapse: collapse|separate
Add new comment