A
| property | description |
|---|---|
accent-color |
It provides a default and accent color for tags with a user relationship theme. |
align-content |
Determines the leveling type of lines inside an enclosure when all interior space is unused. |
align-items |
Determines the type of leveling for items in a flexible container. |
align-self |
Specifies the leveling type for items that are already specified in a flexible container. |
all |
Resets all values. |
animation |
A concise property for all animation properties |
animation-name |
Defines a name for the animation to use for the @keyframes property. |
animation-duration |
Defines the duration of a cycle for the animation until its end. |
animation-timing-function |
Defines the speed of an animation curve. |
animation-delay |
Specifies a delay when the animation starts. |
animation-iteration-count |
Defines the number of times the animation should be replayed after completion. |
animation-direction |
Defines the orientation of the animation. |
animation-fill-mode |
When the animation is stopped, it defines a style before it starts and after it ends. |
animation-play-state |
Determines whether the animation is moving or stopped. |
aspect-ratio |
Defines the ratio of width to height dimensions. |
B
| property | description |
|---|---|
backdrop-filter |
The graphic effect defines the background area of the elements. |
backface-visibility |
Determines whether to display the background screen to the user when logging in. |
background |
Defines the background and its types for pages. |
background-origin |
Specifies the origin position of a wallpaper. |
background-size |
Determines the size and dimensions of the wallpaper. |
background-repeat |
It causes the wallpaper to repeat. |
background-position-y |
Determines the horizontal position of the wallpaper. |
background-position-x |
Determines the vertical position of the wallpaper. |
background-position |
Sets the default position of a wallpaper. |
background-image |
Determines the image that should be displayed in the wallpaper section. |
background-color |
Sets the background color. |
background-clip |
Determines the routing of elements within the background image. |
background-attachment |
Determines whether the background image remains static or moves as the user moves. |
background-blend-mode |
It provides background layer combination modes (color, image). |
block-size |
Determines the size and dimensions of the BLOCK area. |
border |
A property is shorthand for properties related to itself. |
border-block |
Defines the border of the BLOCK area. |
border-block-color |
Determines the border color of the BLOCK area. |
border-block-end |
This property allows us to specify the end line of a block in a border.This property is used for elements that are in vertical mode. |
border-block-end-color |
Determines the color of the end border of the BLOCK area. |
border-block-end-style |
Determines the mode and style of the BLOCK end zone. |
border-block-end-width |
Specifies the width of the BLOCK end zone. |
border-block-start |
This property allows us to specify the beginning line of a block in a border. This property is used for elements that are in vertical mode. |
border-block-start-color |
Determines the color of the starting border of the BLOCK area. |
border-block-start-style |
Determines the mode and style of the starting border of the BLOCK area. |
border-block-start-width |
Specifies the width of the starting border of the BLOCK area. |
border-block-style |
Determines the mode and style of the border of the BLOCK area. |
border-block-width |
Specifies the border width of the BLOCK area. |
border-bottom |
Defines the surrounding border of a button. |
border-bottom-color |
Determines the color of the border around the button. |
border-bottom-left-radius |
Determines the curvature of the left border of the button. |
border-bottom-right-radius |
Determines the curvature of the button's right border. |
border-bottom-style |
Determines the mode and style of the button border. |
border-bottom-width |
Specifies the border width of a button. |
border-collapse |
Specifies whether the borders of a cell should be merged or separated. |
border-color |
Determines the color of the border. |
border-end-end-radius |
This property is used to set the radius of the corners at the bottom and right end of an element. |
border-end-start-radius |
This property is used to set the radius of the corners at the bottom and left side of an element |
border-image |
Defines the perimeter of an image. |
border-image-outset |
Determines the outer border of an image. |
border-image-repeat |
Defines the border of the image that is being repeated. |
border-image-slice |
Defines the border of a piece of the image. |
border-image-source |
The margin determines the source we selected the image. |
border-image-width |
Determines the width of the image border. |
border-inline |
Defines the inner margin. |
border-inline-color |
Determines the color of the inner border. |
border-inline-end-color |
Specifies the color of the inner end border. |
border-inline-end-style |
Determines the mode and style of the inner trailing edge. |
border-inline-end-width |
Specifies the width of the inner end zone. |
border-inline-start-color |
Determines the mode and style of the inner leading edge. |
border-inline-start-width |
Specifies the width of the inner starting margin. |
border-inline-style |
Determines the mode and style of the inner starting border. |
border-inline-width |
Specifies the width of the inner border. |
border-left |
Sets the left margin. |
border-left-color |
Sets the color of the left border. |
border-left-style |
Determines the mode and style of the left margin. |
border-left-width |
Specifies the width of the left margin. |
border-radius |
Determines the curvature of the border corners. |
border-right |
Specifies the side margin. |
border-right-color |
Specifies the color of the right border |
border-right-style |
Determines the mode and style of the side border. |
border-right-width |
Specifies the width of the side border. |
border-spacing |
Determines the distance between border cells. |
border-style |
Determines the mode and style of the border. |
border-top |
Sets the upper margin. |
border-top-color |
Determines the color of the top border. |
border-top-style |
Determines the mode and style of the upper border. |
border-top-width |
Specifies the width of the top border. |
border-width |
Determines the width of the border. |
bottom |
Defines the button in CSS documents. |
box-decoration-break |
controls text or content fragmentation across multiple lines. |
box-reflect |
generates reflections for an element, with values like below, above, left, or right. |
box-shadow |
This feature allows us to access and control the shadow around our edge. |
box-sizing |
Defines how the width and height of an element are calculated. |
box-after |
With the attribute I can specify whether to break a page or columns of text right after a certain element. |
box-before |
With the attribute I can specify whether to break a page or columns of text right before a certain element. |
box-inside |
This attribute determines whether the content should be placed inside the box (such as centering the content) or outside the box (such as snapping to one side). |
C
| property | description |
|---|---|
color |
Determines the color scheme. |
caption-side |
Specifies where the table should be placed. |
caret-color |
With this feature, the color of the marker can be specified. |
@charset |
This feature specifies the coding type of web pages |
clear |
By using clear you can specify which side of a floated element an element should break or not break at all. |
clip-path |
can cut a part of an element or you can make elements like boxes or picture frames in polygonal form or... . |
column-count |
Determines the number of columns. |
column-fill |
Determines how columns are filled. |
column-gap |
Determines the distance between columns. |
column-rule |
The rule determines the columns. |
column-rule-color |
The rule determines the color of the columns. |
column-rule-style |
The rule determines the mode and style of the columns. |
column-rule-width |
The rule determines the width of the columns. |
column-span |
Determines how many cells an element will fill. |
column-width |
Specifies the width of the columns. |
columns |
A property is shorthand for all properties associated with it. |
content |
Used to insert generated content. |
counter-increment |
Increases or decreases the value of one or more counters. |
counter-reset |
Creates one or more counters. |
counter-set |
This property creates a counter and accepts a specific value. |
cursor |
This feature specifies the type of mouse pointer that is placed on an element . |
D
| property | description |
|---|---|
direction |
Determines the direction of the text. |
display |
Makes the element visible. |
E
| property | description |
|---|---|
empty-cells |
Defines empty cells within the grid layout. |
F
| property | description |
|---|---|
filter |
Displays effects before displaying an element. |
flex |
A property is shorthand for properties related to itself. |
flex-basis |
Specifies the initial length of a flexible item. |
flex-direction |
Determines the orientation of flexible items. |
flex-flow |
A property is shorthand for properties related to itself. |
flex-grow |
Causes an item to be raised between multiple items. |
flex-shrink |
Determines how items shrink. |
flex-wrap |
Determines whether flexible items in the dropdown list are closed or not. |
float |
Determines the right and left floating of elements. |
font |
Specifies the font of text in CSS documents. |
@font-face |
This feature helps to add and use fonts that are not web safe fonts. |
font-family |
Specifies the font family. |
font-feature-settings |
Sets the alternate font. |
font-kerning |
Determines the use of font information in the server core. |
font-size |
Determines the size and dimensions of the font. |
font-size-adjust |
Determines the readability of the text. |
font-stretch |
Determines the length of the font. |
font-style |
Determines the mode and style of the text. |
font-variant |
With this feature, you can specify whether the font should be written in lowercase letters or not. |
font-variant-alternates |
This feature allows you to change how letters and numbers are displayed in a font, such as using alternate modes or other special features. |
font-variant-caps |
alters how text letters appear: in uppercase, lowercase, or other modes. Typically used for titles, headings, etc., to adjust text display. |
font-variant-east-asian |
With this feature you can specify how alternate symbols are displayed in East Asian texts . |
font-variant-ligatures |
This feature allows web developers to use ligraphs Use for different writing modes . |
font-variant-numeric |
This feature helps web designers to control the type of font used for numbers. |
font-variant-position |
This feature allows web designers to control the lowercase and uppercase letters of the text . |
font-weight |
Specifies the font width. |
G
| property | description |
|---|---|
gap |
Specifies the spacing between rows and columns. |
grid |
A property is shorthand for properties related to itself. |
grid-area |
Allows naming grid items arbitrarily. |
grid-auto-columns |
Sets the default column size. |
grid-auto-flow |
The grid layout determines how items are inserted. |
grid-auto-rows |
Sets the default row size. |
grid-column |
A property is shorthand for properties related to itself. |
grid-column-end |
Determines the final location of the GRID item. |
grid-column-gap |
Determines the size of the space between the columns. |
grid-column-start |
Specifies the starting location of the GRID item. |
grid-gap |
A property is shorthand for properties related to itself. |
grid-row |
A property is shorthand for properties related to itself. |
grid-row-end |
Determines where to end the GRID item. |
grid-row-gap |
Determines the size of the space between rows. |
grid-row-start |
Determines where the GRID item starts. |
grid-template |
Provides various features to grids. |
grid-template-areas |
Choosing names for the grid and creating cells with those names. |
grid-template-columns |
Specifies the number of columns in a grid. |
grid-template-rows |
Defines the size of each line in a grid. |
H
| property | description |
|---|---|
hanging-punctuation |
Determines whether a punctuated text may be placed outside the corresponding line. |
height |
Specifies the height in CSS documents. |
hyphens |
It determines how to divide the words in the content environment to beautify it. |
hypenate-character |
Determines the character to use as a breakpoint in long texts. |
I
| property | description |
|---|---|
image-rendering |
Determines the type of algorithm to scale images. |
inline-size |
Determines the size and dimensions of the elements in the inner direction. |
inset |
Specifies the inline area in CSS documents. |
inset-block |
Determines the distance between an element and its parent element in the BLOCK area. |
inset-block-end |
Determines the distance between the end of an element and its parent element in the BLOCK area. |
inset-block-start |
Determines the starting distance of an element and its parent element in the BLOCK area. |
inset-inline |
Determines the distance between an element and its parent element in the inner area. |
inset-inline-end |
Specifies the distance between the end of an element and its parent element in the inner area. |
inset-inline-start |
Specifies the starting distance of an element and its parent element in the inner area. |
isolation |
Determines whether the element should generate stacked content or not. |
J
| property | description |
|---|---|
| Defines leveling when items in a container do not use all of its space. | |
| Defines leveling of items on a linear grid grid. | |
| It is defined on the network container. |
قانون ها
| property | description |
|---|---|
| Defines the code and name of the animation in css. |
L
| property | description |
|---|---|
left |
Specifies the left side of the elements. |
letter-spacing |
Determines the space between text characters. |
line-break |
Determines whether the line breaks and its continuation is displayed on the next line. |
line-height |
Determines the height of the line. |
list-style |
Specifies the properties of the list. |
list-style-image |
Sets an image as the list pointer. |
list-style-position |
Determines the position of the list pointers in bullet form. |
list-style-type |
Determines the type of pointer in the list. |
o
| property | description |
|---|---|
object-fit |
Determines how the elements are aligned inside the corresponding container. |
object-position |
Determines the alignment of replaced elements within the corresponding enclosure. |
offset |
A property is shorthand for properties related to itself. |
offset-anchor |
Establishes a point on a moving element positioned by a pre-existing offset path. |
offset-distance |
Specifies the position a moving element should travel. |
offset-path |
Specifies the direction in which the element is to be rotated. |
offset-rotate |
The rotation defines an element as it moves along the path. |
opacity |
Determines the transparency percentage of the elements. |
order |
Determines the order of flexible elements relative to other elements. |
orphans |
Determines the minimum number of lines that will be placed at the bottom of the page or at the end of the column. |
outline |
It is a concise property for the elements related to itself. |
outline-color |
Specifies the color beyond the border. |
outline-offset |
It defines an outline beyond the boundary. |
outline-style |
It sets the mood and style outside the line. |
outline-width |
Specifies the width outside the line. |
overflow |
Controls content overflow within a box. |
overflow-anchor |
Disables the browser's scroll anchor effect. |
overflow-wrap |
Decides whether the browser can move long text to the next line. |
overflow-x |
Controls horizontal text overflow. |
overflow-y |
Controls vertical text overflow. |
overscroll-behavior |
Manages scrolling behaviors and movements. |
overscroll-behavior-block |
Specifies scroll behavior at block ends. |
overscroll-behavior-inline |
Determines whether a line continues at the end of a line. |
overscroll-behavior-x |
Specifies scrolling behavior at the end of the horizontal axis. |
overscroll-behavior-y |
Specifies scrolling behavior at the end of the vertical axis. |
p
| property | description |
|---|---|
padding |
A property is shorthand for the properties associated with it. |
padding-block |
Determines the layer corresponding to the BLOCK area. |
padding-block-end |
The final layer defines the BLOCK area. |
padding-block-start |
Defines the starting layer of the BLOCK area. |
padding-bottom |
Specifies the bottom layer of an element. |
padding-inline |
Specifies the inner layer of an element. |
padding-inline-end |
Determines the final inner layer. |
padding-inline-start |
Defines the starting inner layer. |
padding-left |
Specifies the left layer of an element. |
padding-right |
Specifies the right layer of an element. |
padding-top |
Defines the top layer of an element. |
page-break-after |
Determines where the next element starts after one element ends. |
page-break-before |
Determines whether the following print element starts on a new page after the current element is completed. |
page-break-inside |
It is used to control how content is printed on printed pages. |
paint-order |
With this feature, you can specify the layout and order. |
perspective |
This feature is used to make an element 3D. |
perspective-origin |
Specify the access position of the 3D element in the program. |
place-content |
With this feature, you can arrange the contents of the flexbox. |
place-items |
Adjusts the horizontal and vertical position of elements at the same time. |
place-self |
It is possible to place and size a specific element in a Grid with Flexbox. |
pointer-events |
Specifies whether an element is responsive to mouse events or not. |
position |
Determines the position in css documents. |
Q
| property | description |
|---|---|
quotes |
Specifies the type of delimiting quotes in quoted elements. |
R
| property | description |
|---|---|
resize |
Determines whether the user can change the size and dimensions of the element |
right |
Specifies the right side of the element. |
rotate |
Allows the element to rotate. |
row-gap |
Specifies the spacing between rows. |
S
| property | description |
|---|---|
scale |
The size of the elements is determined by the efficiency of reducing or increasing their scale. |
scroll-behavior |
You can manage your scrolling behavior whether the scrolling is smooth or jumpy. |
scroll-margin |
Specifies the space between content inside an element and the border of the scrolling page. |
scroll-margin-block |
Controls the space between the element's content and the scrollable page border. |
scroll-margin-block-end |
Specifies the distance between the content inside an element and the bottom edge of the scroll page. |
scroll-margin-block-start |
Determines the margin between the vertical content block edge and the scrolling start edge of the page. |
scroll-margin-bottom |
Controls the distance between the content inside an element and the bottom edge of the scrollable area. |
scroll-margin-inline |
Sets the distance between an element's content and the scrollable horizontal edges. |
scroll-margin-inline-end |
Adjusts the space from content to the right edge within an element. |
scroll-margin-inline-start |
Adjusts how far content starts from the scroll's horizontal edge. |
scroll-margin-left |
Sets the gap between content's left edge and the start of scrolling. |
scroll-margin-right |
Determines the distance between the right edge of the content and the start of scrolling. |
scroll-margin-top |
Sets the gap between content's top edge and the vertical scroll's start. |
scroll-padding |
Sets the internal margin spacing for scroll bars. |
scroll-padding-block |
Defines internal margin space for vertical sections in the scroll. |
scroll-padding-block-end |
Adjusts padding for the ends of vertical scrollbar blocks. |
scroll-padding-block-start |
Sets the padding for the beginning of the vertical scrollbar blocks. |
scroll-padding-bottom |
Adjusts the space between content's bottom and the vertical scrollbar. |
scroll-padding-inline |
Adjusts space between content edges and the horizontal scrollbar. |
scroll-padding-inline-end |
Controls spacing between horizontal lines' ends and the scrollbar. |
scroll-padding-inline-start |
Controls the distance between the beginning of the horizontal lines and the scroll bar. |
scroll-padding-left |
Sets the internal margin between content's left edge and scrollbar. |
scroll-padding-right |
Sets the inner margin between the right edge of the content and the navigation bar. |
scroll-padding-top |
Adjusts the distance between content's top and the scrollbar. |
scroll-snap-align |
Controls how elements are aligned during scrolling. |
scroll-snap-stop |
Specifies whether scrolling should stop at specific points specified for the scroll snap. |
scroll-snap-type |
It helps you specify the type of scroll snap for an element. |
scrollbar-color |
Sets scrollbar color in both normal and active states. |
T
| property | description |
|---|---|
tab-size |
Specifies the character width on a sheet. |
table-layout |
The algorithm determines the arrangement of cells, rows and columns. |
text-align |
Determines the horizontal alignment of the text. |
text-align-last |
Controls how text wraps on lines that are separated on the last line. |
text-combine-upright |
Specifies the order of multiple characters. |
text-decoration |
Determines the orientation of the text. |
text-decoration-color |
Determines the color of the text. |
text-decoration-line |
Sets the text alignment. |
text-decoration-style |
Determines the mode and style of the text. |
text-decoration-thickness |
Determines the thickness of the line. |
text-emphasis |
Manages emphasis in text. |
text-emphasis-color |
Specifies the color used to highlight the text. |
text-emphasis-position |
Controls how the edges of the text are placed next to the text. |
text-emphasis-style |
Specifies how to display text emphasis. |
text-indent |
Sets the text indentation of the first line in a BLOCK area. |
text-justify |
It is an interesting way to direct the characters. |
text-orientation |
Determines the orientation of text characters. |
text-shadow |
Adds a shadow to the text. |
text-transform |
Handles text capitalization. |
text-underline-position |
Changes the position of the underline by using the text-decoration property. |
top |
Determines the top position of the elements. |
transform |
Causes 2D or 3D transformations to become a property. |
transform-origin |
Allows the user to change the position of the converted elements. |
transform-style |
Determines how nested elements are displayed in the 3D environment. |
transition |
is a concise property for all its subsets. |
transition-delay |
Determines the start time of the affected feature. |
transition-duration |
Determines how many seconds or milliseconds an impacting feature will take to complete. |
transition-property |
Specifies the name of the CSS property that takes effect. |
transition-timing-function |
The curvature determines the impact speed. |
translate |
Determines the position of an element. |
U
| property | description |
|---|---|
unicode-bidi |
Determines text orientation and text support for multiple languages. |
user-select |
It gives access to the user to select a part of the text or not. |
V
| property | description |
|---|---|
vertical-align |
Specifies the vertical alignment of only one element. |
visibility |
Determines whether elements are displayable or not. |
W
| property | description |
|---|---|
white-space |
Determines how blank or white pages are handled. |
widows |
Specifies the minimum number of lines to set at the top of a page or column. |
width |
Determines the width of the elements. |
word-break |
Determines how to break expressions and move them to the next line. |
word-spacing |
Determines the spacing between words in the text. |
word-wrap |
Causes long expressions to be broken and continued on the next line. |
writing-mode |
Determines whether text lines are displayed horizontally or vertically. |
Z
| property | description |
|---|---|
z-index |
Sets the stack order of the elements in the correct position. |
