The elements.css style sheet sets the default styling for every visible HTML element, including:
- Headings, paragraphs, hyperlinks, and other typography.
- Data tables.
- Forms, fieldsets and legends.
- Input controls and buttons.
In addition, browser chrome such as page background color, scrollbar styling, and selected text are also set in the elements style sheet.
Style rules set in the elements style sheet cascade through to widgets, where the default presentation of individual elements can be modified for different contexts.
Typography
The elements style sheet provides a simple set of typographic styles that are intended to be used as a starting point for new web design projects.
All typographic elements – headings, paragraphs, tables, etc. – conform to a common vertical baseline and are responsive to changes in screen width. Fonts appear bigger on wider screens. There are five breakpoints at 600px, 900px, 1200px, 1500px and 1800px.
| < 600px | > 600px | > 900px | > 1200px | > 1500px | > 1800px | |
|---|---|---|---|---|---|---|
| Baseline | 22px | 22px | 24px | 26px | 28px | 30px |
| Heading level 1 | 30px | 38px | 42px | 46px | 50px | 54px |
| Heading level 2 | 18px | 18px | 20px | 22px | 24px | 26px |
| Heading level 3 | 14px | 14px | 15px | 16px | 17px | 18px |
| Paragraphs and lists | 14px | 14px | 15px | 16px | 17px | 18px |
| Small print | 11px | 11px | 12px | 13px | 14px | 15px |
| Preformatted and code | 11px | 11px | 11px | 11px | 11px | 11px |
Tables are responsive too. On screens narrower than 600px, tables collapse to a concise two-column layout.
Web pages look great printed. That's because the elements style sheet applies print-optimized styles to every typographic element, building on the print defaults established in the reset style sheet.
See for yourself – and don't forget to change the size of your browser window to see how things scale, and use your browser's print preview to see the print-optimized typography.
Forms
The elements style sheet determines the default visual presentation of text boxes, labels, and buttons.
But it does not do any more than that. It does not define any additional markup for laying out the elements of a form. That is a job for widgets.
Form elements are responsive, scaling mobile-first to the same baseline and font sizes as the typographic elements.