DEV Community

TenE
TenE

Posted on

CSS Cheat Sheet: Everything You Need to Know in One Place

#webdev #css

Basic Selectors: 

*               /* Universal selector */
element         /* Selects all elements of a type */
.class          /* Selects elements by class */
#id             /* Selects elements by ID */
element, element /* Grouping selectors */
Enter fullscreen mode Exit fullscreen mode

Box Model: 

element {
    margin: 10px;          /* Space outside the element */
    padding: 10px;         /* Space inside the element */
    border: 1px solid #000; /* Border around the element */
    width: 100px;          /* Element width */
    height: 100px;         /* Element height */
    box-sizing: border-box; /* Includes padding/border in width and height */
}
Enter fullscreen mode Exit fullscreen mode

Text Styling: 

element {
    font-family: Arial, sans-serif;   /* Font family */
    font-size: 16px;                  /* Font size */
    font-weight: bold;                /* Font weight (bold, normal) */
    font-style: italic;               /* Italic text */
    text-align: center;               /* Aligns text (left, right, center) */
    color: #333;                      /* Text color */
    line-height: 1.5;                 /* Line spacing */
    text-transform: uppercase;        /* Text case (uppercase, lowercase) */
    text-decoration: underline;       /* Underline text */
}
Enter fullscreen mode Exit fullscreen mode

Backgrounds: 

element {
    background-color: #f0f0f0;  /* Background color */
    background-image: url('image.jpg'); /* Background image */
    background-size: cover;     /* Adjust background image size */
    background-position: center; /* Position the background image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}
Enter fullscreen mode Exit fullscreen mode

Flexbox: 

.container {
    display: flex;                    /* Set flex container */
    justify-content: center;          /* Horizontal alignment (start, center, space-between) */
    align-items: center;              /* Vertical alignment (stretch, center, flex-start) */
    flex-direction: row;              /* Direction (row, column) */
    flex-wrap: wrap;                  /* Wrap items to next line */
}

.item {
    flex: 1;                          /* Flex-grow (flex-shrink, flex-basis) */
    align-self: flex-start;           /* Align single item (flex-start, center) */
}
Enter fullscreen mode Exit fullscreen mode

Grid Layout: 

.container {
    display: grid;                    /* Set grid container */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto;         /* Set row heights */
    gap: 10px;                        /* Space between grid items */
    grid-column: 1 / 3;               /* Span item across columns */
    grid-row: 1 / 2;                  /* Span item across rows */
}

.item {
    grid-area: header;                /* Name grid areas */
}
Enter fullscreen mode Exit fullscreen mode

Positioning: 

element {
    position: relative;               /* (relative, absolute, fixed, sticky) */
    top: 10px;                        /* Offset from top */
    left: 20px;                       /* Offset from left */
    z-index: 10;                      /* Layering of elements */
}
Enter fullscreen mode Exit fullscreen mode

Transitions & Animations: 

element {
    transition: all 0.3s ease-in-out; /* Transition effects */
}

@keyframes example {
    from { opacity: 0; }
    to { opacity: 1; }
}

element {
    animation: example 2s infinite;    /* Apply animation */
}
Enter fullscreen mode Exit fullscreen mode

Media Queries (Responsive Design): 

