CSS CheatSheet Table: 40+ Unique Properties to Master Your Web Design
Nishant KG (Systems Engineer)
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.
On This Page
Table of Contents
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.
