CSS Properties List Cheatsheet Complete Reference guide. The article provides a complete CSS Properties list cheat sheet, descriptions, and the most common usages.
CSS (Cascading Style Sheets) is a powerful tool for web developers to design and style websites.
With CSS, developers can control the layout, fonts, colors, and other visual aspects of a webpage.
To achieve this, CSS uses a vast array of properties that allows developers to manipulate the appearance and behavior of elements on a web page.
A complete CSS properties list cheat sheet can be a valuable resource for developers who want to learn more about the available attributes and how to use them.
Such a cheat sheet provides a comprehensive inventory of all the CSS properties along with examples of their usage.
With this information at their fingertips, developers can create stunning web pages that are visually appealing, easy to navigate, and user-friendly.
In this article, we will explore a complete CSS properties list cheatsheet that includes all the essential attributes used in modern web development.
We will provide clear and concise descriptions of each property, along with practical code examples that demonstrate how they can be used in different scenarios.
Whether you are a beginner or an experienced web developer, this CSS properties list cheat sheet will help you to improve your skills and create web pages that are both functional and visually appealing.
CSS Properties Cheatsheet Complete Guide
| Property | Code Snippet | Description | Usage |
| color | color: #000000; | Sets the text color of an element | This applies to any text element |
| background-color | background-color: #FFFFFF; | Sets the background color of an element | Applies to any element |
| font-family | font-family: Arial, sans-serif; | Sets the font family of text | This applies to any text element |
| font-size | font-size: 16px; | Sets the font size of text | This applies to any text element |
| font-weight | font-weight: bold; | Sets the font weight of text | This applies to any text element |
| text-align | text-align: center; | Sets the horizontal alignment of text | This applies to any text element |
| text-decoration | text-decoration: underline; | Sets the decoration of text | This applies to any text element |
| line-height | line-height: 1.5; | Sets the height of a line of text | This applies to any text element |
| letter-spacing | letter-spacing: 2px; | Sets the space between characters in text | This applies to any text element |
| word-spacing | word-spacing: 4px; | Sets the space between words in text | This applies to any text element |
| display | display: block; | Sets the display behavior of an element | Applies to any element |
| visibility | visibility: hidden; | Sets the visibility of an element | Applies to any element |
| opacity | opacity: 0.5; | Sets the opacity of an element | Applies to any element |
| cursor | cursor: pointer; | Sets the cursor type when hovering over an element | Applies to any element |
| position | position: absolute; | Sets the position of an element relative to its parent | Applies to any element |
| top | top: 10px; | Sets the top position of an element relative to its parent | Applies to any element with a position value of “absolute”, “relative”, or “fixed” |
| bottom | bottom: 10px; | Sets the bottom position of an element relative to its parent | Applies to any element with a position value of “absolute”, “relative”, or “fixed” |
| left | left: 10px; | Sets the left position of an element relative to its parent | Applies to any element with a position value of “absolute”, “relative”, or “fixed” |
| right | right: 10px; | Sets the right position of an element relative to its parent | Applies to any element with a position value of “absolute”, “relative”, or “fixed” |
| float | float: left; | Sets the horizontal alignment of an element relative to other elements | Applies to any element |
| clear | clear: both; | Clears any floated elements to prevent overlapping | Applies to any element |
| z-index | z-index: 1; | Sets the stack order of an element | Applies to any element with a position value of “absolute”, “relative”, or |
| overflow | overflow: hidden; | Specifies whether to clip content or to add scrollbars when an element’s content is too big for its container | Applies to any element |
| white-space | white-space: nowrap; | Sets how white space inside an element is handled | This applies to any text element |
| text-transform | text-transform: uppercase; | Sets the capitalization of text | This applies to any text element |
| box-shadow | box-shadow: 2px 2px 2px 2px #000000; | Adds a shadow effect to an element | Applies to any element |
| background-image | background-image: url(“image.jpg”); | Sets the background image of an element | Applies to any element |
| background-repeat | background-repeat: no-repeat; | Sets how the background image of an element is repeated | This applies to any element with a background image |
| background-size | background-size: cover; | Sets the size of the background image of an element | This applies to any element containing text |
| box-sizing | box-sizing: border-box; | Sets how an element’s width and height are calculated, including its padding and border | Applies to any element |
| padding | padding: 10px; | Sets the padding properties of an element | Applies to any element |
| max-width | max-width: 100%; | Sets the maximum width of an element | Applies to any element |
| max-height | max-height: 100%; | Sets the maximum height of an element | Applies to any element |
| text-align | text-align: center; | Sets the alignment of text | This applies to any text element |
| text-decoration | text-decoration: underline; | Sets the decoration of text | Sets the font size of the text |
| line-height | line-height: 1.5; | Sets the height of a line of text | This applies to any text element |
| letter-spacing | letter-spacing: 1px; | Sets the spacing between characters | This applies to any text element |
| word-spacing | word-spacing: 2px; | Sets the spacing between words | This applies to any text element |
| transform | transform: rotate(45deg); | Applies a transformation to an element, such as rotation or scaling | Applies to any element |
| justify-content | justify-content: center; | Sets the alignment of flex items along the main axis of a flex container | Applies to any element with display: flex |
| align-items | align-items: center; | Sets the alignment of flex items along the cross axis of a flex container | Applies to any element with display: flex |
| flex-direction | flex-direction: row; | Sets the direction of the main axis of a flex container | Applies to any element with display: flex |
| flex-wrap | flex-wrap: wrap; | Sets whether flex items should wrap when they exceed the width of a flex container | Applies to any element with display: flex |
| flex-grow | flex-grow: 1; | Sets the amount that a flex item will grow relative to the other flex items in a flex container | Applies to any element with display: flex |
| flex-shrink | flex-shrink: 1; | Sets the amount that a flex item will shrink relative to the other flex items in a flex container | Applies to any element with display: flex |
| flex-basis | flex-basis: 100px; | Sets the initial size of a flex item | Applies to any element with display: flex |
| background-position | background-position: center; | Sets the position of the background image relative to the element | This applies to any text element |
| margin | margin: 10px; | Sets the margin around an element | Applies to any element |
| user-select | user-select: none; | Sets whether the user can select text within an element | Applies to any element |
| pointer-events | pointer-events: none; | This applies to a positioned element | Applies to any element |
| top | top: 10px; | Sets the distance between the top edge of an element and the top edge of its parent | This applies to a positioned element |
| bottom | bottom: 10px; | Sets the distance between the bottom edge of an element and the bottom edge of its parent | This applies to a container element with child elements |
| flex | display: flex; | Sets a flexible container for an element and its children, allowing for easy alignment and spacing | This applies to any text element |
| justify-content | justify-content: center; | Sets the alignment of the flex items along the main axis of the flex container | Applies to a container element with child elements and a “display: flex” property |
| align-items | align-items: center; | Sets the alignment of a single flex item along the cross-axis of the flex container | Applies to a container element with child elements and a “display: flex” property |
| align-self | align-self: center; | This applies to any element with a border | Applies to a single child element within a container element with a “display: flex” property |
| font-weight | font-weight: bold; | Sets the weight of the font used in an element’s text | This applies to any text element |
| line-height | line-height: 1.5; | Sets the height of a line of text in an element | This applies to any text element |
| letter-spacing | letter-spacing: 1px; | Sets the space between characters in an element’s text | This applies to any text element |
| text-align | text-align: center; | Sets the horizontal alignment of text within an element | Sets the alignment of the flex items along the cross-axis of the flex container |
| transition | transition: background-color 1s ease-in-out; | Sets a transition effect for an element when a property changes | This applies to any text element |
| text-overflow | text-overflow: ellipsis; | Sets how text should be displayed when it overflows its container | Applies to any text element within a container element with a fixed width and height |
| word-break | word-break: break-all; | Sets how words should break within an element’s text | This applies to any text element |
| user-select | user-select: none; | Sets whether an element’s text can be selected by the user | Applies to any element with text |
| text-shadow | text-shadow: 1px 1px 1px #888; | Sets a shadow effect on an element’s text | This applies to a container element with child elements that have |
| filter | filter: blur(5px); | Applies a visual effect to an element, such as blurring or color shifting | Applies to any element |
| perspective | perspective: 100px; | Sets the perspective from which an element is viewed in 3D space | Applies to a container element with child elements that have a “transform: translateZ” property |
| backface-visibility | backface-visibility: hidden; | Sets whether the back face of an element is visible when it is rotated in 3D space | This applies to any element with a border |
| border-radius | border-radius: 5px; | Sets the rounded corners of an element’s border | Applies to any element with a border |
| user-select | user-select: none; | Sets whether an element’s text can be selected by the user | Applies to any element with text |
We hope you find this CSS properties cheat sheet extremely helpful in learning and practicing CSS in your day-to-day programming.
soorya