CSS properties - list

revision:


property list

align-content: aligns items in a flex container along flex lines.

align-items: aligns evenly spaced items in a flex container.

align-self: aligns an item inside a flex container.

all: resets all element properties to its default or inherited values.

animation: creates an animating element.

animation-delay: sets a delay before an animation begins.

animation-direction: sets how, in which direction, an animation is played.

animation-duration: defines the duration of an animation cycle.

animation-fill-mode: defines how styles are applied before and after animation.

animation-iteration-count: sets the number of times an animation is played.

animation-name: defines a name for the animation.

animation-play-state: sets the animation play state to running or paused.

animation-timing-function: specifies the animation speed curve.

backface-visibility: shows or hides the backface visibility of an element.

background: sets the background of an element.

background-attachment: defines how the background is attached to an element.

background-blend-mode: defines the background layer blending mode.

background-clip: defines how background extends beyond the element.

background-color: sets the background color of the element.

background-image: specifies a background image for an element.

background-origin: specifies the background image origin position.

background-position: sets the position of a background image.

background-repeat: specifies how the background image is repeated.

background-size: sets the size of the background image.

border: specifies a border for an element

border-bottom: specifies a bottom border for an element.

border-bottom-color: sets the color of a bottom border.

border-bottom-left-radius: sets the border radius of the bottom left corner.

border-bottom-right-radius: sets the border radius of the bottom right corner.

border-bottom-style: sets the style of the bottom border.

border-bottom-width: sets the width of the bottom border.

border-collapse sets table borders to single collapsed line or separated.

border-color: sets the color of the border.

border-image: defines an image as border, instead of a color.

border-image-outset: sets how far a border image extends beyond the border.

border-image-repeat: defines if and how the border image is repeated.

border-image-slice: defines how the border image will be sliced.

border-image-source: specifies the url of the border image file.

border-image-width: sets the width of the image border.

border-left: sets the left border of the element.

border-left-color: sets the color of the left border.

border-left-style: sets the style of the left border.

border-left-width: sets the width of the left border.

border-radius: sets the radius of the border.

border-right: sets the right border of the element.

border-right-color: sets the color of the right border.

border-right-style: sets the style of the right border.

border-right-width: sets the width of the right border.

border-spacing: sets the adjacent table cell distance.

border-style: defines the style of the border.

border-top: sets the top border of the element.

border-top-color: sets the color of the top border.

border-top-left-radius: sets the border radius of the top left corner.

border-top-right-radius: sets the border radius of the top right corner.

border-top-style: sets the style of the top border.

border-top-width: sets the width of the top border.

border-width: sets the border width of the element.

bottom: positions the element from the bottom of the relative container.

box-shadow: adds a shadow effect to an element.

box-sizing: sets how element height and width are calculated.

caption-side: defines on which side of the table a caption is placed.

caret-color: sets the color of the blinking mouse caret.

@charset: pecifies the character encoding of the stylesheet.

clear: sets the element side that does not allow floating elements.

clip: sets how an image is cropped or clipped inside a container.

clip-path: clips an element inside a specific shape or SVG.

color: specifies the color of text in an element.

column-count: divides an element into the specified number of columns.

column-fill: specifies how divided columns are filled.

column-gap: specifies the space between divided columns.

column-rule: sets the style, width, and color of a column divider.

column-rule-color: sets the color of a column divider.

column-rule-style: sets the style of a column divider.

column-rule-width: sets the width of a column divider.

column-span: sets number of divided columns an element should span.

column-width: specifies the width of a divided column.

columns: divide an element into columns of a certain width.

content: ussed to insert content before or after an element.

counter-increment: increase or decrease a CSS counter.

counter-reset: initialize or reset CSS counter.

cursor: specifies the shape of the mouse cursor.

direction: specifies the text writing direction of a block-level element.

display: specify an element's display behavior.

empty-cells: specifies whether empty table cell borders will be displayed.

filter: adds an image enhancing effect to an image.

flex: specifies the width of the flexible items.

flex-basis: specifies the initial width of a flex item.

flex-direction: specifies the direction for the flex item to align.

flex-flow: controls the direction and wrapping of flexible items.

flex-grow: specifies how a flex item can grow inside the container.

flex-shrink: specifies how a flex item can shrink inside the container.

flex-wrap: specifies how flexible items wrap inside the container.

float: sets how an element is positioned relative to other elements.

font: Sets font family, variant, weight, height, and size for an element.

@font-face: embeds a custom font inside a web page.

font-family: sets the font family for an element.

font-kerning: sets the spacing between the font's characters.

font-size: sets the size of the font for an element.

font-size-adjust: specifies a fall-back font size.

font-stretch: sets the text characters to a wider or narrower variant.

font-style: set the font style to normal, italic, or oblique.

font-variant: specifies that text is displayed in a small-caps font.

font-weight: sets the weight or thickness of the font.

grid: defines a grid layout with responsive rows and columns.

