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.🙂
👉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-Size: It is used to modify the size of the displayed font
Font-Weight: It is used to determine the weight of the font
Font-Variant: It is used to display font in normal or small-caps.
font: Shorthand Property
font: font-style font-variant font-weight font-size font-family;
👉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.
Word-Spacing: It represents an additional amount of space between words.
Text-decoration: Used to add or remove text- decorations like underline, overline, line-through, or none.
Color: Used to set the color of the text.
Text-alignment: Used to set the horizontal alignment of the text
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-Decoration: It Allows text to be decorated by the properties like underline, overline, line-through, blink, and none.
Text-indent: Used to specify the amount of indentation
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 are used to style the background and define the background effects for elements.
Background-Image: Sets the background image of an element
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-Attachment: specifies the kind of attachment of the background image(scroll with the content or be fixed respect the container).
Background-Color: Sets the background color of an element
Background: Shorthand Property
background: background-color background-image background-repeat background-attachment background-position;
👉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-Style: Allows you to set the style of a border - none, dotted, dashed, solid, or double.
Border-Radius: Allows you to add rounded corners to
Border-Width: Used to set the width of an element's border.
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.
Height: Sets an element’s height as absolute units or as auto.
Overflow: specifies what should happen if content overflows an element's box.
Visibility: Switches of the visibility of the element but the space occupied.
Display: It defines how elements are displayed on the web page.
Float: Allows text to wrap around an element
Position: It specifies the positioning method of the HTML entity on the web page.
👉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:
Empty-cells: Used to show or hide borders and backgrounds of table cells that have no visible content.
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.
👉 Animations allow one to animate transitions or other media files on the web page.
Animation-name: Specifies the name of the keyframe
Animation-duration: Defines how the time is taken for the execution of animation.
Specifies the speed of the animation.
Animation-delay: Specifies a delay before the animation will start
Animation-iteration-count: Determines how many times an animation should be played
Animation-direction: Determines the play direction of animation(i.e alternate or reverse)
Determines what values are applied by the animation outside the time it is executing
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;
👉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-duration: Determines how many seconds or milliseconds a transition effect takes to complete
Transition-timing-function: This property allows a transition effect to change speed over its duration.
Transition-property: Specifies the name of the CSS property the transition effect is for
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 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
Flex-direction: Determines the direction of the items.
Flex-wrap: Determines whether the flex items should wrap or not.
Justify-content: This property is used to align the flex items. flex-wrap: nowrap;
Align-items: Determines the behavior for how flex items are laid out along the cross-axis on the current line.
Align-content: specifies the distribution of space between and around content items along a flexbox's cross-axis
Order: It is used to control the order in which flex items appear in the flex container.
Flex-grow: It allows representing the ability of a flex item to grow by your choice.
Flex-basis: This defines the default size of an element before the remaining space is distributed
Flex-shrink: Defines the ability for a flex item to shrink.
Align-self: Sets the alignment for individual items.
➱ 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.
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-row-gap: Specifies the size of the gap between rows
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.
Put a default size for the rows in a grid:
The grid-auto-flow property directs how auto-placed items get inserted.
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-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-end: on which row line the item will end:
grid-row-end: span 1;
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!!
Did you find this article valuable?
Support Madni Aghadi by becoming a sponsor. Any amount is appreciated!