CSS Properties
Reading
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.
box-shadow
adds shadow effects around an element's frame.
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, :focus, :hover, :active
pseudo-classes representing the various states of a link (
<a>) elements