Hone

Lessons · HTML and CSS · Quick reference

HTML and CSS quick reference

72 topics, one line each, in the order Hone teaches them.

Hone is a place to practise programming. This sheet is the whole HTML and CSS track at a glance: every idea it covers, in the order they are taught, one line each. It is a map rather than a lesson. Read opens the full explanation of an idea; Practise gives you a question on it. Both are free, and reading needs no account at all.

Your first web page · The page

the page skeletonA page is a doctype, then one html element holding a head (things about the page) and a body (what is drawn). Read: The page skeleton · Practise the page skeleton
tags and elementsAn element is an opening tag, content, and a closing tag with a slash. Elements nest inside each other, and a few have no content and no closing tag at all. Read: Tags, elements, content · Practise tags and elements
headingsh1 to h6 mark headings by importance, not by size. One h1 names the page; h2 names its sections; h3 the parts inside a section. Read: Headings · Practise headings
paragraphsp is a paragraph. The browser spaces paragraphs apart, and it collapses any run of spaces, tabs and line breaks inside one into a single space. Read: Paragraphs and whitespace · Practise paragraphs
linksa is an anchor and href is where it goes: a full address, a path on this site, or a fragment that jumps to an id on this page. Read: Links · Practise links

Your first web page · More than text

images and altimg shows a picture from src and carries alt: the words that stand in for it when it cannot be seen. Width and height reserve its space before it loads. Read: Images and alt text · Practise images and alt
listsul is a bulleted list and ol a numbered one. Either holds li items, and a list nests by putting a whole list inside an item. Read: Lists · Practise lists
attributesAttributes sit in the opening tag as name="value" and change what an element does. Some are boolean: present means on. class can hold several names; id names exactly one element. Read: Attributes · Practise attributes
formsA form collects input and sends it somewhere. Each field has a name the server receives, a label people see, and a button that submits. Read: Forms · Practise forms
semantic tagsheader, nav, main, article, section and footer are div with meaning. They look the same and tell readers and search engines what each part of the page is. Read: Semantic tags · Practise semantic tags

Your first web page · Give it style

a CSS ruleA rule is a selector, then braces holding property: value pairs. Rules that match the same element all apply; they add up rather than replace each other. Read: A CSS rule · Practise a CSS rule
selectorsA bare word selects a tag, a dot selects a class, a hash selects an id, and a space between two means 'inside': .menu a is every link inside something with class menu. Read: Selectors · Practise selectors
attaching CSSCSS reaches a page three ways: a linked stylesheet file, a style element in the page, or a style attribute on one element. The attribute wins over both, and cannot be reused. Read: Attaching CSS · Practise attaching CSS
colour and backgroundcolor is the text, background-color is the box behind it, and a border needs a width, a style and a colour before it shows. Hex, rgb and names all mean the same colours. Read: Colour and background · Practise colour and background
fonts and sizesfont-family is a list of fallbacks ending in a generic family; font-size in rem scales with the reader's settings; line-height without a unit is a multiple of the font size. Read: Fonts and sizes · Practise fonts and sizes

Your first web page · The box

the box modelEvery element is a box: content, then padding inside the border, then the border, then margin outside it. Background paints the content and padding, never the margin. Read: The box model · Practise the box model
box-sizingBy default, width sets the content only and padding and border are added on. box-sizing: border-box makes width mean the whole box, padding and border included. Read: box-sizing · Practise box-sizing
px, rem, em and %px is fixed. rem is relative to the root font size. em is relative to the element's own font size, so it compounds through nesting. % is relative to the parent. Read: px, rem, em and % · Practise px, rem, em and %
displayblock elements start on a new line and fill the width; inline elements flow within the text and ignore width and height; inline-block flows and respects them; none removes the element from the layout. Read: display · Practise display
the cascadeWhen rules disagree, specificity decides: inline style beats an id, an id beats a class, a class beats a tag. Only between equals does the later rule win. Read: The cascade · Practise the cascade

Your first web page · Layout that holds

flexboxdisplay: flex lays out direct children along one line, a row by default. gap spaces them, align-items lines them up across the row, and an auto margin pushes one item to the far end. Read: Flexbox · Practise flexbox
griddisplay: grid with grid-template-columns lays out children in columns and rows. fr shares free space; repeat(3, 1fr) is three equal columns; extra children wrap to new rows. Read: Grid · Practise grid
positionstatic is normal flow. relative nudges an element and makes it the frame for absolute children. absolute pins to that frame. fixed pins to the screen; sticky is normal until it reaches an edge, then holds. Read: position · Practise position
media queries@media (min-width: 700px) { … } applies its rules from 700px wide upward. Written mobile-first, the base styles fit a phone and each query adds a wider layout. Read: Media queries · Practise media queries
:hover and :focusA pseudo-class selects a state: :hover while the pointer is over an element, :focus while it has keyboard focus. Style both together, and a transition makes the change ease. Read: :hover and :focus · Practise :hover and :focus

The page everyone can use · Who cannot use this page

who a page can shut outKeyboard access is not a blindness feature: it is for anyone whose mouse hurts, is imprecise for them, or is not there. Read: Who a page can shut out · Practise who a page can shut out
role, name and stateThe browser turns your markup into an accessibility tree, and assistive software reads that. Every entry has a role, a name and a state. Read: Role, name and state · Practise role, name and state
put the mouse down and TabTab through the page. Thirty seconds finds controls you cannot reach, focus you cannot see, and an order that makes no sense. Read: Put the mouse down and Tab · Practise put the mouse down and Tab
cheapest while you are writing itMost of this is choosing the right element, which costs nothing at the time and a great deal afterwards. Read: Cheapest while you are writing it · Practise cheapest while you are writing it

