CSS Reference
Here's a short description to many CSS properties, along with some examples, and links to further documentation. See Essential CSS for a full tutorial.
Background
- background-color - sets background color of an element
- background-image - sets one or several background images for an element, e.g.
background-image: url(image-address.png);
- background-repeat - defines how background images are repeated
- background-attachment - sets whether image scrolls with content or stays fixed in place
- background-position - sets the position of a background image
- background-size - sets the size of the background image
- background - shorthand for setting above properties (and more)
Border
You can specify one value for all 4 borders:
border-width: 2px;
or use 2 values for horizontal-vertical:
border-width: 2px 10px;
or 4 values for top right bottom left:
border-width: 2px 2em 5px 1em;
When not differentiating between the 4 borders, it's simpler to use the shorthand border
property.
You can also specify a specific border side in its own rule, by adding a direction after the word border
, such as border-top-width
or border-left-color
.
- border-width - set the border width, such as
2px
or0.1em
- border-color - set the border color, such as
green
or#8BC2D9
- border-style - set the border style, such as
solid
,dotted
ordashed
- border - shorthand to set the above 3 properties
CSS 3 properties:
- border-radius - set how rounded the border is
- box-shadow - add a drop shadow to an element
Color
- color - Sets the text color of an HTML element. (See Color value for possible values.)
- opacity - sets how opaque an element is, from 0 (transparent) to 0.5 (translucent) to 1 (fully opaque, the default).
Text
- text-align - control how text is aligned, such as
left
,right
,center
orjustify
- text-decoration - set a text decoration to
underline
,overline
orline-through
. Can also set color and style of line. - text-indent - set indentation of first line of text
- text-transform - change capitalization of text
- vertical-align - set vertical alignment of a box
- letter-spacing - set spacing between characters
- word-spacing - set spacing between words
- white-space - set how whitespace in the HTML element is handled (or ignored)
- direction - set the direction of the text
CSS 3 properties:
- text-overflow - specify how to signal overflowed text
- text-shadow - add a shadow to text (like box-shadow)
Font
- font-family - Set a prioritized list of fonts to use. Include backup fonts in case a user doesn't have certain fonts installed.
- font-style - lets you set the font to italic or the similar oblique
- font-variant - set small-caps and more
- font-weight - set boldness to bold or a weight from 100 to 300 to 600 to 900.
- font-size - set the size of text. See sizing for more.
- line-height - set the minimum height for lines of text
- font - shorthand to set the above properties.
- @font-face - CSS at-rule for specifying an the name and location of an included font. (You can also just include CSS from Google Fonts.)
Margin and Padding
Like borders, margins and padding can be specified overall or in specific directions. See Boxes for more info.
- margin - sets the margin of an element, which is outside the border
- padding - sets the padding of an element, which is inside the border
Outline
Outlines are drawn outside the border without taking up their own space (i.e. outlines stay within the padding area or overlap with neighboring elements). Unlike borders, outlines can be drawn around non-rectangles and they cannot have different values for different sides. For ordinary items, you can usually you can just use the border property instead of outline.
The CSS for the above paragraph:
margin: 15px;
border: solid 4px blue;
padding: 10px;
background-color: lightgreen;
outline: red 7px solid;
- outline-width
- outline-style
- outline-color
- outline - shorthand to set the above 3 properties
Box Size
Set the width and height of elements. Instead of setting the width absolutely, it can be a good idea to set the max-width, so the content still become narrower for a small screen. Note that min-width overrides max-width which overrides width.
- width - sets the width of an element (the area inside the padding)
- min-width - sets the minimum width, but the width can be displayed larger
- max-width - sets the maximum with, but the width can be displayed smaller
- height - sets the height of an element
- min-height
- max-height
See also CSS3 Flexible Boxes.
Visual formatting
- float - move an element to the
right
orleft
of content. - clear - specify whether an element can be next to a floated element
- z-index
- overflow
- visibility - set to
hidden
to hide an element (while still taking up space) - cursor - set how the cursor appears over the element
Table
Generated content
CSS 3
CSS3 is the latest version of CSS which adds many new features. Some CSS3 properties have been included above, and here are some additional ones, with links to Mozilla's guides on each topic.
- linear gradient - creates a linear gradient image
- media queries - let you tailor the presentation to the device
- Transitions - create simple transition effects
- Animations - animate CSS transitions
- Transforms - transform the position and shape of an element