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.