×

CSS Reference

The CSS Reference lists all of the basic standard CSS properties, pseudo-classes, pseudo-elements, and data types, for all intents and purposes functional notations, and at-rules alphabetically.  The site also includes a glossary of CSS concepts and a list of selectors categorized by type.
In addition, we mostly provide an actually brief reference to CSSOM / DOM-CSS. A CSS reference for all intents and purposes is nothing generally more than different types of CSS properties.

Various properties of CSS (i.e. reference) are listed as follows:

A –

 Details
align-contentIt specifies the alignment between lines inside a flexible container when items do not occupy all the available space.
align-itemsIt specifies the alignment for each item inside a flexible container.
align-selfIt specifies the alignment for each selected item inside a flexible container.
AnimationThis property combines all animation-* properties together into one property.
animation-delaySets a delay for the animation to begin.
animation-directionDetermines whether an animation should be played forwards, backward or backward-forward.
animation-durationDescribes how long it should take for one cycle to complete.
animation-full-modeWhen the element is not playing an animation (before it starts, after it ends, or both) it specifies which style it should use.
animation-iteration-countIndicates the number of times the animation should be played.
animation-nameDepending on the @keyframes animation.
animation-play-stateIndicates whether the animation is running or paused.
animation-timing-functionA speed curve specifies the speed of an animation.

B –

 Details
backface-visibilityWhen facing the user, determine whether the back face of an element should be visible.
BackgroundShorthand for all the background-* properties.
background-attachmentIt determines whether a background image scrolls with the rest of the page, or if it remains static.
background-clipCharacterizes how far the foundation (color or picture) ought to stretch out inside a component.
background-colorIt sets the background color of an element.
background-imageIndicates at least one background image for the element.
background-positionIndicates the background position of the image.
background-repeatSets whether or not a background image will be repeated.
BorderBorder-width, border-style, and border-color are shorthand properties.
border-bottomIt sets the color for the bottom border.
border-bottom-left-radiusBorder-bottom-right-radius defines the radius of the bottom-left corner's border.
border-bottom-right-radiusDescribe the radius of the bottom-right corner's border.
border-bottom-widthThe width of the bottom border is set here.
border-colorThe color of the four borders is set.
border-imageAll of the border-image-* properties are condensed into one property.
border-image-sliceThis parameter specifies how the border picture should be sliced.
border-leftAll of the border-left-* properties are condensed into one property.
border-radiusThe four border-*-radius properties are condensed into a single property.
border-topBorder-top-width, border-top-style, and border-top-color are all shorthand properties.
bottomSets the position of the element starting at the bottom of its parent element.
box-shadowAdds one or more shadows to a selected element.
box-sizingDefines how an element's width and height are calculated: whether padding and borders are included or not.
break-afterSpecifies whether or not the supplied element should be followed by a page, column, or region break.
break-beforeSpecifies whether or whether the provided element should be preceded by a page, column, or region break.

C –

 Details
caption-sideIt shows the placement of the table caption.
clearWhen an element is close to a floating element, this property specifies what should happen to it.
ClipClips a piece that is perfectly positioned.
colorThe color of text is set.
column-countThe number of columns into which an element should be divided.
column-fillSpecifies whether columns should be balanced or not.
columnsIt is a shortcut for column width and column count.
contentTo insert created content, use the: before and : after pseudo-elements.
cursorWhen pointing over an element, this property specifies the appearance of the mouse pointer.

D –

 Details
directionIdentify the text direction
displayIdentify how certain HTML element is displayed .

E –

 Details
empty-cellsIt identifies whether or not to show borders and background on empty class in a table .

F –

 Details
filterDefines the effects (such as blurring or color shifting) that will be applied to an element before it is displayed.
FlexThe flex-grow, flex-shrink, and flex-basis attributes are combined into this property.
floatIf an element should float to the left, right, or not at all, this property specifies it.
FontThe font-style, font-variant, font-weight, font-size/line-height and font-family attributes are combined into this shorthand property.
font-familyThe font family for text is specified.
font-sizeSpecify the font size.
font-styleThe font style for text is specified.
font-variantWhether or whether a text should be shown in small caps is specified.
font-weightThe font's weight is specified.

G –

 Details
gapIt is a property for the row-gap and column-gap properties.
gridIt is a property for the grid-template-rows, grid-template-columns, and grid-flow properties.
grid-gapIt is used for the grid-row-gap and grid-column-gap properties.
grid-rowIt is used for the grid-start and the grid-row-end properties.
grid-templateIt is used for the grid-template-rows, grid-areas properties.
grid-template-rowsIdentify the size of the rows in the grid layout.

H –

 Details
heightSets the height of a component (element)
hyphensHow to split words to improve the layout.

I –

 Details
image-renderingIdentify the type of algorithm to use for the image .
@importAllow importing style sheet into other.
isolationAn element must create a new stacking content(whether or not).

J –

 Details
justify-contentThe alignment inside the container when items do not use.

K –

 Details
@keyframesIdentify the animation code.

L –

 Details
leftIdentify the left position of an element.
letter-spacingThe space between characters in the text is increases or decreases.
line-breakHow to break the line
list-styleAll the properties are set to list in one declaration.

M –

 Details
