This CSS Cheatsheet is going to provide you most common CSS properties snippets. All the common properties of CSS are displayed on a single page only.🙂

➱Font Properties:

👉The font properties allow you to change the look and style of the font. There are many font properties in CSS which are mentioned below:-

Font-Family: It changes the font family of specified words, paragraphs, and sentences.

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

Font-Style: Used to Change the text to normal, oblique, and italics

font-style: oblique;

Font-Size: It is used to modify the size of the displayed font

font-size: larger;

Font-Weight: It is used to determine the weight of the font

font-weight: normal;

Font-Variant: It is used to display font in normal or small-caps.

font-variant: small-caps;

font: Shorthand Property

font: font-style font-variant font-weight font-size font-family;

➱Text-properties:

👉Text formatting properties are operated to design and style text by forming their alignment, spacing, etc. as per requirement.

Letter-Spacing: Used to specify space between the characters of the text.

letter-spacing: 0.1em;

Word-Spacing: It represents an additional amount of space between words.

word-spacing: 0.4em;

Text-decoration: Used to add or remove text- decorations like underline, overline, line-through, or none.

text-decoration: underline;

Color: Used to set the color of the text.

color: cyan;

Text-alignment: Used to set the horizontal alignment of the text

text-align: left;

Text-Transform: Permits for capitalizing the first letter of each word, capitalizing all letters of a word, using all small letters in each word, and the initial value.

text-transform: capitalize;

Text-Decoration: It Allows text to be decorated by the properties like underline, overline, line-through, blink, and none.

text-decoration: none;

Text-indent: Used to specify the amount of indentation

text-indent: 3em;

Text-shadow: The text-shadow property is used to add shadow to the text.

text-shadow: horizontal -shadow vertical-shadow blur-radius color|

➱Background Properties:

👉 Background properties are used to style the background and define the background effects for elements.

Background-Image: Sets the background image of an element

background-image: url("clashingcode");

Background-Position: The position property is mainly used to specify the positioning of the image

background-position: right top;

Background-Repeat: Defines how a specified background image is repeated. The repeat-x value will repeat the image horizontally(x-axis) while the repeat-y value will repeat the image vertically(y-axis).

background-repeat: repeat-x;

Background-Attachment: specifies the kind of attachment of the background image(scroll with the content or be fixed respect the container).

background-attachment: scroll;

Background-Color: Sets the background color of an element

background-color: blue;

Background: Shorthand Property

background: background-color background-image background-repeat background-attachment background-position;

➱Border Properties:

👉Border properties allow you to specify how the border of the box representing an element should look.

Border-Color: Used to set the color of an element's border.

border-color: black;

Border-Style: Allows you to set the style of a border - none, dotted, dashed, solid, or double.

border-style: dotted;

Border-Radius: Allows you to add rounded corners to

border-radius: 15px;

Border-Width: Used to set the width of an element's border.

border-width: 20%

Border: Shorthand Property

border: 10px, red, double;

➱Box Model and Classification Properties:

👉 In an ordinary sense, the CSS box model is a container that wraps around every HTML element consisting of the border, padding, margin, and content.

Margin: Sets the margin as top, left, bottom, or right.

margin: top right bottom left;

Padding: Sets the padding as top, left, bottom, or right.

padding: top right bottom left;

Width: Sets an element's width as absolute units or auto.

width: auto;

Height: Sets an element’s height as absolute units or as auto.

height: auto;

Overflow: specifies what should happen if content overflows an element's box.

overflow: hidden;

Visibility: Switches of the visibility of the element but the space occupied.

visibility: visible;

Display: It defines how elements are displayed on the web page.

display: block;

Float: Allows text to wrap around an element

float: none;

Position: It specifies the positioning method of the HTML entity on the web page.

position: sticky;

➱Table Properties:

👉Table properties are used to give style to the tables in the document.

Border-collapse: The border-collapse property sets whether the table borders should be collapsed into a single border:

border-collapse: separate;

Empty-cells: Used to show or hide borders and backgrounds of table cells that have no visible content.

empty-cells: show;

Caption Side: The caption side property is used for controlling the placement of the caption in the table. By default, captions are placed above the table.

caption-side: top;

➱Animation Properties:

👉 Animations allow one to animate transitions or other media files on the web page.

