css properties

@charset

The @charset rule specifies the character encoding used in the style sheet. The @charset rule must be the first element in the style sheet and not be preceded by any character. If several @charset rules are defined, only the first one is used. The @charset rule cannot be used inside a style attribute (on an HTML element), or inside the <style> element where the character set of the HTML page is relevant.

animation-delay

The animation-delay property specifies a delay for the start of an animation. The numbers in the table specify the first browser version that fully supports the property.

animation-direction

The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

animation-fill-mode

The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). The numbers in the table specify the first browser version that fully supports the property.

animation-iteration-count

The animation-iteration-count property specifies the number of times an animation should be played. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

animation-play-state

The animation-play-state property specifies whether the animation is running or paused. The numbers in the table specify the first browser version that fully supports the property.

animation-timing-function

The animation-timing-function specifies the speed curve of an animation. The speed curve is used to make the changes smoothly.

background-attachment

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. CSS tutorial: CSS Background

background-blend-mode

The background-blend-mode property defines the blending mode of each background layer (color and/or image). The numbers in the table specify the first browser version that fully supports the property.

background-color

The background-color property sets the background color of an element. Tip: Use a background color and a text color that makes the text easy to read.

background-image

The background-image property sets one or more background images for an element. Tip: The background of an element is the total size of the element, including padding and border (but not the margin).

background-origin

The background-origin property specifies the origin position (the background positioning area) of a background image.

background-position

The background-position property sets the starting position of a background image.

background-repeat

The background-repeat property sets if/how a background image will be repeated. Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

background-size

The background-size property specifies the size of the background images.

clip-path

The clip-path property lets you clip an element to a basic shape or to an SVG source. Note: The clip-path property will replace the deprecated clip property. The numbers in the table specify the first browser version that fully supports the property.

color

The color property specifies the color of text.

column-count

The column-count property specifies the number of columns an element should be divided into. The numbers in the table specify the first browser version that fully supports the property.

column-fill

The column-fill property specifies how to fill columns, balanced or not.

column-gap

The column-gap property specifies the gap between the columns.

column-rule-color

The column-rule-color property specifies the color of the rule between columns. The numbers in the table specify the first browser version that fully supports the property.

column-rule-style

The column-rule-style property specifies the style of the rule between columns. The numbers in the table specify the first browser version that fully supports the property.

column-rule-width

The column-rule-width property specifies the width of the rule between columns. The numbers in the table specify the first browser version that fully supports the property.

column-span

The column-span property specifies how many columns an element should span across. The numbers in the table specify the first browser version that fully supports the property.

column-width

The column-width property specifies the column width. column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.

display

The display property specifies the display behavior (the type of rendering box) of an element.

float

The float property specifies whether an element should float to the left, right, or not at all. Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).

filter

Tip: The filter property defines visual effects (like blur and saturation) to an element (often <img>). The numbers in the table specify the first browser version that fully supports the property.

flex-direction

Tip: The flex-direction property specifies the direction of the flexible items.

bottom

affects the vertical position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position. If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside. If position: static; - the bottom property has no effect. CSS tutorial: CSS Positioning

border-color

border-color: red green blue pink; top border is red right border is green bottom border is blue left border is pink The border-color property sets the color of an element's four borders. This property can have from one to four values. If the border-color property has three values:

border-image

border-image-source border-image-slice border-image-width border-image-outset border-image-repeat The border-image property allows you to specify an image to be used as the border around an element. Omitted values are set to their default values.

border-style

border-style: dotted solid double dashed; top border is dotted right border is solid bottom border is double left border is dashed border-style: dotted solid double; top border is dotted right and left borders are solid bottom border is double border-style: dotted solid; top and bottom borders are dotted right and left borders are solid border-style: dotted;all four borders are dotted The border-style property sets the style of an element's four borders. This property can have from one to four values.

border-width

border-width: thin medium thick 10px; top border is thin right border is medium bottom border is thick left border is 10px border-width: thin medium thick; top border is thin right and left borders are medium bottom border is thick border-width: thin medium; top and bottom borders are thin right and left borders are medium border-width: thin;all four borders are thin The border-width property sets the width of an element's four borders. This property can have from one to four values. Note: Always declare the border-style property before the border-widthproperty. An element must have borders before you can set the width.

