CSS (Cascading Style Sheets) is a stylesheet language used to define the style and layout of web pages. With a wide range of CSS properties, you can precisely control the appearance, size, color, and other visual aspects of HTML elements.
|
aspect-ratio Sets an Element's Width-to-Height Ratio |
The aspect-ratio property sets an element's width-to-height ratio. This property allows you to easily maintain consistent proportions in responsive layouts by automatically calculating the missing dimension when only one size is specified. |
|---|---|
|
background-clip Specifying the Background Painting Area |
The background-clip property specifies how far an element's background (color or image) extends, determining the area that will be clipped. |
|
background-origin Specifies the Background Positioning Area |
The background-origin property specifies which area of an element's box is used as the reference point for positioning a background image. |
|
box-shadow Applying Shadow Effects to Element Boxes |
The box-shadow property specifies a shadow effects applied to element boxes. This overview explains its key features and how to implement it, including how to work with multiple shadows." |
|
box-sizing Defines the Element's Sizing Calculation Model |
The box-sizing property defines the area used to calculate an element's size, specifying whether the calculation is based on the content box or the border box. |
|
caret-color Change Caret Color |
The caret-color property is a CSS property that specifies the color of the text caret (input cursor) displayed when entering text. |
|
content Specify Pseudo-Element Content |
The content property specifies the content generated by CSS pseudo-elements like ::before, ::after, and ::marker, which can be styled using other CSS properties. |
|
line-height Setting Line Spacing for Text |
The line-height property sets the height of a line box. Use this property to control line spacing by vertically centering text within the line box. |
|
object-fit How to Fit Images and Videos Perfectly |
The object-fit property specifies how the content of a replaced element, such as an image or video, is fitted within the element's content box based on its specified width and height. |
|
object-position Positioning with object-fit |
The object-position property specifies the position at which the content (the object, such as an image or video) of a replaced element is aligned within its element’s content box. |
|
pointer-events Controlling Pointer Interactions |
The pointer-events property controls how an element responds to pointer interactions such as clicks, hovers, and drag actions. |
|
text-align Setting Horizontal Alignment for Text |
The text-align property sets the horizontal alignment of text and inline content within block containers and table-cell elements. |
|
text-decoration Shorthand for Text Decoration Styling |
The text-decoration property is a shorthand property that allows you to set multiple text decoration styles—text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness—in a single declaration. |
|
text-decoration-line Specifies Line Decoration Types |
The text-decoration-line property specifies the types of line decorations applied to text. Learn how to use the text-decoration-line property effectively. |
|
text-decoration-color Specifies the Color of Decorations |
The text-decoration-color property specifies the color of text decoration lines, as defined by the text-decoration-line property. |
|
text-decoration-style Specifies the Line Style of Text Decorations |
The text-decoration-style property specifies the style of lines drawn by the text-decoration-line property — for example, as solid, dashed, dotted, double, or wavy. |
|
text-decoration-thickness Specifies the Thickness of Decorations |
The text-decoration-thickness property specifies the thickness (or width) of text decoration lines, as defined by the text-decoration-line property. |
|
Underline Position and Offset Properties Setting Underline Position and Spacing |
Learn how to set the text-underline-position property, which defines the position reference for underlines created with text-decoration, and the text-underline-offset property, which adjusts the spacing between the underline and the text. |
|
text-underline-position Specifies the Positional Basis of Underlines |
The text-underline-position property specifies the position used as the basis for underlines set by the text-decoration. |
|
text-underline-offset Adjusting Underline Offset |
The text-underline-offset property specifies the spacing (offset) between the underline set by text-decoration and its original position. |
|
text-emphasis Shorthand for Text Emphasis Marks |
The text-emphasis property is a shorthand for specifying both the text-emphasis-style and text-emphasis-color properties for emphasis marks applied to the text content of an element, setting their shape and color. |
|
text-emphasis-style Specifies the Shape of Emphasis Marks |
The text-emphasis-style property specifies the shape of emphasis marks applied to the text content of an element. This property allows setting one of several supported shapes for text emphasis. |
|
text-emphasis-color Specifies the Color of Emphasis Marks |
The text-emphasis-color property specifies the color of emphasis marks applied to text. This property allows you to specify the color of the emphasis marks independently from the text color. |
|
text-emphasis-position Specifies the Position of Emphasis Marks |
The text-emphasis-position property specifies the position of emphasis marks applied to the text of an element. This property allows setting the emphasis marks in positions other than the default. |
|
text-overflow Setting a Single-Line Text Ellipsis (...) |
The text-overflow property specifies whether an ellipsis (...) is displayed to signal to the user that single-line text has overflowed the element's box and is hidden from view. |
|
text-shadow Applying Shadow Effects to Text |
The text-shadow property specifies a shadow effect applied to text characters. This overview explains its key features and how to implement it, including how to work with multiple shadows. |
|
vertical-align Vertical Alignment: Inline Tags & Table-Cells |
The vertical-align property specifies the vertical alignment of inline-level and table-cell elements. It allows you to align elements to the top, middle, bottom, and other positions. |
|
white-space Specifies White Space and Soft Wrapping |
The white-space property specifies how white space inside an element is processed and whether unforced soft wraps are allowed. |
|
will-change A Hint for Rendering Optimization |
The CSS will-change property gives the browser a hint about which styles are likely to change, allowing it to optimize rendering performance in advance—especially for animations and visual effects. |
|
word-break Rules for Breaking Words When Text Wraps |
The word-break property specifies how words break when text reaches the end of a line. This property plays a critical role in improving the readability of wrapped text. |
|
writing-mode Setting Text in Vertical Writing Mode |
The writing-mode property specifies whether lines of text are laid out horizontally or vertically, and the direction in which the flow progresses. This property can be used to switch text to a vertical writing mode. |
|
-webkit-line-clamp Setting a Multi-Line Text Ellipsis (…) |
The -webkit-line-clamp property restricts text in an element to a set number of lines, adding an ellipsis (...) at the end if the content exceeds the limit. |
|
-webkit-text-stroke Styling the Stroke of Text |
The -webkit-text-stroke property styles the stroke of text characters. Explore its syntax, usage, and key considerations with practical examples. |
|
-webkit-text-stroke-color Specifies the Stroke Color of Text |
The -webkit-text-stroke-color property specifies the color of the text stroke. Explore its usage, key considerations, and practical examples. |
|
-webkit-text-stroke-width Specifies the Stroke Width of Text |
The -webkit-text-stroke-width property specifies the width (thickness) of the text stroke. Explore its usage, key considerations, and practical examples. |