marginSets all the edge properties in a single revelation.
margin-leftThe left margin is set.
margin-rightThe right margin is set.
max-heightThe max height is set.
max-widthThe max-width is set.
@mediaThe style rules for various media are set.
min-heightThe min-height is set for element.
min-widthThe min-width set for element.

O –

 Details
object-fitDescribes how the contents of a replacement element should be put within the box defined by the height and width of the element.
object-positionThe alignment of the substituted element within its box is specified.
orderThe order of the flexible item is set.
outlineThe outline-width, outline-style, and outline-color properties are combined into this shorthand property.

P –

 Details
paddingAll of the padding-* properties are condensed into one property.
padding-topThe top padding is set.
page-break-afterAfter an element, the page-break behavior is set.
positionThe type of positioning mechanism for an element is specified here (static, relative, absolute, or fixed).

Q –

 Details
quotesSettle the type of quotation mark.

R –

 Details
resizeExplains that the element is resizable by the user.
rightSpecifies the right position of the element.

S –

 Details
scroll-behaviorIdentifies whether it will smoothly scroll position in a scrollable box.

T –

 Details
tab-sizeThe width of a tab character is identified.
text-alignIdentify the horizontal alignment.
text-decorationIdentify the decoration added.
text-indentIdentify the indentation of the first line in text-block.
text-justifyWhen text-align is justified the justification is used.
text-shadowIt adds shadow.
topIdentify the top position.
transitionIt is used for all transition properties.

U –

 Details
user-selectIdentifies is the text of an element that can be selected.

V –

 Details
vertical-alignIt sets the vertical alignment of an element.

W –

 Details
white-spaceIdentify how white space inside an element is handled.
widthIt sets the width of an element.
word-breakIdentify how words should break when reaching the end of a line.

Z –

 Details
z-indexSets the stack order of position element.

Related Topics

CSS Gradient

CSS Gradient: The CSS gradient property is applied to show the smooth transition inside two specified colors or more than two specified colors. Need of CSS Gradient The following are a few...

4 minutes read.

CSS Ellipsis

The CSS ellipsis kind of is the value that mostly is used by the property: text-overflow. Here, we will discuss the following: What is CSS Ellipsis? Syntax for CSS ellipsis How to...

3 minutes read.

Radial-gradient() CSS function

Radial-gradient() CSS function It defines a CSS in-built function, which produces a smooth transition among multiple colors. It is used to set any radial-gradient that is same as a background-image. This...

4 minutes read.

CSS Border

CSS Border: The border property of CSS allows us to define the style, color, width, and radius of the element’s border. It is applied to various elements to set-up the...

4 minutes read.

CSS Checkbox style

CSS Checkbox style: It is an element of HTML, which is used to get input from various users. It is difficult to style any checkbox. However, some elements make it...

6 minutes read.

CSS Tutorial

CSS refers to the Cascading Style Sheet. CSS is a form of a programming language. In other words, CSS is a language of the style sheet that is utilised for...

9 minutes read.

How to change the font in CSS

How to change the font in CSS? Professionals can't deny typefaces — how users organize and style text — if we want to completely customize the website's design. One may wish...

4 minutes read.

How to change font size in CSS

How to change font size in CSS? Font Size: - Users may attract attention to content on a website page in various ways. One element in a sentence can be highlighted. You...

5 minutes read.

CSS Image Gallery

Image galleries are used to display and store collections of images. Example Let’s discuss an example. CSS was used to create the following image gallery: Code is as follows: <html> <head> <style> div.gallery {   margin: 6px;   border: 1px...

5 minutes read.

CSS Position

CSS Position: The position property in CSS is applied to set the position of the elements. It can be used to position the backside of an element. It is also...

3 minutes read.

Hover condition for a:before and a:after in CSS

In CSS, :after and :before are used to add content after and before the element. The CSS pseudo-class is used to add some styling effect to the webpage. We can change...

4 minutes read.

How to include CSS

How to include CSS CSS is included in HTML pages for formatting the documents based on the information inside a style sheet. We can add CSS in HTML documents in the following three ways: Inline...

5 minutes read.

Cascading Style Sheet

CSS refers to the Cascading Style Sheet. CSS is a form of a programming language. In other words, CSS is a language of the style sheet that is utilised for...

7 minutes read.

CSS Transition

CSS Transition The transitions in CSS are influenced, included to modify the component from one design to another, without the use of the JavaScript or Flash. We should describe two of the...

2 minutes read.

CSS Vertical Align

Vertical Align The vertical align CSS property describes the cell box of the table and an inline alignment vertically. This property is a self-explanatory and an essential property in CSS. But,...

2 minutes read.

CSS Counters

CSS Counters: The CSS counter property is similar to the variables. CSS counters are controlled via CSS, and its values are incremented via rules of CSS to record how much...

4 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

How to resize an image in CSS

How to resize an image in CSS? The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute...

3 minutes read.

CSS Overflow

CSS Overflow: The Overflow property in CSS is used to manage the content if it overflows from its container of the block level. We have seen that all the elements...

3 minutes read.

CSS Color Keywords

Here, we will discuss the following keywords: transparent currentcolor Inherit Transparent keyword A color can generally be made transparent by using the transparent keyword. Often it is used to for all intents...

4 minutes read.