×

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 Hover

CSS Hover: CSS :hover is used to select the various elements whenever we point the mouse on these elements. We can also use this selector on all the HTML elements,...

3 minutes read.

Difference between CSS Grid and CSS Flexbox

The way that information is arranged on a website reveals a lot about you or your company. Organizational abilities are just as important as having the right materials. The design...

3 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.

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 Order

CSS Order CSS order property in CSS describes the flex item’s order inside the flex or any grid container. It is applied to order any flex item. Note: If any component is...

3 minutes read.

CSS Button Style

CSS button style: Using CSS properties, we can easily modify the default BUTTON and enhance its appearances using simple graphic commands. TYPES OF BUTTON STYLE: - Program to change button using CSS ...

35 minutes read.

How to center a button in CSS

How to center a button in CSS? In the tutorial, we will learn how to center a button in CSS. CSS (Cascading Style Sheets) gives an HTML web page the greatest possible...

4 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 Opacity

The CSS Opacity property is used to set the clarity of the image. It is defined as degree and specify the transparency of an element. Note: Opacity value will be less...

1 minute read.

How to edit CSS in WordPress

Developing a new website or blog is a difficult undertaking. We want to create something that the consumers will adore, but we might not want the setting to take months and...

7 minutes read.

CSS Pseudo-class

Pseudo-class The pseudo-class may be depicted as the keyword which can be mixed to any selector that specifies the elected element’s unique state. It can be included to a selector to...

6 minutes read.

CSS Images

Images in CSS: Images are a critical part of a web application. It includes various types of images in the web application that cannot be recommended. However, it is essential...

4 minutes read.

CSS Clip

CSS Clip The Clip property in CSS describes the element’s visible area. It applies over the elements which are absolutely positioned (position: absolute ;). Generally, it is used when an image...

2 minutes read.

CSS calc()

CSS calc(): The CSS calc() function is a CSS function of inbuilt type, which permits us to implement calculations. It is used for calculating the angle, integer frequency, number, time,...

3 minutes read.

CSS Descendant Selector

Descendant Selector The Descendant selector in CSS is used to match the descendant components of a particular component. The term descendant depicts nested in whatever place, inside a DOM tree. This...

2 minutes read.

CSS Font

CSS Font: CSS has font property, which makes the text more attractive. We can alter the entire look by changing font color, font size, font style, and much more. In...

5 minutes read.

What is Bootstrap CSS?

Bootstrap: - Bootstrap is a CSS framework that is free to use and is used for the front-end development of the website in a faster and easier way. Bootstrap was released as...

3 minutes read.

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 Arrow

CSS Arrow The arrow of CSS is applied to insert an array with the tooltip. It can make a tooltip as any speech bubble. Also, this arrow can be illustrated in...

4 minutes read.

CSS Background-blend-mode

Background-blend-mode The background-blend-mode property sets a blend mode of the component’s every background layer (color/image). It illustrates how the element background image blends well with the element background color. We can...

9 minutes read.