Every tag and property in the course, on one page. This is the page to open in 6 months when u forget something.
If a line here does not make sense, the chapter link next to it is where it was explained.
The page shell · Chapter 5
<!DOCTYPE html> <!-- use the modern rules. always line 1 -->
<html>
<head> <!-- everything the user cannot see -->
<meta charset="UTF-8"> <!-- accents and emoji survive -->
<meta name="viewport"
content="width=device-width, initial-scale=1"> <!-- or no phone support -->
<title>Text in the tab</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> <!-- everything the user can see -->
</body>
</html>Filepaths · Chapter 5
styles.css next to the html file
css/styles.css into the folder css, then the file
../styles.css up one folder, then the file
Elements · Chapter 1 · Chapter 6
<p>a paragraph</p>
<button>a button</button>
<div>a block container. means nothing, holds things</div>
<span>an inline container, for one word in a sentence</span>
<a href="https://x.com">a link</a>
<a href="https://x.com" target="_blank">...opened in a new tab</a>
<img src="pics/cat.jpg" alt="a cat"> <!-- no closing tag -->
<input type="text" placeholder="Search"> <!-- no closing tag -->
<input type="checkbox" id="agree">
<label for="agree">clicking these words ticks the box</label>
<strong>important, and bold</strong>
<h1>page title</h1> <!-- down to <h6>. one <h1> per page -->
<br> <!-- a line break. not for spacing -->
<!-- an html comment -->Semantic elements · Chapter 11
<header> <nav> <main> <section> <article> <aside> <footer>they behave exactly like
<div>. the difference is that screen readers and search engines can tell what part of the page they are looking at.
Where css goes · Chapter 2 · Chapter 7
<style> button { color: red; } </style> <!-- in the head -->
<link rel="stylesheet" href="styles.css"> <!-- a separate file. use this -->
<div style="color: red;"> <!-- inline. beats everything -->/* a css comment. <!-- --> does not work in a .css file */Selectors · Chapter 2 · Chapter 4 · Chapter 11
p { } /* every <p> on the page */
.title { } /* every element with class="title" */
#thing { } /* the element with id="thing". avoid for styling */
* { } /* everything */
.a, .b, p { } /* all three of them */
.card p { } /* every <p> anywhere inside .card */
.card > p { } /* only a <p> that is a direct child of .card */
.btn:hover { } /* while the mouse is on it */
.btn:active { } /* while the mouse is held down */
.btn:focus { } /* while it is selected by keyboard */
.card:hover .tip { } /* .tip, but only while the mouse is on .card */
input::placeholder { }/* the grey hint text. 2 colons = a pseudo-ELEMENT */who wins: inline style, then class, then element name, then inherited. more specific beats less specific whatever the order. order is only the tie breaker. Chapter 11
Colour values · Chapter 3
color: red; /* about 150 names exist */
color: rgb(0, 150, 255); /* red, green, blue. each 0 to 255 */
color: #0096FF; /* the same 3 numbers in base 16 */
color: #FFF; /* short form of #FFFFFF */
color: rgba(0, 0, 0, 0.5); /* the 4th number is how see-through */
color: transparent;Measurement values · Chapter 3
width: 200px; /* fixed. dots on the screen */
width: 50%; /* of the container, not the screen */
width: 10em; /* 10 x THIS element's font-size */
width: 10rem; /* 10 x the PAGE's font-size, 16px by default */
height: 100vh; /* exactly one screen tall */a number with no unit is a dead line, silently.
0is the one exception.
The properties u start with · Chapter 2
background-color: red;
color: white; /* the TEXT colour */
height: 36px;
width: 105px;
border: none;
border-radius: 2px; /* half the height = fully round ends */
cursor: pointer; /* the hand. put it on anything clickable */
opacity: 0.5; /* the whole element, text included */Borders · Chapter 2 · Chapter 7
border-width: 1px;
border-style: solid; /* or dotted, dashed. NO style = no border */
border-color: red;
border: 1px solid red; /* the shorthand for all 3 */
border-bottom: 1px solid #e5e7eb; /* one side only */Text · Chapter 6
font-family: Roboto, Verdana, Arial; /* a fallback list, in order */
font-size: 30px;
font-weight: bold; /* or 100..900. only weights the font HAS */
font-style: italic;
text-align: center; /* moves the words, NOT the element */
text-decoration: none; /* kills the underline on a link */
line-height: 1.5; /* space between lines. ~1.5 reads well */
text-transform: uppercase;
white-space: nowrap; /* never wrap. it will overflow instead */text properties inherit from the parent. box properties do not. form controls do not inherit the font:
font-family: inheritopts them back in.
Images · Chapter 5
width: 300px; /* set ONE of width/height and the shape is kept */
object-fit: cover; /* fill the box, crop the overflow. usually right */
object-fit: contain; /* fit the whole image, leave gaps */
display: block; /* kills the mystery gap under an <img> */The box model · Chapter 7
margin | border | padding | content
outside the line inside the words
margin: 10px; /* all 4 sides */
margin: 10px 20px; /* top+bottom, then left+right */
margin: 5px 10px 15px 20px; /* top, right, bottom, left. clockwise */
margin-right: -20px; /* negative pulls. padding cannot */
margin: 0 auto; /* centres a block that HAS a width */
padding: 10px; /* same 4 shorthands */
body { margin: 0; } /* the reset. first line of most stylesheets */
p { margin-top: 0; margin-bottom: 0; }
* { box-sizing: border-box; } /* width means the WHOLE box */padding gets the background colour. margin does not. that is how u tell them apart on screen.
Display · Chapter 7
display: block; /* takes the whole line. width and height work */
display: inline-block; /* takes what it needs. width and height work */
display: inline; /* flows in a line of text. width is IGNORED */
display: none; /* gone. no space left behind */
vertical-align: top; /* stops inline-blocks sitting on the text baseline */Grid · Chapter 8
.container {
display: grid;
grid-template-columns: 100px 100px; /* 2 fixed columns */
grid-template-columns: 1fr 1fr; /* 2 equal, filling the space */
grid-template-columns: 1fr 2fr; /* the 2nd gets twice as much */
grid-template-columns: 100px 1fr; /* fixed sidebar, flexible rest */
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 40px;
gap: 20px; /* both at once */
justify-content: center; /* across. only if there is spare room */
align-items: center; /* down. default is stretch */
}u never say how many rows. items wrap onto new ones by themselves, which is why a grid of unknown things is a grid and not a flexbox.
Flexbox · Chapter 9
.container {
display: flex;
flex-direction: row; /* the default. a line of things */
flex-direction: column; /* a stack. justify and align now SWAP jobs */
justify-content: space-between; /* along the direction */
align-items: center; /* across the direction */
gap: 20px;
flex-wrap: wrap; /* drop onto a new line instead of shrinking */
}
.child {
flex: 1; /* take the leftover space. 2 takes twice as much */
flex-shrink: 0; /* never squash me. for icons, avatars, logos */
width: 0; /* with flex: 1, lets an <input> actually shrink */
align-self: center; /* override align-items for this one child */
margin-left: auto; /* push me and everything after me to the far end */
}in a row: justify is horizontal, align is vertical. in a column: they swap. this is the whole difficulty of flexbox.
Position · Chapter 10
position: static; /* the default. top/right/bottom/left do NOTHING */
position: fixed; /* pinned to the WINDOW. survives scrolling */
position: absolute; /* pinned to the PAGE. scrolls away */
position: relative; /* stays in the flow, then nudge it */
position: sticky; /* relative, then fixed once u scroll past it */
top: 0; right: 10px; bottom: 0; left: 50px;
/* set 2 OPPOSITE sides and it stretches to reach both */
z-index: 100; /* higher is in front. needs a position to work */the corner trick:
position: relativeon the parent,position: absoluteon the child. that is a badge on a thumbnail, a close button on a dialog, a dot on an icon.
a fixed header is out of the flow, so nothing makes room for it. add
padding-topto whatever is underneath.
Responsive · Chapter 11
.grid { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 750px) { /* 750px and narrower */
.grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1050px) { /* 1050px and wider */
.grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media (min-width: 750.02px) and (max-width: 1000px) { } /* a band */media queries go after the rule they overwrite, or they lose. and they do nothing on a phone without the
<meta name="viewport">tag.
States and motion · Chapter 4
.btn {
transition: background-color 0.15s; /* on the NORMAL rule */
transition: background-color 0.15s, color 0.15s;
box-shadow: 3px 4px 5px black; /* right, down, blur, colour */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); /* the floating look */
}
.btn:hover { background-color: darkred; }The two odd ones · Chapter 11
pointer-events: none; /* the mouse passes straight through */
white-space: nowrap; /* never wrap this text */Devtools · Chapter 4
right click > Inspect open it
Ctrl+Shift+M phone sizes, for testing media queries
Ctrl+U the raw html of any page on the internet
Ctrl+R / F5 reload. the browser does not notice u saved
- a declaration with a line through it is dead: misspelled, or beaten by a more specific rule.
- click any number and arrow-key it up and down to find the value u want.
- the box model diagram at the bottom of the Styles panel names which of the 4 layers is making ur gap the wrong size.
:hovforces:hoveron and holds it, so u can style a hover without keeping ur mouse still.- the
gridandflexbadges next to a container draw its lines and its free space on the page.