CSS

Method	Where	Use Case
Inline	Inside HTML tags	Quick testing (not recommended long term)
Internal	<style> in head	Small projects
External	Separate .css file	Best practice for real projects

Best habit:
HTML = structure
CSS  = styling
                        

Common example:

/* Reset - applies to all elements */
* {
    margin: 0;               /* remove default spacing */
    padding: 0;              /* remove default spacing */
    box-sizing: border-box;  /* keeps width predictable */
}
                        

This helps by:

• removing unexpected default spacing
• making sizing more consistent
• creating a cleaner starting point

New CSS file starter — copy this to begin:

/* 1. Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Body defaults */
body {
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
}
                        

Format	Example	When to use it
Named	color: red;	Quick testing only — limited options
HEX	color: #3b82f6;	Common in designs and copied from tools like Figma
RGB	color: rgb(59, 130, 246);	When you need to work with red, green, blue values directly
RGBA	color: rgba(59, 130, 246, 0.5);	Same as RGB but with transparency (0 = invisible, 1 = solid)
HSL	color: hsl(210, 75%, 25%);	Best for adjusting colours — easy to make lighter, darker, or more muted
HSLA	color: hsla(210, 75%, 25%, 0.8);	HSL with transparency

HSL breakdown:
hsl( hue, saturation, lightness )

Hue        → 0–360 — the colour on the wheel (0 = red, 120 = green, 240 = blue)
Saturation → 0% = grey, 100% = full colour
Lightness  → 0% = black, 50% = normal, 100% = white

Why HSL is useful:
→ easy to make a colour lighter:  hsl(210, 75%, 40%) → hsl(210, 75%, 60%)
→ easy to make it more muted:     hsl(210, 75%, 25%) → hsl(210, 30%, 25%)
→ no need to guess hex codes
                        

Rule:
Use HEX when copying from design tools
Use HSL when you want to adjust colours yourself
Use RGBA / HSLA when you need transparency
                        

Property	Description	Example
color	Text colour	color: #333;
background-color	Element background colour	background-color: lightblue;
background-image	Image or gradient background	background-image: url("image.jpg");
background-size	Scales background image	background-size: cover;
background-position	Aligns background image	background-position: center;

For most background images use:

background-size: cover;
background-position: center;
background-repeat: no-repeat;
                        

Three things decide which rule wins:

1. Specificity   → more specific selectors beat less specific ones
2. Order         → when specificity is equal, the rule written LAST wins
3. Importance    → !important overrides everything (use sparingly)
                        

Order example:

p { color: red; }
p { color: blue; }

→ text will be BLUE
→ the second rule comes later so it wins
                        

Practical rule:
If a style is not applying and you can't see why,
scroll down your CSS — a later rule may be overriding it.
                        

Concept	What it means
Cascade	Rules flow down — later rules can override earlier ones
Specificity	More targeted selectors win over general ones
Inheritance	Some properties (like font-family) pass down to child elements automatically
!important	Forces a rule to win — overrides cascade and specificity

Selector	Example	Description
Element	p	Targets all elements of that type
Class	.box	Targets elements with a class
ID	#main	Targets a specific element

If CSS does nothing:
1. Check selector
2. Check class name
3. Check spelling
4. Check if another rule wins
                        

+-------------------------+
|       margin            |
|  +-------------------+  |
|  |      border       |  |
|  |  +-------------+  |  |
|  |  |   padding   |  |  |
|  |  | +---------+ |  |  |
|  |  | | content | |  |  |
|  |  | +---------+ |  |  |
|  |  +-------------+  |  |
|  +-------------------+  |
+-------------------------+
                        

The box model is made up of content, padding, border, and margin.

Useful:
box-sizing: border-box;

Default behaviour:
width = content only
Padding and border are added on top of width.

border-box:
width = content + padding + border

Use border-box when you want predictable sizing.
                        

Property	Controls
margin	Space outside the element
padding	Space inside the element
gap	Space between flex/grid items

Padding = inside the box
Margin  = outside the box
Gap     = between layout items
                        

Value	Behaviour
block	Takes full width and starts on a new line
inline	Only takes needed width
inline-block	Inline but allows width/height
none	Removes element from layout
flex	Creates a flex layout container
grid	Creates a grid layout container

Use display to decide:
Does this behave like text?
Or like a layout box?
                        

Common image problems include:

• not filling the available space
• stretching out of proportion
• cropping in the wrong area
• not aligning where expected

Property	What it helps control
width	How wide the image appears
max-width	Stops the image becoming too large
height	How tall the image appears
object-fit	How the image fits inside its container
object-position	Which part of the image stays visible when cropped

Rule:
control the container first
then control how the image fits inside it
                        

Property	What it controls
font-family	The typeface used on the page
font-size	The size of the text
font-weight	How bold or light the text appears
line-height	Space between lines of text
letter-spacing	Space between letters
text-transform	Uppercase/lowercase style

Basic rule:
make text readable first
style it second
                        

Unit	Meaning	Example
px	Fixed size	width: 200px;
%	Relative to parent	width: 50%;
rem	Relative to root font size	padding: 1.5rem;
vw / vh	Relative to viewport width/height	height: 50vh;

Good habit:
use rem for type/spacing
use % for flexible widths
use vw/vh carefully
                        

Direction Controls Everything

flex-direction: row

[ item ][ item ][ item ]

main axis  → left ↔ right
cross axis → top  ↕ bottom
                        

flex-direction: column

[ item ]
[ item ]
[ item ]

main axis  → top  ↕ bottom
cross axis → left ↔ right
                        

If alignment feels wrong, the direction is usually the cause.

If spacing is wrong:
check direction first

If items won't move:
check the parent
                        

Nav list recipe:

nav ul {
    display: flex;
    list-style: none;
    gap: 1rem;
}

nav a {
    text-decoration: none;
    color: inherit;  /* inherit = use the parent's colour instead of default link blue */
}
                        

Problem-solving order (learned from Flexbox Froggy level 24):

Don't try to move individual items first — figure out the overall
layout structure before touching individual positioning.

1. flex-direction   → which way does the main axis run?
2. flex-wrap         → does content wrap onto new lines?
3. justify-content   → position along the main axis
4. align-content     → position the wrapped lines along the cross axis
   (align-items      → position items within a single line)

Getting the structure (1-2) right first makes the positioning
properties (3-4) behave the way you'd expect.