CSS Cheatsheet Table: 40+ Essential Properties for Developer

CSS (Cascading Style Sheets) is the fundamental cornerstone of web design, providing developers with the precision to craft visually appealing and user-centric websites. Our comprehensive css cheatsheet in tabular format offers an exhaustive guide to over 40 pivotal CSS properties, values, and expert tips for creating remarkable, adaptive, and engaging designs. Ranging from advanced layout techniques to captivating animation effects, this exhaustive resource serves as your go-to reference for mastering the art of CSS.

CSS Cheatsheet

Category	Property / Feature	Syntax / Example	Description / Notes

Text Styling color color: red; Sets the text color

font-family font-family: Arial, sans-serif; Defines the font family

font-size font-size: 16px; Specifies the text size

font-weight font-weight: bold; Controls the thickness of text

line-height line-height: 1.5; Sets the space between lines

text-align text-align: center; Aligns text horizontally

text-transform text-transform: uppercase; Controls text capitalization

text-decoration text-decoration: underline; Adds or removes text decoration

letter-spacing letter-spacing: 2px; Adjusts the spacing between letters

word-spacing word-spacing: 5px; Adjusts the spacing between words

white-space white-space: nowrap; Prevents text from wrapping to a new line

direction direction: rtl; Sets text direction (e.g., right-to-left)

Box Model margin margin: 10px; Defines space outside the element

padding padding: 10px; Defines space inside the element

border border: 1px solid black; Specifies the border style

width width: 100%; Sets the width of an element

height height: auto; Sets the height of an element

box-shadow box-shadow: 2px 2px 5px gray; Adds shadow around the element

border-radius border-radius: 10px; Rounds the corners of an element

outline outline: 2px dotted red; Adds an outline without affecting layout

outline-offset outline-offset: 5px; Specifies space between the outline and element

box-sizing box-sizing: border-box; Includes padding and border in element dimensions

Background background-color background-color: lightblue; Sets the background color

background-image background-image: url('image.jpg'); Adds a background image

background-size background-size: cover; Specifies the size of the background image

background-position background-position: center; Positions the background image

background-repeat background-repeat: no-repeat; Prevents background from repeating

background-clip background-clip: text; Clips background to the element’s text

background-attachment background-attachment: fixed; Controls background scroll behavior

Positioning position position: relative; Specifies the position of an element

top, left, etc. top: 10px; left: 20px; Moves the element relative to its position

z-index z-index: 10; Sets the stack order of elements

display display: flex; Defines how an element is displayed

overflow overflow: hidden; Controls content overflow

float float: right; Floats an element to the left or right

clear clear: both; Prevents an element from wrapping around floated elements

Flexbox display: flex; display: flex; Enables flexbox layout

justify-content justify-content: center; Aligns items horizontally

align-items align-items: center; Aligns items vertically

flex-wrap flex-wrap: wrap; Wraps items within the container

flex-grow flex-grow: 1; Defines how items grow to fill space

Grid display: grid; display: grid; Enables grid layout

grid-template-rows grid-template-rows: 100px 200px; Defines row heights

grid-template-columns grid-template-columns: 1fr 2fr; Specifies column widths

gap gap: 10px; Sets space between grid items

Animations animation animation: slideIn 2s ease-in-out; Adds animation to an element

@keyframes @keyframes slideIn { from { ... } to { ... } } Defines animation keyframes

transition transition: all 0.3s ease; Smooth transitions for property changes

Responsive Design @media @media (max-width: 600px) { ... } Applies styles for specific screen sizes

Shapes & Filters filter filter: blur(5px); Applies graphical effects like blur, brightness

transform transform: rotate(45deg); Rotates, scales, or skews an element

Pseudo-elements ::before content: ''; position: absolute; Inserts content before an element

::after content: ''; Inserts content after an element

Other Features cursor cursor: pointer; Changes cursor style (e.g., pointer, default)

visibility visibility: hidden; Hides an element without removing it from flow

clip-path clip-path: circle(50%); Clips an element into a specific shape

FAQs

What are the most commonly used CSS properties?

Properties like color, margin, padding, display, font-family, position, and background are among the most frequently used in CSS.

Are CSS cheat sheets suitable for beginners?

Absolutely! CSS cheat sheets are designed to be simple and accessible, providing beginners with a structured way to learn and reference CSS properties.

How does CSS help in responsive web design?

CSS enables responsive design through media queries, flexible layouts (e.g., Flexbox, Grid), and relative units (e.g., percentages, em, rem), ensuring websites work well on all devices.

What are some advanced CSS techniques included in cheat sheets?

Techniques like keyframe animations, transitions, pseudo-elements, custom properties (CSS variables), and filters are often part of advanced CSS cheat sheets.

Is there a difference between CSS and SCSS/SASS?

Yes, SCSS/SASS are preprocessors that extend CSS with features like variables, nesting, and mixins, making stylesheets more maintainable.

What tools or resources are helpful for mastering CSS?

Tools like browser dev tools, online code editors (e.g., CodePen, JSFiddle), CSS frameworks (e.g., Bootstrap, Tailwind), and cheat sheets can significantly aid in mastering CSS.