@media (max-width: 768px) {
    element {
        font-size: 14px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Miscellaneous: 

element {
    opacity: 0.5;                     /* Set transparency */
    visibility: hidden;               /* Hide element but keep space */
    display: none;                    /* Completely hide element */
    overflow: hidden;                 /* Handle overflow content */
    cursor: pointer;                  /* Mouse cursor styles */
    border-radius: 10px;              /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Element shadow */
}
Enter fullscreen mode Exit fullscreen mode

Advanced Selectors: 

element:first-child         /* Selects the first child */
element:last-child          /* Selects the last child */
element:nth-child(2)        /* Selects the 2nd child */
element:hover               /* Selects on hover */
element::before             /* Insert content before element */
element::after              /* Insert content after element */
element[attribute="value"]  /* Attribute selector */
element:not(selector)       /* Excludes elements matching selector */
Enter fullscreen mode Exit fullscreen mode

Pseudo-elements: 

element::before {
    content: '';                     /* Inserts content before an element */
    display: block;                  /* Ensures it behaves like a block */
}

element::after {
    content: '';                     /* Inserts content after an element */
    display: block;                  /* Ensures it behaves like a block */
}
Enter fullscreen mode Exit fullscreen mode

Transformations: 

element {
    transform: rotate(45deg);        /* Rotates the element */
    transform: scale(1.5);           /* Scales the element */
    transform: translateX(50px);     /* Moves element horizontally */
    transform: skew(20deg);          /* Skews the element */
}
Enter fullscreen mode Exit fullscreen mode

CSS Variables (Custom Properties): 

:root {
    --primary-color: #3498db;        /* Define a custom variable */
    --font-size: 16px;
}

element {
    color: var(--primary-color);     /* Use the custom variable */
    font-size: var(--font-size);
}
Enter fullscreen mode Exit fullscreen mode

Clipping & Masking: 

element {
    clip-path: circle(50%);          /* Creates a circular clipping area */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Creates a polygonal clipping area */
}

element {
    mask-image: url('mask.png');     /* Masking with an image */
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid Advanced Layout: 

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";      /* Define named grid areas */
    grid-template-columns: 1fr 2fr;  /* Two columns, 1:2 ratio */
}

.header {
    grid-area: header;               /* Assign grid area to element */
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}
Enter fullscreen mode Exit fullscreen mode

CSS Functions: 

element {
    background: linear-gradient(to right, #3498db, #9b59b6); /* Gradient background */
    background: radial-gradient(circle, #ff7675, #d63031);   /* Radial gradient */
}

element {
    filter: blur(5px);               /* Apply a blur effect */
    filter: brightness(1.2);         /* Increase brightness */
    filter: grayscale(50%);          /* Apply grayscale effect */
}
Enter fullscreen mode Exit fullscreen mode

CSS Flexbox Advanced Concepts: 

.container {
    display: flex;
    justify-content: space-between;   /* Space between items */
    align-items: flex-start;          /* Align items to start */
    flex-direction: column-reverse;   /* Reverse column direction */
    flex-grow: 1;                     /* Element grows to fill space */
}
Enter fullscreen mode Exit fullscreen mode

CSS Responsive Design (Viewport Units): 

element {
    width: 100vw;                    /* Full viewport width */
    height: 100vh;                   /* Full viewport height */
    font-size: 2vw;                  /* Font size based on viewport width */
}

@media (orientation: landscape) {    /* Apply rules for landscape mode */
    element {
        background-color: #333;
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS Scroll Snap (for Carousels): 

.container {
    scroll-snap-type: x mandatory;   /* Snaps items horizontally */
    overflow-x: scroll;              /* Enable horizontal scrolling */
}

.item {
    scroll-snap-align: start;        /* Snap items to start of container */
}
Enter fullscreen mode Exit fullscreen mode

CSS Transitions (with Timing Functions): 

element {
    transition: background-color 0.5s ease-in-out;  /* Smooth transitions */
}

element:hover {
    background-color: #f39c12;       /* Transition effect on hover */
}
Enter fullscreen mode Exit fullscreen mode

CSS Animations (Keyframes): 

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

element {
    animation: fadeIn 2s ease-in-out infinite; /* Repeated animation */
}
Enter fullscreen mode Exit fullscreen mode

Z-index and Stacking Context: 

element {
    position: relative;              /* Positioning must be set */
    z-index: 10;                     /* Higher z-index means in front */
}
Enter fullscreen mode Exit fullscreen mode

Media Queries for Specific Devices: 

@media (min-width: 768px) {
    element {
        display: block;              /* Layout for tablets and up */
    }
}

@media (min-width: 1024px) {
    element {
        display: flex;               /* Layout for larger screens */
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid and Flexbox Combined: 

.container {
    display: grid;                   /* Main container is a grid */
    grid-template-columns: 1fr 1fr;
}

.item {
    display: flex;                   /* Each item uses flexbox */
    justify-content: center;         /* Align contents within items */
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid: Implicit and Explicit Grids: 

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Explicitly define 3 columns */
    grid-auto-rows: minmax(100px, auto);    /* Implicit rows generated as needed */
}
Enter fullscreen mode Exit fullscreen mode

CSS Custom Media Queries:

Custom media queries allow you to simplify your CSS when you need to use similar breakpoints across different rules.

@custom-media --small-viewport (max-width: 600px);

@media (--small-viewport) {
    element {
        font-size: 14px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Object Fit and Object Position (Images, Videos):

Control how media like images and videos are displayed within their containers.

img {
    object-fit: cover;           /* Crop to fit container while preserving aspect ratio */
    object-position: center;     /* Center the image within its container */
}
Enter fullscreen mode Exit fullscreen mode

Scroll Behavior (Smooth Scrolling): 

html {
    scroll-behavior: smooth;     /* Enables smooth scrolling for anchor links */
}
Enter fullscreen mode Exit fullscreen mode

Blend Modes (Colors and Images): 

element {
    background-blend-mode: multiply;   /* Blend background color/image with a multiplier effect */
    mix-blend-mode: screen;            /* Blend the element with the background */
}
Enter fullscreen mode Exit fullscreen mode

CSS Shape Outlines for Text Flow: 

element {
    shape-outside: circle(50%);   /* Flow text around a circular shape */
    float: left;                  /* Allows text to wrap around */
    width: 200px;
    height: 200px;
}
Enter fullscreen mode Exit fullscreen mode

CSS Counters:

Useful for creating numbered lists or automatic numbering in sections.

body {
    counter-reset: section;          /* Reset counter at the start */
}

h2::before {
    counter-increment: section;      /* Increment section number */
    content: "Section " counter(section) ": "; /* Insert counter value */
}
Enter fullscreen mode Exit fullscreen mode

CSS Clip (Polygon Clipping): 

element {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Create custom shapes with clipping */
}
Enter fullscreen mode Exit fullscreen mode

Viewport Height/Width Units (Dynamic Resizing): 

element {
    height: 100vh;        /* Element is 100% of the viewport height */
    width: 100vw;         /* Element is 100% of the viewport width */
}
Enter fullscreen mode Exit fullscreen mode

Isolation for Layers:

This property is useful when you want to create isolated stacking contexts to avoid z-index conflicts.

element {
    isolation: isolate;   /* Isolates the element’s z-index from its siblings */
}
Enter fullscreen mode Exit fullscreen mode

CSS Filters (Visual Effects): 

element {
    filter: grayscale(100%);  /* Makes the element grayscale */
    filter: blur(5px);        /* Blurs the element */
    filter: contrast(200%);   /* Adjusts contrast */
}
Enter fullscreen mode Exit fullscreen mode

Aspect Ratio Control: 

element {
    aspect-ratio: 16 / 9;     /* Ensure the element maintains a 16:9 aspect ratio */
}
Enter fullscreen mode Exit fullscreen mode

CSS Variables with JavaScript:

You can dynamically update CSS variables using JavaScript for more interactive effects.

:root {
    --main-color: #3498db;
}

element {
    background-color: var(--main-color);
}

/* In JavaScript */
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Enter fullscreen mode Exit fullscreen mode

CSS Grid: Auto-fill and Auto-fit: 

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Fill the space with items */
}
Enter fullscreen mode Exit fullscreen mode

Responsive Typography with clamp(): 

element {
    font-size: clamp(1rem, 2vw + 1rem, 2.5rem);  /* Dynamically adjusts font size based on viewport width */
}
Enter fullscreen mode Exit fullscreen mode

CSS Logical Properties (for Layout Direction Independence):

Logical properties like margin-inline-start are useful when dealing with internationalization (LTR vs RTL layouts).

element {
    margin-inline-start: 20px;  /* Replaces 'margin-left' but adjusts for RTL layouts */
    padding-block-end: 10px;    /* Replaces 'padding-bottom' */
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid Masonry Layout:

Although there’s no direct CSS masonry, grid items can create similar layouts by spanning rows and columns.

.grid-item {
    grid-row: span 2;          /* Make grid item span multiple rows */
    grid-column: span 1;
}
Enter fullscreen mode Exit fullscreen mode

Backface Visibility (for 3D Rotations): 

element {
    backface-visibility: hidden; /* Hide element when it's rotated away from the viewer */
    transform: rotateY(180deg);   /* Rotate the element */
}
Enter fullscreen mode Exit fullscreen mode

CSS Snap Points for Scrollable Carousels: 

.container {
    scroll-snap-type: x mandatory; /* Enables scroll snapping */
    scroll-padding: 10px;          /* Adds padding to snapping */
}
Enter fullscreen mode Exit fullscreen mode

CSS Parent Selectors (upcoming feature in :has()):

This is a future feature but worth noting for its power.

element:has(> img) {
    border: 2px solid red;         /* Styles parent if it contains an image */
}
Enter fullscreen mode Exit fullscreen mode

CSS Variables (Dynamic Theming):

CSS variables allow for easy theme switching. You can define light and dark themes and switch between them using JavaScript or media queries.

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

[data-theme="dark"] {
    --bg-color: #333333;
    --text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
Enter fullscreen mode Exit fullscreen mode

Dark Mode with Media Queries:

You can automatically apply a dark theme based on the user's system preferences.

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }
}
Enter fullscreen mode Exit fullscreen mode

Custom Scrollbars:

You can style scrollbars to match your website's design.

/* WebKit browsers */
::-webkit-scrollbar {
    width: 12px;                /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;  /* Track background */
}
::-webkit-scrollbar-thumb {
    background-color: #888;     /* Handle color */
    border-radius: 6px;         /* Handle rounded corners */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;     /* Handle hover state */
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid Fractional Units (fr):

Fractions (fr) make grid layouts flexible and adaptive.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;   /* First column takes 1 part, second takes 2 parts */
}
Enter fullscreen mode Exit fullscreen mode

Scroll-Snapping for Smooth Scrolling:

Scroll-snapping can be useful for image carousels, sliders, or specific layouts.

.container {
    scroll-snap-type: y mandatory;     /* Snap items vertically */
    overflow-y: scroll;                /* Enable scrolling */
}
.item {
    scroll-snap-align: start;          /* Snap each item to the top */
}
Enter fullscreen mode Exit fullscreen mode

Object-fit and Aspect-ratio (Image/Media Control):

Control the behavior of images and videos within their containers.

img {
    object-fit: cover;     /* Ensures the image covers the container */
    object-position: center;  /* Center the image */
}
Enter fullscreen mode Exit fullscreen mode

CSS Cascade Layers:

Cascade layers let you manage specificity and layer importance.

@layer base {
    h1 {
        color: blue;       /* Base layer */
    }
}

@layer theme {
    h1 {
        color: red;        /* Theme layer overrides base */
    }
}
Enter fullscreen mode Exit fullscreen mode

Media Queries for Print Styles:

When creating print styles, you can optimize your website for paper output.

@media print {
    body {
        color: black;
        background: white;
    }

    .no-print {
        display: none;      /* Hide elements when printing */
    }
}
Enter fullscreen mode Exit fullscreen mode

Content Visibility (for Performance):

content-visibility can boost performance by skipping rendering of off-screen elements.

element {
    content-visibility: auto;  /* Renders only when element is visible */
}
Enter fullscreen mode Exit fullscreen mode

CSS @supports (Feature Queries):

Check if the browser supports a specific CSS feature and apply styles accordingly.

@supports (display: grid) {
    .container {
        display: grid;       /* Use grid layout if supported */
    }
}

@supports not (display: grid) {
    .container {
        display: block;      /* Fallback for older browsers */
    }
}
Enter fullscreen mode Exit fullscreen mode

Layered Box Shadows (for Depth):

Layered shadows can add depth and realism.

element {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
Enter fullscreen mode Exit fullscreen mode

CSS Perspective for 3D Effects:

You can apply 3D perspective to elements for cool visual effects.

.container {
    perspective: 1000px;   /* Controls the level of 3D perspective */
}
.element {
    transform: rotateY(45deg);   /* Rotate element in 3D */
}
Enter fullscreen mode Exit fullscreen mode

CSS Conic Gradients (Pie Chart-like Effects):

Conic gradients create circular gradient effects.

element {
    background: conic-gradient(red, yellow, green);
}
Enter fullscreen mode Exit fullscreen mode

CSS Multicolumn Layout:

Split text into multiple columns, useful for text-heavy content like articles.

.element {
    column-count: 3;           /* Split content into 3 columns */
    column-gap: 20px;          /* Gap between columns */
}
Enter fullscreen mode Exit fullscreen mode

CSS clamp() for Dynamic Sizing:

Use clamp() to define a value that adapts between a minimum and maximum, based on available space.

.element {
    font-size: clamp(1rem, 2vw + 1rem, 2.5rem); /* Flexible font-size */
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid Template Rows/Columns with Auto:

Grid layouts can automatically adjust row/column sizes based on content.

.container {
    display: grid;
    grid-template-columns: auto 1fr 1fr;   /* First column adjusts to content */
}
Enter fullscreen mode Exit fullscreen mode

CSS Overscroll Behavior:

Control how your content behaves when scrolled to the boundaries.

.element {
    overscroll-behavior: contain;  /* Prevents scrolling past the boundaries */
}
Enter fullscreen mode Exit fullscreen mode

CSS Aspect-ratio for Responsive Elements:

The aspect-ratio property allows elements like images, videos, or divs to maintain a specific ratio.

element {
    aspect-ratio: 16 / 9;    /* Maintain a 16:9 aspect ratio */
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid: Subgrid for Complex Layouts:

Subgrid allows child elements to inherit their parent grid's sizing.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.child {
    display: subgrid;
    grid-column: span 2;    /* Span two columns in the subgrid */
}
Enter fullscreen mode Exit fullscreen mode

CSS Houdini (Paint API):

Houdini lets you extend CSS, creating custom styling capabilities through JavaScript. Example: creating custom properties using Houdini's API.

CSS.registerProperty({
    name: '--custom-property',
    syntax: '<length>',
    inherits: false,
    initialValue: '0px',
});
Enter fullscreen mode Exit fullscreen mode

Custom Property Animation:

Animate CSS variables for more dynamic styling.

:root {
    --translate: 0px;
}

.element {
    transform: translateX(var(--translate));
    transition: transform 0.5s ease;
}

.element:hover {
    --translate: 50px;     /* Animates variable value */
}
Enter fullscreen mode Exit fullscreen mode

Pointer Events for User Interactions:

Control whether elements respond to user input.

.element {
    pointer-events: none;   /* Disables user interaction */
}
Enter fullscreen mode Exit fullscreen mode

CSS Parallax Scrolling (with Transform):

You can create a simple parallax effect by moving elements at different speeds as the user scrolls.

.parallax {
    transform: translateZ(-2px) scale(1.5);  /* Moves background slower than foreground */
}
Enter fullscreen mode Exit fullscreen mode

CSS Cascade Layers (Layered Styling):

Manage specificity by creating layers in your styles.

@layer base {
    h1 {
        color: blue;
    }
}

@layer utilities {
    h1 {
        color: red;    /* Red overrides blue from base */
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS Scrollbar Styling (for WebKit Browsers): 

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background: #888;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
Enter fullscreen mode Exit fullscreen mode

CSS Position Sticky for Sticky Headers: 

header {
    position: sticky;
    top: 0;         /* Sticks to the top of the viewport */
    background: white;
    z-index: 10;    /* Ensure it stays above other content */
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid Auto-flow Dense:

The grid-auto-flow: dense; property can fill in gaps in a grid layout by moving elements out of order.

.container {
    display: grid;
    grid-auto-flow: dense;  /* Fills gaps in the grid */
}
Enter fullscreen mode Exit fullscreen mode

Advanced Selectors:

  1. Attribute Selectors: Style elements based on attributes.

    input[type="text"] {
    border: 2px solid blue;
}

  2. Sibling Selectors: Style elements based on their sibling relationships.

    h1 + p {
    margin-top: -10px;  /* Styles the first paragraph after an h1 */
}

  3. Nth-child and Nth-of-type: Target specific child elements.

    li:nth-child(2) {
    color: red;  /* Styles the second list item */
}
li:nth-of-type(2n) {
    background: lightgray;  /* Styles even list items */
}

Transitions and Animations:

  1. Basic Transitions:

    .button {
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: green;
}

  2. Keyframe Animations:

    @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in {
    animation: fadeIn 1s forwards;  /* Runs the fadeIn animation */
}

Flexbox Properties:

  1. Aligning Items:

    .flex-container {
    display: flex;
    justify-content: space-between;  /* Distributes space between items */
    align-items: center;              /* Centers items vertically */
}

  2. Wrap Items:

    .flex-container {
    flex-wrap: wrap;  /* Allows items to wrap onto the next line */
}

CSS Grid Advanced Techniques:

  1. Named Grid Areas:

    .container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}

header {
    grid-area: header;
}

  2. Grid Auto Rows/Columns:

    .container {
    display: grid;
    grid-template-rows: auto 1fr;  /* Auto height for first row */
    grid-auto-columns: minmax(100px, 1fr);  /* Responsive columns */
}

Box Model Properties:

  1. Box-Sizing:

    * {
    box-sizing: border-box;  /* Includes padding and border in element's total width/height */
}

CSS Filters for Visual Effects: 

img {
    filter: grayscale(100%);  /* Makes the image grayscale */
}
Enter fullscreen mode Exit fullscreen mode

CSS Blend Modes:

Blend modes allow for creative visual effects when layering elements.

.overlay {
    background: rgba(255, 0, 0, 0.5);
    mix-blend-mode: multiply;  /* Blends the overlay with the background */
}
Enter fullscreen mode Exit fullscreen mode

Custom Fonts with @font-face:

You can use custom fonts on your website.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2');
}
body {
    font-family: 'MyCustomFont', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Grid Gaps for Spacing:

Using gaps in CSS Grid layouts simplifies spacing.

.container {
    display: grid;
    gap: 20px;  /* Sets a 20px gap between grid items */
}
Enter fullscreen mode Exit fullscreen mode

Styling Form Elements:

Customizing form controls for a better user experience.

input[type="text"],
input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Advanced Responsive Techniques:

  1. Viewport Units:

    h1 {
    font-size: 5vw;  /* Font size relative to viewport width */
}

  2. Media Queries for Different Devices:

    @media (max-width: 768px) {
    .container {
        flex-direction: column;  /* Stack items on small screens */
    }
}

CSS Custom Properties with JS Interaction:

Dynamically change CSS properties using JavaScript.

document.documentElement.style.setProperty('--main-color', 'blue');
Enter fullscreen mode Exit fullscreen mode

Using Clip Paths for Unique Shapes:

Create non-rectangular shapes using clip-path.

.shape {
    clip-path: circle(50%);
}
Enter fullscreen mode Exit fullscreen mode

CSS Houdini (Advanced Customization):

Houdini APIs allow you to create custom styles beyond the current CSS capabilities.

CSS.paintWorklet.addModule('myPaintWorklet.js');
Enter fullscreen mode Exit fullscreen mode

CSS Multi-Column Layouts for Text:

Create newspaper-like layouts.

.column {
    column-count: 3;        /* Number of columns */
    column-gap: 20px;       /* Gap between columns */
}
Enter fullscreen mode Exit fullscreen mode

CSS Conditional Rules:

Use conditional rules with the @supports directive.

@supports (display: grid) {
    .container {
        display: grid;
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS Print Styles:

Style your website differently for printing.

@media print {
    body {
        background: white;
        color: black;
    }
}
Enter fullscreen mode Exit fullscreen mode

Setting Up a Responsive Navigation Bar: 

.navbar {
    display: flex;
    flex-direction: column;
    background-color: #333;
}

.navbar a {
    padding: 14px 20px;
    text-decoration: none;
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

Flexbox for Centering: 

.center {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 100vh;          /* Full viewport height */
}
Enter fullscreen mode Exit fullscreen mode

SVG Manipulation:

Style SVG images directly with CSS for animations and effects.

svg {
    width: 100px;
    height: 100px;
    fill: red;  /* Change SVG fill color */
}
Enter fullscreen mode Exit fullscreen mode

The content Property:

You can use the content property to insert text with pseudo-elements.

h1::before {
    content: "Welcome! ";
}
Enter fullscreen mode Exit fullscreen mode

Text Overflow and Ellipsis:

Manage text overflow with ellipsis.

.text {
    white-space: nowrap; /* Prevents text wrapping */
    overflow: hidden;    /* Hides overflow */
    text-overflow: ellipsis; /* Shows ellipsis for overflow text */
}
Enter fullscreen mode Exit fullscreen mode

Sticky Positioning:

Create sticky elements that stay visible as you scroll.

.sticky {
    position: sticky;
    top: 0;  /* Sticks to the top */
}
Enter fullscreen mode Exit fullscreen mode

CSS Variables (Custom Properties)

  1. Defining Variables:

    :root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

  2. Using Variables:

    body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

CSS Grid Layout

  1. Creating a Responsive Grid:

    .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;  /* Spacing between grid items */
}

Viewport Units

  1. Using vw, vh, vmin, and vmax:

    h1 {
    font-size: 5vw;  /* Font size relative to the viewport width */
    margin: 10vh;    /* Margin relative to the viewport height */
}

CSS Scroll Snap

  1. Implementing Scroll Snap:

    .scroll-container {
    scroll-snap-type: x mandatory;  /* Enables scroll snap */
    overflow-x: scroll;              /* Enables horizontal scrolling */
}
.scroll-item {
    scroll-snap-align: start;        /* Aligns items to the start */
}

Text Shadow

  1. Adding Text Shadow:

    h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

CSS Shapes

  1. Creating Circles or Ellipses:

    .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;  /* Creates a circle */
    background-color: red;
}

Using calc() for Dynamic Sizes

  1. Combining Units:

    .dynamic {
    width: calc(100% - 20px);  /* Adjusts width dynamically */
}

CSS Counters

  1. Using Counters for Lists:

    ol {
    counter-reset: item;  /* Resets the counter */
}
li {
    counter-increment: item;  /* Increments the counter */
}
li::before {
    content: counters(item, ".") ". ";  /* Displays the counter */
}

Media Queries for Accessibility

  1. Adjusting for Color Contrast:

    @media (prefers-contrast: high) {
    body {
        background-color: white;  /* High contrast background */
        color: black;
    }
}

Using Pseudo-elements for Styling

  1. Styling with ::before and ::after:

    .box {
    position: relative;
}
.box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

SVG Styling and Animation

  1. Styling SVG with CSS:

    svg {
    width: 100px;
    height: 100px;
    fill: currentColor;  /* Fills the SVG with the current text color */
}

  2. Animating SVG:

    @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.rotate {
    animation: rotate 2s linear infinite;  /* Continuous rotation */
}

CSS Logical Properties

  1. Using Logical Properties for Layout:

    .box {
    margin-block-start: 20px;  /* Margin at the start of the block */
    padding-inline: 15px;       /* Padding on the inline sides */
}

Grid Auto Flow

  1. Changing Grid Item Placement:

    .grid-container {
    grid-auto-flow: dense;  /* Fills empty spots in the grid */
}

Creating a CSS Reset or Normalize

  1. Basic CSS Reset:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Cascading Styles and Specificity

  1. Understanding Specificity:
    • Inline styles have the highest specificity.
    • IDs are more specific than classes.
    • Classes are more specific than element selectors.

Using display: contents;

  1. Removing Element’s Box but Keeping its Children:

    .container {
    display: contents;  /* Children remain, but the container box is removed */
}

Custom Scrollbars

  1. Styling Scrollbars (WebKit only):

    ::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: darkgray;  /* Thumb color */
    border-radius: 5px;    /* Round edges */
}

CSS Frameworks and Preprocessors

  1. Using CSS Frameworks (like Bootstrap or Tailwind CSS) to speed up development.
  2. CSS Preprocessors (like SASS or LESS) for variables and nesting.

Performance Optimization Tips

  1. Minify CSS: Reduce file size for faster loading.
  2. Use CDN for Libraries: Leverage Content Delivery Networks for external libraries.

Cross-Browser Compatibility

  1. Using Autoprefixer: Add vendor prefixes for CSS properties automatically.
  2. Testing in Multiple Browsers: Always check designs in different browsers and devices.

CSS Animations and Transitions

  1. CSS Transitions:

    .box {
    transition: background-color 0.3s ease;  /* Smooth background change */
}
.box:hover {
    background-color: #3498db;  /* Change color on hover */
}

  2. Keyframe Animations:

    @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in {
    animation: fadeIn 1s forwards;  /* Animate fade-in effect */
}

CSS Filters

  1. Using Filters for Visual Effects:

    .image {
    filter: grayscale(100%);  /* Grayscale effect */
}

Flexbox Alignment

  1. Centering Items Vertically and Horizontally:

    .flex-container {
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
    height: 100vh;           /* Full viewport height */
}

Responsive Design

  1. Media Queries for Different Devices:

    @media (max-width: 768px) {
    .container {
        flex-direction: column;  /* Stack items vertically on small screens */
    }
}

  2. Fluid Typography:

    h1 {
    font-size: calc(1.5rem + 1vw);  /* Responsive font size */
}

Advanced Selectors

  1. Using Attribute Selectors:

    a[href^="https://"] {
    color: green;  /* Style links starting with https */
}

  2. Pseudo-Classes:

    button:disabled {
    background-color: lightgray;  /* Style for disabled buttons */
}

Creating Responsive Tables

  1. Using CSS for Responsive Tables:

    .table {
    display: block;  /* Make table block-level */
    overflow-x: auto;  /* Enable horizontal scrolling */
}

CSS Grid Template Areas

  1. Defining Layout with Named Areas:

    .grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}

Custom Form Styling

  1. Styling Input Elements:

    input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 5px;  /* Rounded corners */
    padding: 10px;
    transition: border-color 0.3s;
}
input[type="text"]:focus {
    border-color: #3498db;  /* Change border color on focus */
}

CSS Counters

  1. Creating Automatic Numbering for Lists:

    ol {
    counter-reset: item;  /* Reset counter */
}
li {
    counter-increment: item;  /* Increment counter */
}
li::before {
    content: counters(item, ".") ". ";  /* Add counter before each list item */
}

Using CSS Functions

  1. Using clamp() for Responsive Sizes:

    h2 {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);  /* Responsive font size */
}

  2. Using var() with Functions:

    :root {
    --base-font-size: 16px;
}
body {
    font-size: calc(var(--base-font-size) * 1.25);  /* Dynamic font size */
}

Content Visibility and Accessibility

  1. Using visibility vs. display:
    • Use visibility: hidden; to hide elements but maintain space in the layout.
    • Use display: none; to remove elements completely from the layout.

Best Practices for Maintainability

  1. Organizing CSS:
*   Group related styles together (e.g., layout, typography, components).
*   Use comments to separate sections.
Enter fullscreen mode Exit fullscreen mode
  1. BEM Methodology (Block, Element, Modifier):
*   Use BEM naming conventions for better organization.

        .block__element--modifier {
          /* styles */
        }
Enter fullscreen mode Exit fullscreen mode

Cross-Browser Compatibility Tips

  1. Use CSS Reset/Normalize:
*   Start with a CSS reset or normalize stylesheet to minimize cross-browser inconsistencies.
Enter fullscreen mode Exit fullscreen mode
  1. Test Regularly:
*   Always test styles in different browsers and devices to ensure consistency.
Enter fullscreen mode Exit fullscreen mode

Performance Tips

  1. Minimize CSS File Size:
*   Use minification tools to reduce file size and improve loading times.
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Deep Nesting:
*   Limit CSS specificity by avoiding deep selectors to improve performance and maintainability.
Enter fullscreen mode Exit fullscreen mode
  1. Remove Unused CSS:
*   Use tools like PurgeCSS to remove unused styles from your production build.
Enter fullscreen mode Exit fullscreen mode

CSS Best Practices

  1. Keep Styles DRY (Don't Repeat Yourself):
*   Reuse styles through classes instead of duplicating CSS rules.
Enter fullscreen mode Exit fullscreen mode
  1. Utilize Tools:
*   Consider using CSS preprocessors (like SASS or LESS) for features like variables, nesting, and mixins.
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
madhurima_rawat profile image
Madhurima Rawat •

Really awesome resource 📚 Great how you covered almost all css properties given the large number.

Thanks for sharing ✨️

Collapse
 
czmilo profile image
Info Comment hidden by post author - thread only accessible via permalink
cz •

Thanks for your sharing!

I really love using Claude to create cool SVG code, and because of that, I developed (with Cursor's help):SVG Viewer and Converter?

Some comments have been hidden by the post's author - find out more