MYP Design Styling and Layout with CSS Notes

A CSS Rule Is a Target Plus Instructions

1. CSS stands for Cascading Style Sheets, and it controls how the HTML you wrote actually looks.
2. A rule is a selector saying what to style, then a block in curly braces saying how.
3. Inside the block each declaration is a property, a colon, a value and a semicolon, such as color: #333333;.
4. Property names come from a fixed list the browser knows, so inventing margen gets you nothing at all.
5. A value the browser cannot understand is thrown away in silence, which is why one typo kills a single line with no error message.
6. Lengths need units: px is a fixed pixel, rem is a multiple of the root font size, and % is measured against the parent element.

Selectors Are How You Aim

1. An element selector like p { } hits every paragraph on the page, which is useful for a base style and far too blunt for anything else.
2. A class selector written .card { } styles any element carrying class="card", and you can reuse that class on 50 elements.
3. An id selector written #main-nav { } styles exactly one element, because an id appears once per page.
4. A descendant selector nav a { } means every link inside a nav and leaves links elsewhere alone.
5. Pseudo-classes react to state, so a:hover changes a link under the pointer and a:focus shows where the keyboard has landed.
   1. Never delete the focus outline to tidy a design, because keyboard users then have no idea where they are on the page.
6. Comma separated selectors share one block, so h1, h2, h3 { font-family: Georgia, serif; } styles all three in three words.

The Cascade Settles Arguments Between Rules

1. When two rules set the same property on the same element, the browser picks a winner using specificity.
2. An id beats a class and a class beats a plain element, so #menu wins over .menu, which wins over ul.
3. When specificity ties, the rule written further down the file wins, which is why the order of your stylesheet matters.
4. Some properties inherit, so setting font-family on body passes it to every child unless a child overrides it, while margin and border never inherit.
5. Developer tools show the winning declaration and cross out the losers, which beats guessing every time.

The Box Model: Everything Is a Rectangle

1. Every element is a box with four layers: the content in the middle, padding around it, a border around that, and margin outside.
2. Padding sits inside the border so it takes the background colour, while margin sits outside and stays see through.
3. A box set to width: 300px with 20px padding and a 2px border takes up 344px on screen by default, because width counts only the content.
4. Setting box-sizing: border-box makes width include the padding and border, so 300px really is 300px.
5. Most stylesheets open with * { box-sizing: border-box; } so that arithmetic never bites.
6. Vertical margins between stacked elements collapse into one, so 30px under a heading plus 20px over a paragraph gives a 30px gap, not 50px.

Flexbox Handles a Row, Grid Handles the Page

1. display: flex on a container arranges its direct children along one axis, a row by default.
2. justify-content spreads items along that axis, and space-between pushes the first and last to the edges, which is exactly what a navigation bar wants.
3. align-items lines children up across the other axis, so align-items: center vertically centres a logo next to its menu.
4. gap: 16px puts even spacing between children without hanging a margin on each one.
5. display: grid with grid-template-columns: repeat(3, 1fr) makes three equal columns, where 1fr means one share of the space left over.
6. Use grid for the overall page skeleton and flex inside each region, for a row of buttons or the contents of one card.

One External Stylesheet Beats Fifty Inline Styles

1. Put every rule in a separate file called styles.css and pull it in from the head with <link rel="stylesheet" href="styles.css">.
2. One stylesheet serves the whole site, so changing the heading colour once changes it across all 20 pages.
3. The browser caches that file after the first page, so every page after it loads faster.
4. Keeping structure in HTML and appearance in CSS is called separation of concerns, and it means a redesign never touches the content.
5. Comments written as /* navigation bar */ break a 400 line file into chunks you can actually find.

Custom Properties Keep Your Palette in One Place

1. A custom property is a variable you invent, written with two leading hyphens, as in --brand-blue: #1d4ed8;.
2. Declare them once inside :root { } so every element on the page can reach them.
3. Use one with var(), as in background-color: var(--brand-blue);.
4. Storing five colours and three font sizes this way turns a rebrand into an eight line edit instead of a search through the whole file.
5. Name them by job, --text-muted, rather than by appearance, --light-grey, so the name still makes sense after the colour changes.
6. A dark theme can then be one small block that gives the same names different values.
   1. Choosing which colours go in the palette, and checking they have enough contrast, is covered in the interface design articles.