Animation-name: Specifies the name of the keyframe

animation-name: clashing;

Animation-duration: Defines how the time is taken for the execution of animation.

animation-duration: 10s;

Animation-timing-function:

Specifies the speed of the animation.

animation-timing-function: ease;

Animation-delay: Specifies a delay before the animation will start

animation-delay: 5ms;

Animation-iteration-count: Determines how many times an animation should be played

animation-iteration-count: 3;

Animation-direction: Determines the play direction of animation(i.e alternate or reverse)

animation-direction: normal;

Animation-fill-mode:

Determines what values are applied by the animation outside the time it is executing

animation-fill-mode: both;

Animation: Shorthand Property. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

animation: 4s linear 0s infinite alternate;

➱Transition:

👉Allows you to change property values smoothly, over a given duration.

Transition-delay: The transition-delay property specifies a delay (in seconds) for the transition effect.

transition-delay: 1s;

Transition-duration: Determines how many seconds or milliseconds a transition effect takes to complete

transition-duration: 2s;

Transition-timing-function: This property allows a transition effect to change speed over its duration.

transition-timing-function: linear;

Transition-property: Specifies the name of the CSS property the transition effect is for

transition-property: none;

Transition: Shorthand Property. The transition property is a shorthand property for: transition-property transition-duration transition-timing-function transition-delay

transition: all 4s ease-in-out 1s;

➱FlexBox:

👉Flexbox is a one-dimensional layout method for laying out items in rows or columns.Flexbox makes it simple to align items vertically and horizontally using rows and columns.

Display: It enables a flex container; inline or block

display: flex;

Flex-direction: Determines the direction of the items.

flex-direction: row

Flex-wrap: Determines whether the flex items should wrap or not.

flex-wrap: wrap;

Justify-content: This property is used to align the flex items. flex-wrap: nowrap;

justify-content: flex-start;

Align-items: Determines the behavior for how flex items are laid out along the cross-axis on the current line.

align-items: flex-start;

Align-content: specifies the distribution of space between and around content items along a flexbox's cross-axis

align-content: flex-start;

Order: It is used to control the order in which flex items appear in the flex container.

order: 1;

Flex-grow: It allows representing the ability of a flex item to grow by your choice.

flex-grow: 1;

Flex-basis: This defines the default size of an element before the remaining space is distributed

flex-basis: 50%;

Flex-shrink: Defines the ability for a flex item to shrink.

flex-shrink: 3;

Align-self: Sets the alignment for individual items.

align-self: flex-start;

➱ CSS Grid:

👉Grid layout is a 2-Dimensional grid system to CSS which helps to design complex responsive web design easily and effectively.

Display-grid: When the display property is set to grid the container turn ups to the grid.

display: grid;

Grid-template-areas: Determines how to display columns and rows, using named grid items

 grid-template-areas: "myArea myArea . . .";

Grid-column-gap: Defines the gap between the columns

grid-column-gap: 50px;

Grid-row-gap: Specifies the size of the gap between rows

grid-row-gap: 50px;

Grid-template-columns: It Defines how many columns there should be in a grid layout

grid-template-columns: auto auto auto auto;

Grid-template-rows: similar to grid-template-columns, The grid-template-rows property specifies the number of rows in a grid layout.

grid-template-rows: 10px 30px;

Grid-auto-columns: The grid-auto-columns property specifies a size for the columns in a grid container.

grid-auto-columns: 50px;

Grid-auto-rows :

Put a default size for the rows in a grid:

grid-auto-rows: 250px;

Grid-auto-flow:

The grid-auto-flow property directs how auto-placed items get inserted.

grid-auto-flow: column;

Place-content:

The place-content property allows you to align both justify-content and align content.

place-content: align-content / justify-content ;

Grid-column-start: Defines where to start the grid item.

grid-column-start: 4;

Grid-column-end: on which column line the item will end

grid-column-end: span 2;

Grid-row-start: This property specifies on which row line the item will start

grid-row-start: 2;

Grid-row-end: on which row line the item will end:

grid-row-end: span 1;

➱Conclusion:

You can copy any of these properties and just paste them into the code editor.🙂

👉Hope, this will be helpful.

Thanks for READING MY ARTICLE!!

Also, check out my other platforms:
Instagram
Twitter
Telegram