Cheat day

Everybody tries to get a chance of enjoying cheat day. But today we are going to see the cheat sheet of CSS which contains all the properties of CSS which we can use on our daily bases.

Syntax Used

1. Overall Style:

body {  
    font-family: 'Arial', sans-serif;  
    background-color: #f4f4f4; 
    margin: 20px;  
}

2. Section Headings:

Style headings for different sections of the cheat sheet.

h2 {  
    color: #333;  
    border-bottom: 2px solid #333;  
    padding-bottom: 5px;  
    margin-top: 20px;  
}

3. Code Blocks:

Highlight code blocks with a distinct background color and border.

pre {  
    background-color: #f8f8f8;  
    border: 1px solid #ddd;  
    padding: 10px;  
    overflow: auto;  
}

4. Code Inline:

Style inline code to differentiate it from regular text.

5. Comments:

Style comments for additional information or explanations.

/* This is a comment */  
.comment {  
    color: #888;  
    font-style: italic;  
}

6. List Styles:

Customize list styles for easy readability.

ul {  
    list-style-type: square;  
}  
li {  
    margin-bottom: 5px;  
}

7. Links:

Style links to make them stand out.

a {  
    color: #007bff;  
    text-decoration: none;  
}  
a:hover {  
    text-decoration: underline;  
}

8. Important Notes:

Highlight important notes or warnings.

.important {  
    color: #dc3545;  
    font-weight: bold;  
}

9. Responsive Design:

Ensure the cheat sheet is responsive for different screen sizes.

@media screen and (max-width: 600px) {  
    /* Adjust styles for smaller screens */  
    body {  
        margin: 10px;  
    }  
}

Benefits of Using Cheat Sheets

  1. Quick Reference

  2. Memory Aid

  3. Learning Aid

  4. Problem Solving

  5. Workflow Efficiency

  6. Training and Workshops