CSS cheat sheet document to practice real - left

world concepts quickly here we are prepared 6. Flexbox Layout

most using CSS properties and attributes for - display: flex;
your reference practice: - flex-direction
- justify-content
CSS Cheat Sheet - align-items
- flex-grow
1. Selectors and Basic Syntax
- flex-shrink
- Element Selector - flex-basis
- Class Selector 7. Grid Layout
- ID Selector - display: grid;
- Grouping Selectors - grid-template-columns
- Universal Selector
- grid-template-rows
- Descendant Selector - grid-gap
- Attribute Selector - grid-row
- Pseudo-class Selector - grid-column
- Pseudo-element Selector 8. Transitions and Animations
- Combining Selectors
- transition
2. Box Model - transition-property
- width - transition-duration
- height
- transition-timing-function
- padding
- animation
- margin
- animation-name
- border
- animation-duration
3. Typography
- animation-timing-function
- font-family - animation-iteration-count
- font-size
- animation-delay
- font-weight 9. Box Shadow and Border Radius
- font-style - box-shadow
- text-align - border-radius
- text-decoration
10. Media Queries
- text-transform
- @media rules for responsive design
- line-height
11. @import and @font-face
- letter-spacing - Importing external stylesheets
4. Colors and Background
- Loading custom fonts
- color 12. CSS Units
- background-color - px, em, rem, %
- background-image - vh, vw, vmin, vmax
- background-repeat 13. Specificity and Cascade
- background-position
- Understanding specificity
- background-size - CSS cascade rules
- opacity
14. CSS Variables (Custom Properties)
5. Display and Positioning
- Declaring and using CSS variables
- display 15. Transitioning to CSS Grid/Flexbox
- position - Commonly used layout techniques these
- float 16. Browser Compatibility to check
- clear - all you need to check and choose
- z-index components
- top
- right
- bottom
Example Source code notes for your /* Width and Height */
reference: .box {
width: 200px;
CSS Cheat Sheet with Examples height: 150px;
}
1. Basic Styling
body { /* Padding */
background-color: #f0f0f0; .box {
color: #333; padding: 20px;
font-family: Arial, sans-serif; }
}
/* Margin */
2. Selectors .box {
/* Element Selector */ margin: 10px;
p{ }
/* CSS Rules */
} /* Border */
.box {
/* Class Selector */ border: 1px solid #333;
.classname { }
/* CSS Rules */
} 5. Background
/* Background Color */
/* ID Selector */ .box {
#idname { background-color: #f0f0f0;
/* CSS Rules */ }
}
/* Background Image */
3. Typography .box {
/* Font Size */ background-image: url("image.jpg");
h1 { background-size: cover;
font-size: 24px; }
}
6. Display and Positioning
/* Font Weight */ /* Display */
strong { .container {
font-weight: bold; display: flex;
} justify-content: center;
align-items: center;
/* Text Decoration */ }
a{
text-decoration: none; /* Positioning */
} .box {
position: absolute;
/* Text Color */ top: 50%;
p{ left: 50%;
color: #0066cc; transform: translate(-50%, -50%);
} }

4. Box Model 7. Flexbox Layout

 .container { @media (max-width: 768px) {
display: flex; /* CSS Rules for smaller screens */
justify-content: space-between; }
}
16. Animations
8. Transitions @keyframes move {
.box { from {
transition: background-color 0.3s ease; transform: translateX(0);
} }
.box:hover { to {
background-color: #0066cc; transform: translateX(100px);
} }
}
9. Box Shadow .box {
.box { animation: move 2s infinite alternate;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
}
17. Pseudo-classes
10. Border Radius a:hover {
.box { color: #ff0000;
border-radius: 5px; }
} input:focus {
border-color: #00ff00;
11. Float and Clear }
.float-left {
float: left; 18. Pseudo-elements
} p::first-line {
.float-right { font-weight: bold;
float: right; }
}
.clear { 19. Gradient Background
clear: both; .box {
} background: linear-gradient(to right,
#ff0000, #00ff00);
12. Overflow }
.box {
overflow: hidden; 20. Flexbox Alignment
} .container {
display: flex;
13. Z-Index align-items: center;
.box { justify-content: space-around;
z-index: 1; }
}

14. Opacity Use this css3 cheat sheet for your real world
.box { practice and quick designs.
opacity: 0.8;
} Happy compiling!

15. Media Queries