CSS

CSS Cheat Sheet

Here's a cheat sheet summarizing some of the common CSS properties and syntax:

css

/* CSS Cheat Sheet */

/* Selectors */
element {
    property: value;
}

#id {
    property: value;
}

.class {
    property: value;
}

/* Styling Text */
color: value;             /* Text color */
font-size: value;         /* Font size */
font-family: value;       /* Font family */
font-weight: value;       /* Font weight */
text-align: value;        /* Text alignment */
text-decoration: value;   /* Text decoration */
text-transform: value;    /* Text transformation */

/* Box Model */
width: value;             /* Width of an element */
height: value;            /* Height of an element */
margin: value;            /* Margin around an element */
padding: value;           /* Padding within an element */
border: value;            /* Border around an element */
box-sizing: value;        /* Box sizing model */

/* Layout */
display: value;           /* Display property */
position: value;          /* Positioning */
top: value;               /* Distance from the top */
left: value;              /* Distance from the left */
float: value;             /* Float an element */
clear: value;             /* Clear floating elements */
z-index: value;           /* Stacking order */
overflow: value;          /* Handling overflowing content */

/* Backgrounds */
background-color: value;      /* Background color */
background-image: value;      /* Background image */
background-position: value;   /* Background position */
background-repeat: value;     /* Background repeat */
background-size: value;       /* Background size */

/* Styling Links */
a:link {
    property: value;    /* Unvisited link */
}

a:visited {
    property: value;    /* Visited link */
}

a:hover {
    property: value;    /* Mouse over link */
}

a:active {
    property: value;    /* Active link */
}

/* Responsive Design */
@media screen and (max-width: value) {
    /* CSS rules for specific screen sizes */
}

/* Transitions and Animations */
transition: property duration timing-function delay;      /* Transition effect */
animation: name duration timing-function delay iteration-count direction;   /* Animation */

/* Flexbox */
display: flex;             /* Create a flex container */
flex-direction: value;     /* Direction of flex items */
justify-content: value;    /* Horizontal alignment of flex items */
align-items: value;        /* Vertical alignment of flex items */
flex-wrap: value;          /* Wrap or nowrap flex items */

/* Grid */
display: grid;              /* Create a grid container */
grid-template-columns: value;      /* Define columns in a grid */
grid-template-rows: value;         /* Define rows in a grid */
grid-gap: value;           /* Gap between grid cells */
grid-column-start: value;  /* Starting position of a grid item */
grid-column-end: value;    /* Ending position of a grid item */
grid-row-start: value;     /* Starting position of a grid item */
grid-row-end: value;       /* Ending position of a grid item */

/* Transforms */
transform: value;               /* Apply transformations */
transform-origin: value;        /* Set the origin of transformations */

/* Flexbox and Grid Alignment */
justify-content: value;        /* Horizontal alignment of flex/grid items */
align-items: value;            /* Vertical alignment of flex/grid items */
align-self: value;             /* Alignment of individual flex/grid items */
justify-self: value;           /* Alignment of individual flex/grid items */

/* Pseudo-classes */
selector:pseudo-class {
    property: value;
}

/* Pseudo-elements */
selector::pseudo-element {
    property: value;
}

This cheat sheet covers some of the commonly used CSS properties and syntax for styling elements, text, layouts, backgrounds, links, responsive design, transitions/animations, flexbox, grid, transforms, pseudo-classes, and pseudo-elements. It serves as a handy reference for quick look-ups and reminders while working with CSS.