The page everyone can use · The label that is not attached

for= and id=, or wrap itA label is attached by for= pointing at an id=, or by containing the input. Nothing else attaches it. Read: for= and id=, or wrap it · Practise for= and id=, or wrap it
a field that announces nothingWith no attached label a screen reader says there is an edit box and nothing about what goes in it. Read: A field that announces nothing · Practise a field that announces nothing
a placeholder is not a labelIt disappears the moment somebody types, taking the only instruction with it. Read: A placeholder is not a label · Practise a placeholder is not a label
naming a group of controlsA fieldset with a legend gives a set of related controls a name of its own, and the legend is announced with each option. Read: Naming a group of controls · Practise naming a group of controls

The page everyone can use · The button that is a div

a button, not a styled div<button> is in the tab order, announces as a button, and responds to Enter and Space. A styled div is none of the three. Read: A button, not a styled div · Practise a button, not a styled div
a role does not make it reachablerole="button" changes what a thing is CALLED. It changes nothing about what it can do. Read: A role does not make it reachable · Practise a role does not make it reachable
goes somewhere, or does somethingA link navigates. A button acts. That decides which element to use, and it is about what happens rather than how it looks. Read: Goes somewhere, or does something · Practise goes somewhere, or does something
0, -1, and never a positive onetabindex=0 puts an element in the tab order at its document position. tabindex=-1 makes it focusable from script only. A positive value reorders the whole page. Read: 0, -1, and never a positive one · Practise 0, -1, and never a positive one

The page everyone can use · Where the focus went

the keyboard user's cursorThe focus ring is how a keyboard user knows where they are. Removing it removes the pointer. Read: The keyboard user's cursor · Practise the keyboard user's cursor
:focus-visible, and a ring you can see:focus-visible matches only when the browser judges the ring useful -- keyboard yes, mouse click usually no. Read: :focus-visible, and a ring you can see · Practise :focus-visible, and a ring you can see
the HTML decides, not the CSSTab follows document order. CSS can move things on screen without moving them in the order, and then the two disagree. Read: The HTML decides, not the CSS · Practise the HTML decides, not the CSS
past the navigation, every pageA link, first on the page, pointing at the id of the main content. Read: Past the navigation, every page · Practise past the navigation, every page

The page everyone can use · Colour you can actually read

what a contrast ratio measuresThe relative brightness of two colours against each other, on a scale from 1:1 to 21:1. Read: What a contrast ratio measures · Practise what a contrast ratio measures
4.5 for text, 3 for the restThe ratio belongs to the PAIR, not to the colour. The same grey passes on one background and fails on another. Read: 4.5 for text, 3 for the rest · Practise 4.5 for text, 3 for the rest
colour is never the only signalIf colour is the only thing carrying a meaning, that meaning is gone for anyone who does not perceive it. Read: Colour is never the only signal · Practise colour is never the only signal
a dark theme is all new pairsAdding a dark theme means every colour pair on the site is a new pair, and all of them need checking again. Read: A dark theme is all new pairs · Practise a dark theme is all new pairs

The page everyone can use · Pictures, and what they are for

what the image is for hereAlt text says what the image is FOR in this place: the information somebody would miss without it. Read: What the image is for here · Practise what the image is for here
alt= on purposealt="" is a statement: this image carries no information, skip it. Read: alt= on purpose · Practise alt= on purpose
no alt at allAn img with no alt attribute is the one accessibility fault a machine detects perfectly -- and the reason a clean scan proves so little. Read: No alt at all · Practise no alt at all
not "image of"The screen reader already says it is an image. Starting the alt with 'Image of' says it twice. Read: Not "image of" · Practise not "image of"

The page everyone can use · The shape of the page

headings are the outlineHeadings are how most screen reader users navigate. The list of them IS the table of contents. Read: Headings are the outline · Practise headings are the outline
one h1: what this page isOne h1 per page, naming this page. It is the root of the outline. Read: One h1: what this page is · Practise one h1: what this page is
regions you can jump to<header>, <nav>, <main> and <footer> are named regions a screen reader user can jump straight to. Read: Regions you can jump to · Practise regions you can jump to
which language to pronouncelang on the html element tells a screen reader which language to pronounce the page in. Read: Which language to pronounce · Practise which language to pronounce
th, and which way it runsReal <th> cells let each data cell be announced with its header. scope says whether that header runs down a column or across a row. Read: th, and which way it runs · Practise th, and which way it runs

More

centringQuestions on Hone; no lesson yet. Practise centring
inheritanceQuestions on Hone; no lesson yet. Practise inheritance
collapsing marginsQuestions on Hone; no lesson yet. Practise collapsing margins
overflowQuestions on Hone; no lesson yet. Practise overflow
specificityQuestions on Hone; no lesson yet. Practise specificity
transitionsQuestions on Hone; no lesson yet. Practise transitions
custom propertiesQuestions on Hone; no lesson yet. Practise custom properties
z-indexQuestions on Hone; no lesson yet. Practise z-index
alt textQuestions on Hone; no lesson yet. Practise alt text
button or linkQuestions on Hone; no lesson yet. Practise button or link
commentsQuestions on Hone; no lesson yet. Practise comments
&lt; and &amp;Questions on Hone; no lesson yet. Practise &lt; and &amp;
the headQuestions on Hone; no lesson yet. Practise the head
id and classQuestions on Hone; no lesson yet. Practise id and class
input typesQuestions on Hone; no lesson yet. Practise input types
labelsQuestions on Hone; no lesson yet. Practise labels
nestingQuestions on Hone; no lesson yet. Practise nesting
tablesQuestions on Hone; no lesson yet. Practise tables