🎨

CSS + Bootstrap

Three ways to apply CSS

<!-- 1. Inline -->
<p style="color: red; font-size: 20px;">Hi</p>

<!-- 2. Internal -->
<head>
    <style>
        p { color: red; }
    </style>
</head>

<!-- 3. External (preferred) -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

Selectors

*           { }    /* all elements */
p           { }    /* element selector */
.myClass    { }    /* class selector */
#myId       { }    /* id selector */
a:hover     { }    /* pseudo-class */
div p       { }    /* descendant */
h1, h2, p   { }    /* multiple */

Properties to know

/* Text */
color: red;                    /* or #ff0000, rgb(255,0,0) */
background-color: lightblue;
font-family: Arial, sans-serif;
font-size: 16px;               /* or 2em, 1.5rem */
font-weight: bold;             /* or 100–900 */
text-align: center;
text-decoration: underline;

/* Box model */
width: 50%;
height: 200px;
padding: 10px;                 /* all 4 sides */
padding: 10px 20px;            /* vertical horizontal */
margin: 0 auto;                /* center horizontally */
border: 2px solid black;       /* width style color */
border-radius: 8px;

/* Layout */
display: block | inline | flex | none;
position: static | relative | absolute | fixed;

Box model

┌─────────── margin ───────────┐
│  ┌──────── border ────────┐  │
│  │  ┌───── padding ─────┐ │  │
│  │  │     content       │ │  │
│  │  └───────────────────┘ │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

Specificity

Inline (1000) > ID #x (100) > Class .x / :hover (10) > Element (1)

Bootstrap — include

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap grid (12-column)

<div class="container">
    <div class="row">
        <div class="col-6">half</div>
        <div class="col-6">half</div>
    </div>
    <div class="row">
        <div class="col-md-4">⅓ on md+</div>
        <div class="col-md-4">⅓</div>
        <div class="col-md-4">⅓</div>
    </div>
</div>

Utility classes

Class	Effect
`m-3, p-5`	margin / padding (0–5)
`mt-2 mb-2 ms-2 me-2`	top / bottom / start / end
`text-center`	center text
`text-primary, text-danger`	colors
`bg-primary, bg-light, bg-dark`	backgrounds
`btn btn-primary`	button
`w-100 w-50`	width 100% / 50%
`d-flex justify-content-center align-items-center`	flex layout
`form-control`	styled input
`img-thumbnail, img-fluid`	bordered / responsive image
`card, card-body, card-title`	card