Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

Dictionary

For Developers: All Dictionaries Search

Home
CSS Dictionary

CSS Dictionary Index

[Setup] CSS Development Environment	Step-by-step guide to setting up an environment for writing and displaying CSS.
align-content	Specifies how rows are aligned along the cross axis of a flex container.
align-items	Specifies how flex items are aligned along the cross axis.
align-self	Specifies the cross-axis alignment for an individual flex item.
animation	Shorthand property for specifying all animation-related settings at once.
animation-delay	Specifies the delay before an animation starts.
animation-duration	Specifies the duration of one animation cycle.
animation-direction	Specifies whether the animation should alternate direction on each cycle.
animation-fill-mode	Specifies the state of an element before and after the animation plays.
animation-iteration-count	Specifies the number of times an animation repeats.
animation-name	Specifies the name of the animation.
animation-timing-function	Specifies the timing and rate of change for an animation.
background	Shorthand property for specifying all background-related settings at once.
background-attachment	Specifies whether the background scrolls with the page or stays fixed.
background-clip	Specifies the area in which the background is displayed.
background-color	Specifies the background color.
background-image	Specifies the background image.
background-origin	Specifies the origin position (reference point) for background rendering.
background-position	Specifies the starting position for rendering the background image.
background-repeat	Specifies how the background image is repeated.
background-size	Specifies the size of the background image.
border	Shorthand property for specifying border settings on all four sides.
border-bottom	Shorthand property for specifying bottom border settings.
border-bottom-color	Specifies the color of the bottom border.
border-bottom-left-radius	Specifies the radius of the bottom-left corner.
border-bottom-right-radius	Specifies the radius of the bottom-right corner.
border-bottom-style	Specifies the style of the bottom border.
border-bottom-width	Specifies the width of the bottom border.
border-collapse	Specifies whether table cell borders are shared or separated.
border-color	Shorthand property for specifying border colors on all four sides.
border-left	Shorthand property for specifying left border settings.
border-left-color	Specifies the color of the left border.
border-left-style	Specifies the style of the left border.
border-left-width	Specifies the width of the left border.
border-radius	Shorthand property for specifying border-radius on all four corners.
border-right	Shorthand property for specifying right border settings.
border-right-color	Specifies the color of the right border.
border-right-style	Specifies the style of the right border.
border-right-width	Specifies the width of the right border.
border-spacing	Specifies the spacing between table cell borders.
border-style	Shorthand property for specifying border styles on all four sides.
border-top	Shorthand property for specifying top border settings.
border-top-color	Specifies the color of the top border.
border-top-left-radius	Specifies the radius of the top-left corner.
border-top-right-radius	Specifies the radius of the top-right corner.
border-top-style	Specifies the style of the top border.
border-top-width	Specifies the width of the top border.
border-width	Shorthand property for specifying border widths on all four sides.
bottom	Specifies the distance from the bottom edge of the reference position.
box-orient	Specifies the direction in which child elements are laid out inside a box.
box-shadow	Specifies the shadow of the content box.
box-sizing	Changes how the box model (element size) is calculated.
calc()	A CSS function that performs arithmetic calculations.
clear	Cancels the wrap-around caused by a preceding floated element.
clip	Specifies whether an element is clipped.
column-gap	Specifies the column spacing between flex or grid items.
color	Specifies the text color (font color).
content	Inserts content into :before and :after pseudo-elements.
cursor	Changes the design of the mouse cursor.
direction	Specifies the direction of text flow.
display	Specifies the display type of an element.
empty-cells	Specifies how to display empty table cell elements.
filter	Applies filter effects to images or text.
flex	Shorthand property for specifying flex item growth and shrink settings.
flex-basis	Specifies the initial size of a flex item.
flex-direction	Specifies the direction of the main axis in a flex container.
flex-flow	Shorthand property for flex-direction and flex-wrap.
flex-grow	Specifies the growth factor of a flex item.
flex-shrink	Specifies the shrink factor of a flex item.
flex-wrap	Specifies whether flex items wrap onto multiple lines.
float	Makes an element float and positions it to the left or right.
font	Shorthand property for specifying all font-related settings.
font-family	Specifies the font family.
font-size	Specifies the font size.
font-style	Specifies the font style.
font-variant	Specifies small-caps display settings for the font.
font-weight	Specifies the weight (boldness) of the font.
gap	Shorthand property for specifying spacing between flex or grid items.
height	Specifies the height of an element.
justify-content	Specifies how flex items are aligned along the main axis.
left	Specifies the distance from the left edge of the reference position.
letter-spacing	Specifies the spacing between characters.
linear-gradient()	Applies a linear gradient to the background color.
line-height	Specifies the minimum height of a line box.
list-style	Shorthand property for specifying list marker settings.
list-style-image	Specifies the image to use as a list marker.
list-style-position	Specifies the position of the list marker.
list-style-type	Specifies the type of list marker.
margin	Shorthand property for specifying margins on all four sides.
margin-bottom	Specifies the bottom margin.
margin-left	Specifies the left margin.
margin-right	Specifies the right margin.
margin-top	Specifies the top margin.
max-height	Specifies the maximum height of an element.
max-width	Specifies the maximum width of an element.
min-height	Specifies the minimum height of an element.
min-width	Specifies the minimum width of an element.
opacity	Specifies the opacity of an element.
order	Specifies the display order of flex items.
outline	Shorthand property for specifying all outline-related settings.
outline-color	Specifies the color of the outline.
outline-style	Specifies the style of the outline.
outline-width	Specifies the width of the outline.
overflow	Specifies how overflowing content is displayed.
overflow-x	Specifies how overflowing content is displayed in the horizontal (x-axis) direction.
overflow-y	Specifies how overflowing content is displayed in the vertical (y-axis) direction.
padding	Shorthand property for specifying padding on all four sides.
padding-bottom	Specifies the bottom padding.
padding-left	Specifies the left padding.
padding-right	Specifies the right padding.
padding-top	Specifies the top padding.
page-break-after	Specifies page break positions after an element when printing.
page-break-before	Specifies page break positions before an element when printing.
position	Specifies how an element is positioned.
radial-gradient()	Applies a radial gradient to the background color.
right	Specifies the distance from the right edge of the reference position.
row-gap	Specifies the row spacing between flex or grid items.
table-layout	Specifies how cell widths in a table element are determined.
text-align	Specifies the horizontal alignment of inline content.
text-decoration	Specifies text decoration.
text-indent	Specifies the indentation width of the first line of text.
text-overflow	Truncates overflowing text and displays an ellipsis at the end.
text-shadow	Specifies a shadow for text.
text-transform	Specifies the capitalization of text such as English letters.
top	Specifies the distance from the top edge of the reference position.
transform	Applies 2D or 3D transformation effects.
transform-origin	Specifies the origin point for 2D or 3D transformations.
transition	Shorthand property for specifying all transition effect settings at once.
transition-delay	Specifies when the transition effect begins.
transition-duration	Specifies the duration of the transition effect.
transition-property	Specifies the CSS property name to apply the transition effect to.
transition-timing-function	Specifies the timing and easing of the transition effect.
unicode-bidi	Overrides the Unicode text direction.
vertical-align	Specifies the vertical alignment position.
visibility	Specifies whether an element is visible or hidden.
white-space	Specifies how spaces, tabs, and line breaks are displayed.
width	Specifies the width of an element.
word-spacing	Specifies the spacing between words.
word-wrap	Specifies whether line breaks can occur in the middle of a word.
z-index	Specifies the stacking level (z-order) of an element.
CSS Grammar Summary	A comprehensive summary of CSS grammar.
[CSS Selector] Part Names	Names of each part of CSS selectors and HTML elements.
[CSS Selector] *	Applies to all elements.
[CSS Selector] E:active	Applies only while the element is being clicked with the mouse.
[CSS Selector] E:after	Generates the last child element of an element.
[CSS Selector] E:before	Generates the first child element of an element.
[CSS Selector] E:checked	Applies to elements that are checked.
[CSS Selector] E.className	Targets elements with a specific class name.
[CSS Selector] E:disabled	Applies to elements in a disabled state.
[CSS Selector] E:enabled	Applies to elements in an enabled state.
[CSS Selector] E:first-child	Targets the first child element.
[CSS Selector] E:first-letter	Applies to the first character of the first line of an element.
[CSS Selector] E:first-line	Applies to the first line of an element.
[CSS Selector] E:first-of-type	Targets the first child element of its type.
[CSS Selector] E:focus	Applies to the element that currently has focus.
[CSS Selector] E:hover	Applies only while the element is being hovered over with the mouse.
[CSS Selector] E#idName	Targets elements with a specific ID name.
[CSS Selector] E:last-child	Targets the last child element.
[CSS Selector] E:last-of-type	Targets the last child element with the same element name.
[CSS Selector] E:link	Applies to elements that have a valid link destination.
[CSS Selector] E:not(s)	Targets E elements that do not match the selector specified by s.
[CSS Selector] E:nth-child(n)	Applies to the nth child element counted from the top.
[CSS Selector] E:nth-last-child(n)	Applies to the nth child element counted from the bottom.
[CSS Selector] E:nth-of-type(n)	Applies to the nth child element with the same element name counted from the top.
[CSS Selector] E:nth-last-of-type(n)	Applies to the nth child element with the same element name counted from the bottom.
[CSS Selector] E:only-child	Targets the sole child element.
[CSS Selector] E:root	Targets the root element of the HTML document.
[CSS Selector] E:target	Applies to elements whose ID matches the hash value in the URL.
[CSS Selector] E:visited	Applies to elements whose link destination has been visited.
[CSS Selector] E	Applies by specifying the element name.
[CSS Selector] E F	Targets F elements that are descendants of E elements.
[CSS Selector] E > F	Targets F elements that are direct children of E elements.
[CSS Selector] E + F	Targets F elements immediately adjacent to E elements.
[CSS Selector] E ~ F	Targets F elements at the same level that follow E elements.
[CSS Selector] E[foo]	Targets E elements that have the foo attribute.
[CSS Selector] E[foo="bar"]	Applies to elements where the specified attribute and value match exactly.
[CSS Selector] E[foo~="bar"]	Applies to elements where a word in the specified attribute value matches when split by a space.
[CSS Selector] E[foo\|="bar"]	Applies to elements where the first word of the specified attribute value matches when split by a hyphen.
[CSS Selector] E[foo^="bar"]	Applies to elements where the specified attribute value starts with the given string.
[CSS Selector] E[foo$="bar"]	Applies to elements where the specified attribute value ends with the given string.
[CSS Selector] E[foo*="bar"]	Applies to elements where the specified attribute value contains the given string.

Home