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.


background

sets all background style properties at once, such as color, image, origin and size, or repeat method.


background-color

sets the background color of an element.


background-image

sets one or more background images on an element.


background-position

sets the initial position for each background image. The position is relative to the position layer set by background-origin.


background-repeat

sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.


background-size

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.


border

sets an element's border. It's a shorthand for border-width, border-style, and border-color.


border-color

sets the color of all sides of an element's border.


border-style

sets the line style for all four sides of an element's border.


color

sets the foreground color value of an element's text and text decorations


cursor

sets mouse cursor to display when the mouse pointer is over an element.


display

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.


font

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.


font-size

sets the size of the font. This property is also used to compute the size of em, ex, and other relative length units.


font-style

sets whether a font should be styled with a normal, italic, or oblique face from its font-family.


font-weight

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.


height

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.


line-height

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.


list-style

shorthand to set list style properties list-style-type, list-style-image, and list-style-position.


margin

margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.


min-height

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.


min-width

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.


object-fit

sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.


opacity

sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.


overflow

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.


padding

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.


position

sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.


text-align

sets the horizontal alignment of an inline or table-cell box. This means it works like vertical-align but in the horizontal direction.


text-decoration

sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.


visibility

shows or hides an element without changing the layout of a document.


width

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.


z-index

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.


:link, :visited, :focused, :hover, :active

pseudo-classes representing the various states of a link (<a>) elements