CSS cheatsheet

div {
    /* content box */
    box-sizing: content-box; /* default value */
    width: 400px;
    height: 400px;
    
    /* padding box (includes scroll) */
    padding: 20px;
    overflow: scroll;
    
    /* border box */
    border: solid 5px black;

    /* margin box (includes outline and box-shadow) */
    margin: 40px;
    outline: solid;
    box-shadow: 10px 5px 5px red;
}

* { color: black; }
article { color: red; }
.text-gray { color: gray; }
#app { border: solid 2px black; }
[data-user-type='admin'] { background-color: red; }

main article h1 { font-weight: bold; }

h1 { color: yellow; }

h1 { color: blue; }
/* text will be blue */

 /* 0 points */
* { color: red; }

/* 1 point */
div { color: blue; }
::selection { color: blue }

/* 10 points */
.text-gray { color: gray; }
:hover { text-decoration: underline; }
[data-role='admin'] { color: yellow; }

/* 100 points */
#app { border: solid 10px #000; }

/* 10000 points */
.p-5 { padding: 36px !important; }

html {
    color: black;
    font-size: 36px;
}

p {
    background-color: gray;
}

a:hover {
    color: blue;
}

li:first-child {
    margin-top: 20px;
}

h1::before {
    content: '# ';
}

p::selection {
    color: orange;
}

h1 { color: green; }
h2 { color: #00ff00; }
h3 { color: rgb(255, 255, 255); }
h4 { color: rgba(255, 255, 255, 0.2); }
h5 { color: hsl(344, 79%, 40%); }

body { background-color: transparent; }

body { font-size: 20px; }
h1 { font-size: 3.5rem; }

article { width: 50%; }

.viewport {
    width: 100vw;
    height: 100vh;
}

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

p {
    font-family: "Georgia", serif;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
}

body {
    text-transform: capitalize;
    text-decoration: underline;
    text-align: end;
}

.link {
    border: solid 2px #000;
}

.link {
    border-top: solid 22px green;
    border-bottom: solid 2px #000;
    border-right: dashed 12px red;
    border-left: none;
}

.button {
    border-radius: 12px;
}

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

h1 { box-shadow: 10px 5px 5px red; }

p { text-shadow: 1px 1px 2px pink; }

/*
 * use 100% width by default
 * you can set width, height, margin, padding
 */
.tile { display: block; }

/*
 * display as part of the text, auto width
 * you can set width, height, margin, padding
 */
.header { display: inline-block }

/*
 * display as part of the text
 * cannot set width or height
 */
p { display: inline; }

.container {
    display: flex;
    flex-direction: row; /* main axis, default value */
    flex-wrap: nowrap;
    justify-content: center; /* justify content along the main axis */
    align-items: center; /* align items along the cross axis */
    gap: 30px;
}

.item {
    flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 0;
    
    /* flex: 1 0 300px; */
}

.item:first-child {
    order: 3;
}

.item:last-child {
    align-self: end;
}

.container {
    display: grid;
    grid-template-columns: 200px 100px 10%;
    grid-template-rows: 300px auto;
    gap: 32px;
}

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

.yet-another-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

body { background-color: black; }

h1 { background: no-repeat url('bg.png'); }

article { background-image: linear-gradient(red, black); }

.menu { z-index: 1000; }

.modal { z-index: 10000; }

a {
    background-color: red;
    transition: background-color 200ms ease-in-out;
}

a:hover {
    background-color: brown;
}