CSS
topic name here
note here
Anchor element
display: block;
The element generates a block box, generating line breaks both before and after the element when in the normal flow
display: inline;
The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
display: flex;
The element behaves like a block-level element and lays out its content according to the flexbox model
display: inline flex;
The element behaves like an inline-level element and lays out its content according to the flexbox model.
display: grid;
The element behaves like a block-level element and lays out its content according to the grid model.
display: inline grid;
The element behaves like an inline-level element and lays out its content according to the grid model.
display: block;
The element generates a block box, generating line breaks both before and after the element when in the normal flow
sets the accent color for user-interface controls generated by some elements
accent-color: auto;
Represents a UA-chosen color, which should match the accent color of the platform, if any
accent-color: <color>;
Specifies the color to be used as the accent color.
sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis
align-content: normal;
The items are packed in their default position as if no align-content value was set.
align-content: start;
The items are packed flush to each other against the start edge of the alignment container in the cross axis.
sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
align-items: normal;
The effect of this keyword is dependent of the layout mode we are in
align-items: flex-start;
Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.
overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis
align-self: auto;
Computes to the parent's align-items value
align-self: normal;
The effect of this keyword is dependent of the layout mode we are in.
shorthand CSS property applies an animation between styles.
<single-easing-function>
Determines the type of transition. The value must be one of those available in <easing-function>.
<single-animation-iteration-count>
The number of times the animation is played. The value must be one of those available in animation-iteration-count.
specifies the composite operation to use when multiple animations affect the same property simultaneously
animation-composition: replace;
The effect value overrides the underlying value of the property. This is the default value
animation-composition: add;
The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
animation-composition: accumulate;
The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
time to wait before applying the animation to an element.
animation-delay: <time>;
Delay time
whether an animation should play forward, backward, or alternate back and forth
animation-direction: normal;
The animation plays forwards each cycle
animation-direction: reverse;
The animation plays backwards each cycle.
animation-direction: alternate;
The animation reverses direction each cycle, first iteration being played forwards.
animation-direction: alternate-reverse;
The animation reverses direction each cycle, first iteration being played backwards.
sets the length of time that an animation takes to complete one cycle
animation-duration: auto;
For time-based animations, auto is equivalent to a value of 0s
animation-duration: <time>;
The time that an animation takes to complete one cycle.
sets how a CSS animation applies styles to its target before and after its execution
animation-fill-mode: none;
The animation will not apply any styles to the target when it's not executing
animation-fill-mode: forwards;
The target will retain the computed values set by the last keyframe.
animation-fill-mode: backwards;
The animation will apply the values defined in the first relevant keyframe.
sets the accent color for user-interface controls generated by some elements
animation-iteration-count: infinite;
The animation will repeat forever
animation-iteration-count: <number>;
The number of times the animation will repeat.
specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element
animation-name: none;
A special keyword denoting no keyframes. It can be used to deactivate an animation
animation-name: <name>;
A name identifying the animation.
sets whether an animation is running or paused
animation-play-state: running;
The animation is currently playing
animation-play-state: <name>;
The animation is currently paused.
sets how an animation progresses through the duration of each cycle
animation-timing-function: ease;
Equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the animation, slowing back down at the end
animation-timing-function: linear;
Equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), animates at an even speed.
animation-timing-function: ease-in;
Equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the speed of the transition of the animating property increasing until complete.
animation-timing-function: ease-out;
Equal to cubic-bezier(0, 0, 0.58, 1.0), starts quickly, slowing down the animation continues.
animation-timing-function: ease-in-out;
Equal to cubic-bezier(0.42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again.
animation-timing-function: cubic-bezier(p1, p2, p3, p4);
An author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1.
used to display UI elements with platform-specific styling, based on the operating system's theme
appearance: none;
Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded
appearance: auto;
Acts as none on elements with no special styling.
appearance: <compat-special>;
One of menulist-button or textfield. Both of these values are equivalent to auto on elements with no special styling.
appearance: <compat-auto>;
Possible values are button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, and textarea.
allows you to define the desired width-to-height ratio of an element's box
aspect-ratio: auto;
The effect value overrides the underlying value of the property. This is the default value
aspect-ratio: <ratio>;
The box's preferred aspect ratio is the specified ratio of width / height.
property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
backdrop-filter: none;
No filter is applied to the backdrop
backdrop-filter: <filter-function-list>;
A space-separated list of <filter-function>s or an SVG filter that will be applied to the backdrop. CSS <filter-function>s include:
backdrop-filter: blur();
applies a Gaussian blur
backdrop-filter: brightness();
applies a linear multiplier value on an element
backdrop-filter: contrast();
adjusts the contrast of the element
backdrop-filter: drop-shadow();
applies a drop shadow effect to the
backdrop-filter: grayscale();
converts the element to grayscale
backdrop-filter: hue-rotate();
rotates the hue of an element and its contents
backdrop-filter: invert();
inverts the colors
backdrop-filter: opacity();
applies transparency to the samples in the element
backdrop-filter: saturate();
super-saturates or desaturates the element
backdrop-filter: sepia;
converts the input image to sepia, giving it a warmer, more yellow/brown appearance
property sets whether the back face of an element is visible when turned towards the user.
backface-visibility: visible;
The back face is visible when turned towards the user
backface-visibility: hidden;
The back face is hidden, effectively making the element invisible when turned away from the user.
shorthand CSS property sets all background style properties at once
Constituent properties
This property is a shorthand for the following CSS properties:
background-attachment
sets whether a background image's position is fixed, or scrolls with its containing block.
background-clip
property sets whether an element's background extends underneath its border box, padding box, or content box
background-color
sets the background color of an element
background-image
sets one or more background images on an element
background-origin
sets the background's origin: from the border start, inside the border, or inside the padding
background-position
property sets the initial position for each background image
background-repeat
sets how background images are repeated. along the horizontal and vertical axes, or not repeated at all
background-size
sets the size of the element's background image
sets whether a background image's position is fixed within the viewport, or scrolls with its containing block
background-attachment: fixed;
The background is fixed relative to the viewport
background-attachment: local;
The background is fixed relative to the element's contents.
background-attachment: scroll;
The background is fixed relative to the element itself and does not scroll with its contents.
sets how an element's background images should blend with each other and with the element's background color
background-blend-mode: <blend-mode>;
The blending mode to be applied. There can be several values, separated by commas.
sets whether an element's background extends underneath its border box, padding box, or content box
background-clip: border-box;
The background extends to the outside edge of the border (but underneath the border in z-ordering)
background-clip: padding-box;
The background extends to the outside edge of the padding. No background is drawn beneath the border.
background-clip: content-box;
The background is painted within (clipped to) the content box.
background-clip: text;
The background is painted within (clipped to) the foreground text.
sets the background color of an element
background-color: <color>;
The uniform color of the background. It is rendered behind any background-image.
sets one or more background images on an element
background-image: none;
keyword denoting the absence of images
background-image: <image>;
an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
sets the background's origin: from the border start, inside the border, or inside the padding.
background-origin: border-box;
The background is positioned relative to the border box
background-origin: padding-box;
The background is positioned relative to the padding box.
background-origin: content-box;
The background is positioned relative to the content box.
sets the initial position for each background image.
background-position: <position>;
A <position>. A position defines an x/y coordinate
sets the initial horizontal position for each background image.
background-position-x: replace;
replace
sets the initial vertical position for each background image.
background-position-y: replace;
replace
sets how background images are repeated.
background-repeat: replace;
replace
sets the size of the element's background image.
background-size: replace;
replace
defines the horizontal or vertical size of an element's block.
block-size: replace;
replace
shorthand property sets an element's border. It sets the values of border-width, border-style, and border-color.
border: replace;
replace
setting the vertical position of a positioned element.
bottom: replace;
replace
adds shadow effects around an element's frame.
box-shadow: replace;
replace
sets how the total width and height of an element is calculated.
box-sizing: replace;
replace
puts the content of a table's <caption> on the specified side.
caption-side: replace;
replace
sets the color of the insertion caret.
caret-color: replace;
replace
sets whether an element must be moved below (cleared) floating elements that precede it.
clear: replace;
replace
creates a clipping region that sets what part of an element should be shown.
clip-path: replace;
replace
sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
color: replace;
replace
Dark/Light mode, allows an element to indicate which color schemes it can comfortably be rendered in.
color-scheme: replace;
replace
breaks an element's content into the specified number of columns.
column-count: replace;
replace
controls how an element's contents are balanced when broken into columns.
column-fill: replace;
replace
sets the size of the gap (gutter) between an element's columns.
column-gap: replace;
replace
shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
column-rule: replace;
replace
shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
columns: replace;
replace
replace.
contain: replace;
replace
shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.
container: replace;
replace
replaces content with a generated value.
content: replace;
replace
property can be used to increase or decrease the value of the named CSS counters by the specified values.
counter-increment: replace;
replace
sets the mouse cursor.
cursor: replace;
replace
sets the direction of text, table columns, and horizontal overflow.
direction: replace;
replace
replace.
filter: replace;
replace
width proprtie
<length>
Defines the width as a distance value
<percentage>
Defines the width as a percentage of the containing block's width.
auto
The browser will calculate and select a width for the specified element
max-content
The intrinsic preferred width
min-content
The intrinsic minimum width
fit-content(<length-percentage>)
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).
width proprtie
<length>
Defines the height as a distance value
<percentage>
Defines the height as a percentage of the containing block's height.
auto
The browser will calculate and select a height for the specified element
max-content
The intrinsic preferred height
min-content
The intrinsic minimum height
fit-content
Box will use the available space, but never more than max-content
fit-content(<length-percentage>)
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).
Anchor element
download
...
href
...
Anchor element
download
...
href
...
Anchor element
download
...
href
...
Anchor element
download
...
href
...
Anchor element
download
...
href
...
Anchor element
download
...
href
...