column-rule

column-rule-width column-rule-style (required) column-rule-color The column-rule property sets the width, style, and color of the rule between columns. If column-rule-color is omitted, the color applied will be the color of the text.

columns

column-width column-count The columns property is a shorthand property for:

clear

controls the flow next to floated elements. The clear property specifies what should happen with the element that is next to a floating element.

background-clip

defines how far the background (color or image) should extend within an element. CSS tutorial: CSS Backgrounds

animation-duration

defines how long an animation should take to complete one cycle. The numbers in the table specify the first browser version that fully supports the property.

backface-visibility

defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. To better understand this property,view a demo.

align-content

modifies the behavior of the flex-wrap property. It is similar toalign-items, but instead of aligning flex items, it aligns flex lines. Note: There must be multiple lines of items for this property to have any effect!

all

resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. The numbers in the table specify the first browser version that fully supports the property.

border-spacing

sets the distance between the borders of adjacent cells. Note: This property works only when border-collapse is separate. The numbers in the table specify the first browser version that fully supports the property.

empty-cells

sets whether or not to display borders on empty cells in a table. Note: This property has no effect ifborder-collapse is "collapse". The numbers in the table specify the first browser version that fully supports the property.

animation-name

specifies a name for the @keyframes animation. The numbers in the table specify the first browser version that fully supports the property. CSS tutorial: CSS Animations

flex-grow

specifies how much the item will grow relative to the rest of the flexible items inside the same container. Note: If the element is not a flexible item, the flex-grow property has no effect. The numbers in the table specify the first browser version that fully supports the property.

flex-shrink

specifies how the item will shrink relative to the rest of the flexible items inside the same container. Note: If the element is not a flexible item, the flex-shrink property has no effect. Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

accent-color

specifies the accent color for user-interface controls like: <input type="checkbox">, <input type="radio">, <input type="range"> and <progress>.

align-self

specifies the alignment for the selected item inside the flexible container. Note: The align-self property overrides the flexible container's align-items property. The numbers in the table specify the first browser version that fully supports the property.

caret-color

specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable. The numbers in the table specify the first browser version that fully supports the property.

flex-basis

specifies the initial length of a flexible item. Note: If the element is not a flexible item, the flex-basis property has no effect. The numbers in the table specify the first browser version that fully supports the property.

cursor

specifies the mouse cursor to be displayed when pointing over an element. The numbers in the table specify the first browser version that fully supports the property.

caption-side

specifies the placement of a table caption. CSS tutorial: CSS Table

direction

specifies the text direction/writing direction within a block-level element. Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document. The numbers in the table specify the first browser version that fully supports the property.

break-after

specifies whether or not a page break, column break, or region break should occur after the specifiedelement. The break-after property extends the CSS2 page-break-after property. The numbers in the table specify the first browser version that fully supports the property.

break-before

specifies whether or not a page break, column break, or region break should occur before the specifiedelement. The break-before property extends the CSS2 page-break-before property. The numbers in the table specify the first browser version that fully supports the property.

break-inside

specifies whether or not a page break, column break, or region break should occur inside the specifiedelement. The break-inside property extends then CSS2 page-break-inside property. The numbers in the table specify the first browser version that fully supports the property.

flex-wrap

specifies whether the flexible items should wrap or not. Note: If the elements are not flexible items, the flex-wrap property has no effect. The numbers in the table specify the first browser version that fully supports the property.

box-decoration-break

The box-decoration-break property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented. The numbers in the table specify the first browser version that fully supports the property.

box-shadow

The box-shadow property attaches one or more shadows to an element. The numbers in the table specify the first browser version that fully supports the property.

box-sizing

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. The numbers in the table specify the first browser version that fully supports the property.

font

font-style font-variant font-weight font-size/line-height font-family The font property is a shorthand property for: Note: The line-height property sets the space between lines.

border-bottom

is a shorthand property for (in the following order): border-bottom-width border-bottom-style border-bottom-color If border-bottom-color is omitted, the color applied will be the color of the text. The numbers in the table specify the first browser version that fully supports the property.

border-left

is a shorthand property for (in the following order): border-left-width border-left-style (required) border-left-color If border-left-color is omitted, the color applied will be the color of the text. The numbers in the table specify the first browser version that fully supports the property.

