CodePlayGround · The most popular HTML, CSS, and JS library in the world.

CSS Boiler plate

*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html , body{
            height: 100%;
            width: 100%;
        }

CSS selector (class)

.container {
                width: 100%;
            }

CSS selector (id)

#header {
                background-color: gray;
            }

CSS selector (multiple elements)

h1, h2, h3 {
                font-family: Arial, sans-serif;
            }

CSS selector (descendant)

.container p {
                font-size: 16px;
            }

CSS selector (child)

.container > ul {
                list-style-type: none;
            }

CSS selector (adjacent sibling)

h2 + p {
                margin-top: 10px;
            }

CSS selector (attribute)

input[type="text"] {
                border: 1px solid #ccc;
            }

CSS selector (pseudo-class)

a:hover {
                color: red;
            }

CSS selector (pseudo-element)

p::first-line {
                font-weight: bold;
            }

CSS property (color)

p {
                color: green;
            }

CSS property (background-color)

body {
                background-color: #f0f0f0;
            }

CSS property (font-family)

p {
                font-family: Arial, sans-serif;
            }

CSS property (font-size)

p {
                font-size: 16px;
            }

CSS property (font-weight)

p {
                font-weight: bold;
            }

CSS property (text-align)

p {
                text-align: center;
            }

CSS property (padding)

.container {
                padding: 10px;
            }

CSS property (margin)

p {
                margin: 0;
            }

CSS property (border)

div {
                border: 1px solid #000;
            }

CSS property (width)

.container {
                width: 100%;
            }

CSS property (height)

.container {
                height: 200px;
            }

CSS property (display)

span {
                display: inline-block;
            }

CSS property (position)

.element {
                position: relative;
                top: 10px;
                left: 20px;
            }

CSS property (float)

img {
                float: right;
            }

CSS property (clear)

.clearfix::after {
                content: "";
                display: table;
                clear: both;
            }

CSS property (background-image)

div {
                background-image: url("background.jpg");
            }

CSS property (background-size)

div {
                background-size: cover;
            }

CSS property (opacity)

div {
                opacity: 0.5;
            }

CSS property (box-shadow)

div {
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            }

CSS property (text-decoration)

a {
                text-decoration: none;
            }

CSS property (transition)

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

CSS property (border-radius)

.rounded {
    border-radius: 5px;
}

CSS property (box-sizing)

* {
    box-sizing: border-box;
}

CSS property (text-transform)

.uppercase {
    text-transform: uppercase;
}

CSS property (overflow)

div {
    overflow: hidden;
}

CSS property (z-index)

.overlay {
    position: absolute;
    z-index: 999;
}

CSS property (cursor)

button {
    cursor: pointer;
}

CSS property (pointer-events)

a.disabled {
    pointer-events: none;
}

CSS property (outline)

a:focus {
    outline: 2px solid blue;
}

CSS property (word-wrap)

p {
    word-wrap: break-word;
}

CSS property (text-overflow)

div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

CSS property (white-space)

pre {
    white-space: pre-wrap;
}

CSS property (positioning: absolute)

.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS property (positioning: fixed)

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
}

CSS property (positioning: relative)

.container {
    position: relative;
}

CSS property (positioning: sticky)

.sticky {
    position: sticky;
    top: 0;
}

CSS property (flexbox: container)

.flex-container {
    display: flex;
}

CSS property (flexbox: direction)

.flex-container {
    flex-direction: row;
}

CSS property (flexbox: justify-content)

.flex-container {
    justify-content: center;
}

CSS property (flexbox: align-items)

.flex-container {
    align-items: center;
}

CSS property (flexbox: flex)

.flex-item {
    flex: 1;
}

CSS property (grid: container)

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

CSS property (grid: column gap)

.grid-container {
    grid-column-gap: 10px;
}

CSS property (grid: row gap)

.grid-container {
    grid-row-gap: 10px;
}

CSS property (grid: column span)

.grid-item {
    grid-column: span 2;
}

CSS property (grid: row span)

.grid-item {
    grid-row: span 2;
}

CSS property (grid: column start)

.grid-item {
    grid-column-start: 2;
}

CSS property (grid: column end)

.grid-item {
    grid-column-end: 4;
}

CSS property (grid: row start)

.grid-item {
    grid-row-start: 2;
}

CSS property (grid: row end)

.grid-item {
    grid-row-end: 4;
}

CSS property (grid: area)

.grid-item {
    grid-area: 1 / 1 / 2 / 3;
}

CSS property (transform: translate)

.translate {
    transform: translate(50px, 100px);
}

CSS property (transform: rotate)

.rotate {
    transform: rotate(45deg);
}

CSS property (transform: scale)

.scale {
    transform: scale(1.5);
}

CSS property (transform: skew)

.skew {
    transform: skew(20deg, 10deg);
}

CSS property (transition: property)

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

CSS property (transition: duration)

button {
    transition: background-color 1s;
}

CSS property (transition: timing function)

button {
    transition: background-color 0.3s ease-in-out;
}

CSS property (transition: delay)

button {
    transition: background-color 0.3s ease 1s;
}

CSS property (animation: name)

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    animation-name: example;
}

CSS property (animation: duration)

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    animation-name: example;
    animation-duration: 4s;
}

CSS property (animation: timing function)

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    animation-name: example;
    animation-timing-function: ease-in-out;
}

CSS property (animation: delay)

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    animation-name: example;
    animation-delay: 2s;
}

CSS property (animation: iteration count)

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
div {
    animation-name: example;
    animation-iteration-count: 3;
}

CSS selector (element)

p {
    color: blue;
}

CSS comment

/* This is a CSS comment */