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-color - sets background color of an element
- background-image - sets one or several background images for an element, e.g.
- 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)
You can specify one value for all 4 borders:
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
You can also specify a specific border side in its own rule, by adding a direction after the word
border, such as
CSS 3 properties:
- 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-align - control how text is aligned, such as
- text-decoration - set a text decoration to
line-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-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
The CSS for the above paragraph:
margin: 15px; border: solid 4px blue; padding: 10px; background-color: lightgreen; outline: red 7px solid;
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
See also CSS3 Flexible Boxes.
- float - move an element to the
- clear - specify whether an element can be next to a floated element
- visibility - set to
hiddento hide an element (while still taking up space)
- cursor - set how the cursor appears over the element
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.