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.