border-right

is a shorthand property for (in the following order): border-right-width border-right-style (required) border-right-color If border-right-color is omitted, the color applied will be the color of the text. The numbers in the table specify the first browser version that fully supports the property.

animation

is a shorthand property for: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state Note: Always specify the animation-duration property, otherwise the duration is 0, and will never be played. The numbers in the table specify the first browser version that fully supports the property.

background

is a shorthand property for: background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed. The numbers in the table specify the first browser version that fully supports the property.

border

is a shorthand property for: border-width border-style (required) border-color If border-color is omitted, the color applied will be the color of the text. The numbers in the table specify the first browser version that fully supports the property.

flex-flow

is a shorthand property for: flex-direction flex-wrap Note: If the elements are not flexible items, the flex-flow property has no effect. The numbers in the table specify the first browser version that fully supports the property.

backdrop-filter

is used to apply a graphical effect to the area behind an element. Tip: To see the effect, the element or its background must be at least partially transparent. The numbers in the table specify the first browser version that fully supports the property.

align-items

The align-items property specifies the default alignment for items inside the flexible container.

border-bottom-color

The border-bottom-color property sets the color of an element's bottom border.

border-bottom-left-radius

The border-bottom-left-radius property defines the radius of the bottom-left corner.

border-bottom-right-radius

The border-bottom-right-radius property defines the radius of the bottom-right corner.

border-bottom-style

The border-bottom-style property sets the style of an element's bottom border. The numbers in the table specify the first browser version that fully supports the property.

border-bottom-width

The border-bottom-width property sets the width of an element's bottom border.

border-collapse

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML. The numbers in the table specify the first browser version that fully supports the property.

border-image-outset

The border-image-outset property specifies the amount by which the border image area extends beyond the border box. Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties). The numbers in the table specify the first browser version that fully supports the property.

border-image-repeat

The border-image-repeat property specifies whether the border image should be repeated, rounded, spaced or stretched. Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties). The numbers in the table specify the first browser version that fully supports the property.

border-image-slice

The border-image-slice property specifies how to slice the image specified byborder-image-source. The image is always sliced into nine sections: four corners, four edges and the middle. The "middle" part is treated as fully transparent, unless the fill keyword is set.

border-image-source

The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element). Tip: If the value is "none", or if the image cannot be displayed, the border styles will be used.

border-image-width

The border-image-width property specifies the width of the border image. Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties). The numbers in the table specify the first browser version that fully supports the property.

border-left-color

The border-left-color property sets the color of an element's left border.

border-left-style

The border-left-style property sets the style of an element's left border. The numbers in the table specify the first browser version that fully supports the property.

border-left-width

The border-left-width property sets the width of an element's left border.

border-radius

The border-radius property defines the radius of the element's corners. This property can have from one to four values. Here are the rules:

border-right-color

The border-right-color property sets the color of an element's right border.

border-right-style

The border-right-style property sets the style of an element's right border. The numbers in the table specify the first browser version that fully supports the property.

border-right-width

The border-right-width property sets the width of an element's right border.

border-top

The border-top shorthand property sets all the top border properties in one declaration. border-top-width border-top-style (required) border-top-color The properties that can be set must be in the following order:

border-top-color

The border-top-color property sets the color of an element's top border.

border-top-left-radius

The border-top-left-radius property defines the radius of the top-left corner.

border-top-right-radius

The border-top-right-radius property defines the radius of the top-right corner.

border-top-style

The border-top-style property sets the style of an element's top border. The numbers in the table specify the first browser version that fully supports the property.

border-top-width

The border-top-width property sets the width of an element's top border.

content

The content property is used with the ::before and ::after pseudo-elements, to insert generated content. CSS reference: ::before pseudo element

counter-increment

The counter-increment property increases or decreases the value of one or more CSS counters. The numbers in the table specify the first browser version that fully supports the property.

counter-reset

The counter-reset property creates or resets one or more CSS counters. The numbers in the table specify the first browser version that fully supports the property.

flex

Tip: flex-grow flex-shrink flex-basis The flex property is a shorthand property for: Note: If the element is not a flexible item, the flex property has no effect.

clip

What happens if an image is larger than its containing element? The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped. Note: The clip property is deprecated and will be replaced by the clip-path property in the future.