Code Snippets

CSS Snippets

Base Structure

selector {
    property: value;
}

<p style="color: red;">Text</p>

<link rel="stylesheet" href="styles.css">

<style>
    p { color: blue; }
</style>

Selectors

.className {
    color: blue;
}

#myId {
    font-size: 20px;
}

p {
    margin: 10px;
}

* {
    padding: 0;
}

Layout

.container {
    display: flex;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.left {
    float: left;
    width: 50%;
}

.box {
    position: absolute;
    top: 10px;
}

Responsive Design

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.box {
    width: 50vw;
    height: 20vh;
}

.container {
    max-width: 1200px;
    min-width: 300px;
}

Back to categories