Note: This document is a work in progress. You can help improve it.
CSS Properties We Like
There are many CSS properties you can use to affect the style of your page. In practice we find this list of CSS properties the most common and useful.
If you click any property's you will see the MDN documentation and demonstrations for each.
sets all background style properties at once, such as color, image, origin and size, or repeat method.
sets the background color of an element.
sets one or more background images on an element.
sets the initial position for each background image. The position is relative to the position layer set by background-origin.
sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
sets an element's border. It's a shorthand for border-width, border-style, and border-color.
sets the color of all sides of an element's border.
sets the line style for all four sides of an element's border.
sets the foreground color value of an element's text and text decorations
sets mouse cursor to display when the mouse pointer is over an element.
defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.
shorthand for font-style, font-variant, font-weight, font-size, line-height, and font-family. Alternatively, it sets an element's font to a system font.
sets the size of the font. This property is also used to compute the size of em, ex, and other relative length units.
sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
specifies the weight (or boldness) of the font. The font weights available to you will depend on the font-family you are using. Some fonts are only available in normal and bold.
specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
shorthand to set list style properties list-style-type, list-style-image, and list-style-position.
margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
sets how the content of a replaced element, such as an
<video>, should be resized to fit its container.
sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y.
sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.
sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
sets the horizontal alignment of an inline or table-cell box. This means it works like vertical-align but in the horizontal direction.
sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.
shows or hides an element without changing the layout of a document.
sets an element's width. By default it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.
sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
pseudo-classes representing the various states of a link (