Meta tags:
author= Julia Evans;
Headings (most frequently used words):
example, an, element, css, inline, vs, block, can, to, on, the, padding, borders, different, of, isn, box, flexbox, grid, areas, centering, position, absolute, elements, text, in, properties, from, is, how, margins, width, use, center, few, top, with, index, table, contents, easy, specificity, units, model, margin, syntax, making, disappear, stacking, contexts, transitions, examples, wizard, zines, project, vertical, alignment, changes, if, there, no, it, mix, rules, rem, em, single, id, more, specific, than, many, classes, looks, overlap, and, aren, included, height, by, default, you, align, be, negative, bottom, 50, trick, make, fixed, aspect, ratio, outlines, border, radiuses, shadows, left, right, 100, basic, using, for, simple, layout, ways, do, absolutely, positioned, page, display, none, visibility, hidden, putting, another, one, higher, doesn, always, appear, transition, that, happens, hover,
Text of the page (most frequently used words):
#example (45), css (12), can (11), element (10), the (8), inline (8), block (8), with (7), different (6), #borders (6), padding (6), that (4), index (4), top (4), elements (4), position (4), absolute (4), isn (4), few (4), centering (4), grid (4), areas (4), flexbox (4), properties (4), from (4), width (4), box (4), how (4), use (4), margins (4), center (4), text (4), examples (4), one (3), for (3), you (3), and (3), transition (2), happens (2), hover (2), transitions (2), higher (2), doesn (2), always (2), appear (2), stacking (2), contexts (2), putting (2), another (2), visibility (2), hidden (2), display (2), none (2), making (2), disappear (2), absolutely (2), positioned (2), page (2), ways (2), using (2), simple (2), layout (2), basic (2), 100 (2), left (2), right (2), shadows (2), border (2), radiuses (2), outlines (2), trick (2), make (2), fixed (2), aspect (2), ratio (2), bottom (2), negative (2), margin (2), syntax (2), align (2), aren (2), included (2), height (2), default (2), overlap (2), model (2), looks (2), single (2), more (2), specific (2), than (2), many (2), classes (2), rem (2), units (2), mix (2), rules (2), specificity (2), here (2), weird (2), vertical (2), alignment (2), changes (2), there (2), easy (2), all (2), are (2), codepen (2), zines (2), thing, start, out, just, illustrate, pretty, counterintuitive, sometimes, table, contents, these, editable, thanks, click, edit, play, around, larger, view, where, see, html, output, screen, hello, some, things, happen, this, site, goes, zine, hell, yes, about, wizard, project,
Text of the page (random words):
css examples css examples a wizard zines project zines about hello here are some examples of weird things that can happen with css this site goes with the zine hell yes css all these examples are editable thanks to codepen click edit on codepen to play around with an example and for a larger view where you can see the html css output all on one screen table of contents css isn t easy example an inline block element s vertical alignment changes if there s no text in it specificity example css can mix properties from different rules units example rem vs em example a single id is more specific than many classes inline vs block example how an inline block element looks the box model example margins can overlap example padding and borders aren t included in an element s width height by default example you can use text align center to center inline block elements padding margin syntax example margins can be negative example how to use the padding bottom 50 trick to make a fixed aspect ratio borders example borders vs outlines example different border radiuses example a few box shadows example left 0 right 0 is different from width 100 flexbox example basic flexbox properties css grid areas example using grid areas for a simple layout centering example a few ways to do centering position absolute example position absolute isn t absolutely positioned on the page making elements disappear example display none vs visibility hidden example putting an element on top of another one with z index stacking contexts example an element with a higher z index doesn t always appear on top transitions example a transition that happens on hover css isn t easy example an inline block element s vertical alignment changes if there s no text in it here s a weird thing to start out just to illustrate that css can be pretty counterintuitive sometimes specificity example css can mix properties from different rules units example rem vs em example a single id is more specific than many classes inline vs block example how an inline block element looks the box model example margins can overlap example padding and borders aren t included in an element s width height by default example you can use text align center to center inline block elements padding margin syntax example margins can be negative example how to use the padding bottom 50 trick to make a fixed aspect ratio borders example borders vs outlines example different border radiuses example a few box shadows example left 0 right 0 is different from width 100 flexbox example basic flexbox properties css grid areas example using grid areas for a simple layout centering example a few ways to do centering position absolute example position absolute isn t absolutely positioned on the page making elements disappear example display none vs visibility hidden example putting an element on top of another one with z index stacking contexts example an element with a higher z index doesn t always appear on top transitions example a transition that happens on hover
|