CSS Konsepter

/* Descendants (all p inside article) */
article p {
    line-height: 1.6;
}

/* Direct children */
article > p {
    margin: 10px;
}

/* Multiple elements */
h1, h2, h3 {
    font-family: Arial;
}

/* Element with class */
p.intro {
    font-size: 18px;
}

/* Hover (mouse over) */
a:hover {
    color: red;
}

/* First child */
li:first-child {
    font-weight: bold;
}

/* Last child */
li:last-child {
    border-bottom: none;
}

/* Every other element */
tr:nth-child(even) {
    background: #f2f2f2;
}

/* Focus (on tab/click) */
input:focus {
    border-color: blue;
}

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}
/* Total width: 200 + 20*2 + 2*2 + 10*2 = 264px */

/* Default: width = content only */
box-sizing: content-box;

/* Recommended: width = content + padding + border */
box-sizing: border-box;

/* Set for entire page */
* {
    box-sizing: border-box;
}

.centered {
    width: 800px;
    margin: 0 auto;  /* auto on left/right */
}

/* Shorthand */
border: 2px solid black;

/* Individual properties */
border-width: 2px;
border-style: solid;
border-color: black;

/* One side */
border-top: 1px dashed gray;
border-bottom: 3px double blue;

border-radius: 10px;           /* All corners */
border-radius: 50%;            /* Circle */
border-radius: 10px 0 10px 0;  /* Individual corners */

/* Color name */
color: red;
color: blue;
color: darkgreen;

/* Hex code */
color: #FF0000;     /* Red */
color: #00F;        /* Short: #0000FF */

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (with transparency) */
color: rgba(255, 0, 0, 0.5);  /* 50% transparent */

/* HSL */
color: hsl(0, 100%, 50%);     /* Red */

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;        /* normal, bold, 100-900 */
    font-style: italic;       /* normal, italic */

    line-height: 1.6;         /* Line height */
    text-align: center;       /* left, right, center, justify */
    text-decoration: underline;  /* none, underline, line-through */
    text-transform: uppercase;   /* lowercase, capitalize */
    letter-spacing: 2px;
}

display: block;        /* Full width, new line */
display: inline;       /* Flows in text, ignores width/height */
display: inline-block; /* Flows, but respects width/height */
display: none;         /* Hidden completely */
display: flex;         /* Flexbox container */
display: grid;         /* Grid container */

position: static;    /* Default (normal flow) */
position: relative;  /* Relative to original position */
position: absolute;  /* Relative to nearest positioned parent */
position: fixed;     /* Relative to viewport (doesn't scroll) */
position: sticky;    /* Hybrid: relative until it "sticks" */

.box {
    position: absolute;
    top: 20px;
    right: 10px;
    /* bottom, left also available */
}

.container {
    display: flex;
    flex-direction: row;        /* row, column, row-reverse */
    justify-content: center;    /* Main axis */
    align-items: center;        /* Cross axis */
    gap: 20px;                  /* Spacing */
    flex-wrap: wrap;            /* Allow wrapping */
}

.item {
    flex: 1;           /* Grow to fill */
}

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 3 columns */
    grid-template-rows: 100px auto;       /* 2 rows */
    gap: 20px;
}

.item {
    grid-column: 1 / 3;     /* Span column 1-2 */
    grid-row: 1 / 2;        /* Row 1 */
}

/* Default (mobile first) */
.box {
    width: 100%;
}

/* Larger screens */
@media (min-width: 768px) {
    .box {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .box {
        width: 33.33%;
    }
}

.button {
    background: blue;
    transition: background 0.3s ease;
}

.button:hover {
    background: darkblue;
}

transform: translateX(20px);     /* Move horizontal */
transform: translateY(-10px);    /* Move vertical */
transform: rotate(45deg);        /* Rotate */
transform: scale(1.2);           /* Enlarge */

/* Combine */
transform: translateX(20px) rotate(45deg) scale(1.1);