Overview
A CSS cheat sheet is a quick reference guide that provides essential Cascading Style Sheets (CSS) properties and techniques for web developers and designers. It serves as a handy tool for creating and maintaining stylesheets, with a focus on achieving responsive and visually appealing designs. Here’s a glance at key elements typically found in a CSS cheat sheet
1. Viewport Meta Tag: Set the viewport properties for better mobile responsiveness.
<meta name="viewport" content="width=device-width, initial-scale=1.0">2. Media Queries: Segregate styles based on screen sizes, enabling responsive design for various devices.
/* Small screens (phones) */
@media only screen and (max-width: 600px) {
/* Your styles for small screens here */
}
/* Medium screens (tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
/* Your styles for medium screens here */
}
/* Large screens (desktops) */
@media only screen and (min-width: 1025px) {
/* Your styles for large screens here */
}3. Responsive Images: Ensure images adapt to different screen sizes by setting a maximum width and auto-adjusting height.
img {
max-width: 100%;
height: auto;
}4. Flexbox for Layout: Utilize flexbox properties for creating flexible and efficient layouts.
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1; /* Adjust as needed */
min-width: 0; /* Fixes overflow issues in some cases */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}5. Responsive Typography: Adjust font sizes based on screen dimensions for optimal readability on different devices.
body {
font-size: 16px;
}
/* Adjust font size for smaller screens */
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
}6. Hide/Show Elements: Control the visibility of elements on different screen sizes using CSS display properties.
/* Hide element on small screens */
.element-to-hide {
display: none;
}
/* Show element on small screens and hide on larger screens */
.element-to-show {
display: block;
}
@media only screen and (min-width: 601px) {
.element-to-hide {
display: block;
}
.element-to-show {
display: none;
}
}7. Grid Layout: Employ grid layout techniques for creating sophisticated and responsive multi-column designs.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}8. Box Sizing: Adjust the box model to include padding and border in the total width and height of an element.
/* Apply box-sizing to all elements on the page */
* {
box-sizing: border-box;
}
/* Style for a container with padding and border */
.container {
width: 50%;
padding: 20px;
border: 2px solid #333;
margin: 20px auto;
}
/* Style for an element inside the container */
.box {
width: 100%;
height: 100px;
background-color: #f0f0f0;
/* The total width of this box will include padding and border */
}9. Fluid Containers: Design containers with percentage-based widths for fluid layouts that adapt to different screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Create a wrapper with a maximum width for the page content */
.wrapper {
max-width: 1200px; /* Adjust as needed */
margin: 0 auto; /* Center the content horizontally */
padding: 20px; /* Add some padding for better readability */
}
/* Create a fluid container */
.fluid-container {
width: 100%; /* Occupy the full width of its parent */
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box; /* Include padding and border in the total width */
margin-bottom: 20px; /* Add some margin for spacing between containers */
}
</style>
<title>Fluid Containers Example</title>
</head>
<body>
<!-- Wrapper for page content -->
<div class="wrapper">
<!-- Fluid container 1 -->
<div class="fluid-container">
<h2>Fluid Container 1</h2>
<p>This container adjusts its width to the size of its parent.</p>
</div>
<!-- Fluid container 2 -->
<div class="fluid-container">
<h2>Fluid Container 2</h2>
<p>Another fluid container with different content.</p>
</div>
</div>
</body>
</html>10. Color and Background: Set colors and backgrounds using hexadecimal, RGB, or HSL values for aesthetic appeal.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4; /* Set a background color for the entire page */
color: #333; /* Set the text color */
margin: 0;
}
/* Header styling */
header {
background-color: #2c3e50; /* Set a background color for the header */
color: #ecf0f1; /* Set the text color for the header */
padding: 10px;
text-align: center;
}
/* Main content styling */
.main-content {
padding: 20px;
}
/* Paragraph styling */
p {
color: #555; /* Set a different text color for paragraphs */
}
/* Link styling */
a {
color: #3498db; /* Set a text color for links */
text-decoration: none; /* Remove underline from links */
}
/* Hover effect for links */
a:hover {
color: #2980b9; /* Change text color on hover */
}
/* Button styling */
.action-button {
background-color: #e74c3c; /* Set a background color for the button */
color: #fff; /* Set the text color for the button */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
/* Hover effect for buttons */
.action-button:hover {
background-color: #c0392b; /* Change background color on hover */
}11. Transition and Animation: Implement smooth transitions and animations to enhance user experience.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
}
/* Button styling with transition */
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease; /* Smooth transition for background color */
}
/* Hover effect for buttons */
.button:hover {
background-color: #2980b9;
}
/* Animation styling */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Animated box */
.animated-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
margin-top: 20px;
animation: slideIn 1s ease; /* Use the 'slideIn' animation with 1s duration and ease timing function */
}12. Positioning: Use positioning properties (absolute, relative, fixed) for precise element placement.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
}
/* Header styling */
header {
background-color: #2c3e50;
color: #ecf0f1;
padding: 10px;
text-align: center;
}
/* Navigation styling */
nav {
background-color: #3498db;
color: #fff;
padding: 10px;
text-align: center;
}
/* Main content container */
.main-content {
padding: 20px;
}
/* Example of absolute positioning */
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #e74c3c;
color: #fff;
padding: 10px;
}
/* Example of relative positioning */
.relative-container {
position: relative;
height: 200px;
background-color: #2ecc71;
}
.relative-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #fff;
color: #333;
text-align: center;
line-height: 100px;
}
/* Example of fixed positioning */
.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
}13. Selectors: Understand and utilize CSS selectors to target specific HTML elements for styling.
/* Universal Selector */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Type Selector */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
/* Class Selector */
.header {
background-color: #2c3e50;
color: #ecf0f1;
padding: 10px;
text-align: center;
}
/* ID Selector */
#main-heading {
font-size: 24px;
}
/* Descendant Selector */
nav ul {
list-style: none;
background-color: #3498db;
padding: 10px;
text-align: center;
}
/* Child Selector */
nav > ul > li {
display: inline-block;
margin: 0 10px;
}
/* Attribute Selector */
a[href^="https://"] {
color: #27ae60;
}
/* Pseudo-class Selector */
a:hover {
text-decoration: underline;
}
/* Grouping Selector */
h1, h2, h3 {
margin-bottom: 10px;
}
/* First Child Pseudo-class */
.main-content p:first-child {
font-weight: bold;
}
/* Last Child Pseudo-class */
.main-content p:last-child {
color: #e74c3c;
}14. Overflow: Manage content overflow within containers using overflow properties.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
}
/* Container with hidden overflow */
.overflow-hidden {
width: 300px;
height: 200px;
overflow: hidden; /* Hide content that overflows the container */
border: 1px solid #3498db;
margin: 20px;
}
/* Container with scrollable overflow */
.overflow-scroll {
width: 300px;
height: 200px;
overflow: scroll; /* Add a scrollbar to access hidden content */
border: 1px solid #e74c3c;
margin: 20px;
}
/* Container with auto overflow */
.overflow-auto {
width: 300px;
height: 200px;
overflow: auto; /* Automatically add a scrollbar when needed */
border: 1px solid #2ecc71;
margin: 20px;
}
/* Container with visible overflow */
.overflow-visible {
width: 300px;
height: 200px;
overflow: visible; /* Content will overflow the container */
border: 1px solid #f39c12;
margin: 20px;
}15. Pseudo-classes and Pseudo-elements: Apply styles to elements based on user interaction or document structure.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
}
/* Pseudo-class :hover */
a:hover {
color: #3498db;
text-decoration: underline;
}
/* Pseudo-class :active */
.button:active {
background-color: #e74c3c;
color: #fff;
}
/* Pseudo-class :focus */
.input:focus {
border: 2px solid #2ecc71;
}
/* Pseudo-class :first-child */
ul li:first-child {
font-weight: bold;
}
/* Pseudo-class :last-child */
ul li:last-child {
color: #e74c3c;
}
/* Pseudo-class :nth-child */
.striped-list li:nth-child(odd) {
background-color: #ecf0f1;
}
/* Pseudo-element ::before */
.header::before {
content: "\2022"; /* Unicode character for a bullet point */
color: #3498db;
margin-right: 5px;
}
/* Pseudo-element ::after */
.header::after {
content: "\2022";
color: #3498db;
margin-left: 5px;
}
/* Pseudo-element ::first-line */
.first-line::first-line {
font-weight: bold;
}
/* Pseudo-element ::first-letter */
.first-letter::first-letter {
font-size: 24px;
color: #e74c3c;
}16. Transforms: Apply 2D or 3D transformations to elements for creative and interactive designs.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
}
/* Scale Transformation */
.scale-box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: scale(1.5); /* Increase size by 50% */
margin: 20px;
}
/* Rotate Transformation */
.rotate-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg); /* Rotate by 45 degrees */
margin: 20px;
}
/* Translate Transformation */
.translate-box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(20px, 40px); /* Move 20px right and 40px down */
margin: 20px;
}
/* Skew Transformation */
.skew-box {
width: 100px;
height: 100px;
background-color: #f39c12;
transform: skew(30deg, 20deg); /* Skew horizontally by 30 degrees and vertically by 20 degrees */
margin: 20px;
}
/* Combined Transformations */
.combined-box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(30deg) scale(1.2) translate(30px, 10px); /* Rotate, scale, and translate */
margin: 20px;
}17. Box Shadow and Border Radius: Add depth and rounded corners to elements for a modern and visually appealing UI.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
}
/* Box Shadow */
.shadow-box {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Horizontal offset, vertical offset, blur radius, color */
margin: 20px;
}
/* Inset Box Shadow */
.inset-shadow-box {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3); /* Inset shadow */
margin: 20px;
}
/* Border Radius */
.rounded-box {
width: 200px;
height: 200px;
background-color: #2ecc71;
border-radius: 10px; /* Border radius */
margin: 20px;
}
/* Border Radius for Individual Corners */
.rounded-corners {
width: 200px;
height: 200px;
background-color: #f39c12;
border-top-left-radius: 30px;
border-bottom-right-radius: 20px;
margin: 20px;
}
/* Circle with Border Radius */
.circle {
width: 200px;
height: 200px;
background-color: #9b59b6;
border-radius: 50%; /* Border radius of 50% for a perfect circle */
margin: 20px;
}
Closing
A CSS cheat sheet is a valuable resource for both beginners and experienced developers, providing a quick reference for common styling tasks and best practices. Regular updates and exploration of new CSS features will ensure you stay up-to-date with the evolving landscape of web design. Happy coding!
Automation Branding Collaboration Competitors Connect Content Type CSS Dates Design Flows Hillbilly Tabs Issues Javascript Limitation Limitations Luxon Microsoft Teams ModernScriptEditor NodeJs O365 Office 365 OneDrive Out Of The Box PnP Power Automate PowerShell Pwermissions Rest Endpoint ScriptEditor Send an HTTP Request to SharePoint SharePoint SharePoint Architecture SharePoint Designs SharePoint Modern SharePoint Online SharePoint Tabs ShellScript SPFX SPO Sync Teams Teams App TypeScript Versioning Workflows