grid-area: sets the size and location of grid items in a grid container.

grid-auto-columns: specifies the size of the columns in a grid container.

grid-auto-flow: specifies the initial placement of items in a grid container.

grid-auto-rows: specifies the initial size of the items in a grid container.

grid-column: specifies the size and location of a grid item in a grid container.

grid-column-end: specifies in which column-line the grid item will end.

grid-column-gap: specifies the gap size between columns in a grid container.

grid-column-start: specifies in which column line the grid item will start.

grid-gap: specifies the gap size between grid rows and columns.

grid-row: specifies the grid item size and location in a grid container.

grid-row-end: specifies in which row-line the grid item will end.

grid-row-gap: specifies the gap size between rows in a grid container.

grid-row-start: specifies in which row line the grid item will start.

grid-template: divides a page into sections with a size, position, and layer.

grid-template-areas: specifies area in a grid container.

grid-template-columns: sets the number and width of columns in a grid container.

grid-template-rows: sets the number and height of rows in a grid container.

height: sets the height of an element.

hyphens: specifies hyphenation with wrap opportunities in a line of text.

@import: imports a style sheet inside another style sheet.

justify-content: defines the alignment of items in a flex container.

@keyframes: defines the CSS style to animate.

left: positions the element from the left of the relative container.

letter-spacing: sets the spacing between characters.

line-height: sets the vertical spacing between lines of text.

list-style: defines the markers (bullet points) for items in a list.

list-style-image: defines an image markers (bullet points) for items in a list.

list-style-position: sets the marker (bullet point) positions for items in a list.

list-style-type: defines the marker types (bullet points) for items in a list.

margin: sets the margin (outside spacing) for an element.

margin-bottom: sets the bottom margin (outside spacing) for an element.

margin-left: sets the left margin (outside spacing) for an element.

margin-right: sets the right margin (outside spacing) for an element.

margin-top: sets the top margin (outside spacing) for an element.

max-height: sets the maximumn height for an element.

max-width: sets the maximum width for an element.

@media: applies media queries to a page.

min-height: sets the minimum height for an element.

min-width: sets the minimum width for an element.

object-fit: specifies how an image or video fits inside a container.

object-position: specifies the image or video position inside a container.

opacity: sets the opacity (transparency) of the element.

order: specifies the order of an item in a flex container.

outline: adds an outline (highlighted border) to an element.

outline-color: sets the color of an outline.

outline-offset: sets the space between the outline and border.

outline-style: sets the style of an outline.

outline-width: sets the width of an outline.

overflow: specifies the flow of content that exceeds the container.

overflow-x: specifies the flow of content that exceeds the container width.

overflow-y: specifies the flow of content that exceeds the container height.

padding: sets the spacing between content and element border.

padding-bottom: sets the spacing between content and bottom element border.

padding-left: sets the spacing between content and left element border.

padding-right: sets the spacing between content and right element border.

padding-top: sets the spacing between content and top element border.

page-break-after: adds a print page-break after an element.

page-break-before: adds a print page-break before an element.

page-break-inside: apecifies if print page-break is allowed inside an element.

perspective: adds perspective to a 3D-positioned element.

perspective-origin: sets the origin of the perspective for a 3D-positioned element.

pointer-events: specifies whether element reacts to pointer events or not.

position: sets the element's positioning method.

quotes: defines the quotation marks to be used on text.

right: positions the element from the right of the relative container.

scroll-behavior: specifies the scrolling behavior of an element.

table-layout: aligns elements according to a table with rows and columns.

text-align: sets the alignment of text inside an element.

text-align-last: sets the alignment for the last line of text.

text-decoration: defines the style and color of underlined text.

text-decoration-color: defines the color of underlined text.

text-decoration-line: defines the kind of line to use with text.

text-decoration-style: defines the style of underlined text.

text-indent: sets the indentation to the beginning of text.

text-justify: defines the text justification inside a container.

text-overflow: sets the display behavior of text that overflows a container.

text-shadow: adds a shadow effect to text.

text-transform defines text capitalization or casing.

top: positions the element from the top of the relative container.

transform: applies a 2D or 3D transformation to an element.

transform-origin: sets the origin for the transformation of the element.

transform-style: specifies the display behavior of 3D space nested elements.

transition: creates transitions from one property value to another.

transition-delay: creates a delay before the transition effect starts.

transition-duration: specifies the time the transition will take.

transition-property: specifies the CSS property that will transition.

transition-timing-function: defines the speed curve function of the transition.

user-select: Specifies how text can be selected (highlighted).

vertical-align: Specifies vertical alignment of an element.

visibility: Specifies the visibility of an element.

white-space: Specifies how white-space is handled inside an element.

width: Sets the width of an element.

word-break: Specifies how line breaks take place.

word-spacing: Sets the spacing between words.

word-wrap: Specifies how long words can be wrapped.

writing-mode: Sets the text reading orientation: top to bottom, etc.

z-index: Sets the vertical stacking order relative to other elements.