├── 01-css-fundamentals ├── a-simple-document.html ├── block-and-inline-level-elements.html ├── browser-alternate-stylesheets.html ├── c │ ├── bigtext.css │ ├── sheet1.css │ ├── sheet2.css │ └── zany.css ├── external-stylesheet-representation.html ├── i │ ├── arrow1.png │ └── arrow2.png ├── index.html ├── structure-of-a-rule.html ├── xml-default-display.html └── xml-styled-display.html ├── 02-selectors ├── grouping-selectors-and-rules.html ├── i │ ├── W3C_logo_big.jpg │ ├── W3C_logo_small.jpg │ ├── checkmark.png │ ├── target.gif │ ├── w3.png │ └── warning.png ├── index.html ├── moving-style-from-one-element-to-another.html ├── result-of-equivalent-style-sheets.html ├── selecting-adjacent-siblings.html ├── selecting-element-based-on-context.html ├── selecting-elements-based-on-attributes-and-values.html ├── selecting-elements-based-on-attributes.html ├── selecting-elements-based-on-portions-of-attribute-values.html ├── selecting-elements-based-on-substrings-that-begin-attribute-values.html ├── selecting-elements-based-on-substrings-that-end-attribute-values.html ├── selecting-elements-based-on-substrings-within-attribute-values.html ├── selecting-elements-with-multiple-class-names.html ├── selecting-following-siblings.html ├── simple-styling-of-simple-document.html ├── using-class-selector.html ├── using-descendant-selectors-to-apply-different-styles.html ├── using-generic-and-specific-selectors.html └── very-specific-descendant-selector.html ├── 03-pseudo-class-and-element-selectors ├── changing-layout-dynamic-pseudos.html ├── combining-patterns-nth-child.html ├── first-letter-pseudo.html ├── first-line-pseudo.html ├── highlighting-form-element-focus.html ├── i │ ├── W3C_logo_big.jpg │ ├── W3C_logo_small.jpg │ ├── checkmark.png │ ├── masthead.jpg │ ├── redbox.gif │ ├── short.gif │ ├── target.gif │ ├── w3.png │ └── warning.png ├── index.html ├── inserting-content-before-element.html ├── selecting-both-nth-table-cells.html ├── selecting-elements-using-focus-within.html ├── selecting-even-links.html ├── selecting-images-only-children-2.html ├── selecting-images-only-children.html ├── selecting-images-only-sibling-of-type.html ├── selection-styling.html ├── styling-checked-and-indeterminate.html ├── styling-elements-with-class-not-list-items.html ├── styling-enabled-and-disabled.html ├── styling-every-other-row.html ├── styling-every-third-child.html ├── styling-first-children.html ├── styling-fragment-identifier.html ├── styling-header-cells-outside-table-head.html ├── styling-last-children.html ├── styling-list-items-without-class.html ├── styling-second-children.html ├── styling-the-button-file-input.html ├── styling-the-root-element.html ├── styling-valid-and-invalid.html ├── to-has-and-has-not.html ├── using-has.html └── using-matches-any.html ├── 04-specificity-and-the-cascade ├── directly-assigning-styles.html ├── higher-specificity-wins.html ├── how-different-rules-affect.html ├── important-rules-win.html ├── index.html ├── inheritance-of-styles.html ├── why-borders-arent-inherited.html └── zero-specificity-beats-no-specificity.html ├── 05-values-and-units ├── changing-colors.html ├── changing-form-element-foregrounds.html ├── character-relative-sizing.html ├── custom-value-scoping.html ├── custom-values.html ├── declared-color-vs-default-color.html ├── different-colors-for-different-elements.html ├── ems-vs-rems.html ├── i │ ├── box-red.gif │ ├── grid-black.png │ ├── hsl-hues-lightness.png │ ├── inserting_attribute_values.png │ ├── target.png │ └── tester.jpg ├── index.html ├── inserting-attribute-values.html ├── named-colors.html ├── setting-absolute-length-left-margins.html ├── text-in-progressive-translucency-redux.html ├── text-in-progressive-translucency.html ├── text-in-shades-of-gray.html ├── using-em-for-margins-and-sizing.html ├── using-pixel-lengths.html ├── varying-lightness-and-hues.html └── viewport-relative-sizing.html ├── 06-basic-visual-formatting ├── aspect-ratio.html ├── block-axis-properties.html ├── block-axis-sizing-placement-in-detail.html ├── block-inline-axes.html ├── box-dec-break-inline-slices-clones.html ├── box-sizing.html ├── collapsing-vertical-margins-col-v-uncol.html ├── collapsing-vertical-margins-col-with-borders.html ├── complete-box-model.html ├── content-area-and-surroundings.html ├── content-sizing.html ├── display-changing-inline-to-block.html ├── display-changing-list-to-inline.html ├── display-contents.html ├── fit-content-sizing.html ├── heights-and-widths.html ├── horizontal-formatting-additive-padding-margin.html ├── horizontal-formatting-auto-width-and-left.html ├── horizontal-formatting-auto-width.html ├── horizontal-formatting-elements-wide-as-containing-block.html ├── horizontal-formatting-implicit-offset.html ├── horizontal-formatting-negative-margins-negative-left.html ├── horizontal-formatting-negative-margins-wide-children.html ├── horizontal-formatting-overriding-right-margin.html ├── horizontal-formatting-replaced-elements-changing-widths.html ├── horizontal-formatting-setting-explicit-width.html ├── horizontal-formatting-subtractive-padding-margin.html ├── i │ ├── Flag_Map_of_Ohio.svg │ ├── arrowhead-down.svg │ ├── arrowhead-left.svg │ ├── arrowhead-right.svg │ ├── arrowhead-up.svg │ ├── hatchgrid.svg │ ├── inline-replaced-inline-on-baseline.png │ ├── rulers.png │ ├── smile.svg │ ├── star.png │ └── star2.png ├── index.html ├── inline-axis-properties.html ├── inline-block-auto-sizing.html ├── inline-block-behavior.html ├── inline-boxes-within-a-line.html ├── inline-nonreplaced-aligning-inline-to-line-box.html ├── inline-nonreplaced-inline-boxes-in-p.html ├── inline-nonreplaced-protruding-text-again.html ├── inline-nonreplaced-vert-align-line-box-height.html ├── inline-replaced-adding-padding-etc.html ├── inline-replaced-increase-line-box.html ├── inline-replaced-inline-on-baseline.html ├── inline-replaced-negative-margin-effects.html ├── inline-replaced-negative-margin-pulling-down.html ├── line-layout-multi-line-element.html ├── line-layout-single-line-element.html ├── list-items-markers.html ├── making-elements-invisible.html ├── managing-line-height-assigning-to-inline.html ├── managing-line-height-increasing-line-height.html ├── maximum-block-sizing.html ├── minimum-content-sizing.html ├── negative-margins-collapsing-bottom-margin-effects.html ├── negative-margins-collapsing-examples.html ├── negative-margins-collapsing-in-detail.html ├── negative-margins-collapsing-top-margin-effects.html ├── overflow-methods.html ├── overflow-x-y.html ├── padding-borders-unaltered-line-height.html ├── padding-margins-inline-ends.html ├── scaling-line-height-using.html ├── showing-lines-different-alignments-writing-modes.html ├── sizing-elements-along-inline-axis.html ├── sizing-elements-width.html ├── vertical-formatting-auto-height-block-children.html └── vertical-formatting-pct-heights.html ├── 07-padding-borders-outlines-and-margins ├── borders_border-radius-blend-details.html ├── borders_border-radius-simple-percentage.html ├── borders_border-radius-simple.html ├── borders_border-radius-slash-simple.html ├── borders_border-radius-slash-various.html ├── borders_border-radius-still-boxes.html ├── borders_border-radius-various.html ├── borders_border-styles.html ├── borders_colors-based-on-foreground-and-property.html ├── borders_dashing-across-top.html ├── borders_equivalent-style-rules.html ├── borders_image-all-around.html ├── borders_image-border-overhang.html ├── borders_image-defining-source.html ├── borders_image-examples-oceanic-bg.html ├── borders_image-examples-oceanic.html ├── borders_image-examples-plaque.html ├── borders_image-fill-slice.html ├── borders_image-filling-border-areas.html ├── borders_image-number-slicing.html ├── borders_image-repeat.html ├── borders_image-slice-lines-at-1em.html ├── borders_image-slice-lines-at-33pct.html ├── borders_image-slices-lines-at-25.html ├── borders_image-uneven-widths.html ├── borders_image-various-numeric-widths.html ├── borders_image-various-patterns-prevent-sides.html ├── borders_image-various-slicing-patterns.html ├── borders_image-various-space.html ├── borders_inline-nonreplaced-element-left-border.html ├── borders_inline-nonreplaced-element.html ├── borders_inline-replaced-element.html ├── borders_inset-two-ways.html ├── borders_links-like-balloons.html ├── borders_many-aspects.html ├── borders_outset-image.html ├── borders_really-short-declaration.html ├── borders_removing-left-border.html ├── borders_setting-bottom-with-shorthand.html ├── borders_two-outset.html ├── borders_uneven-widths.html ├── borders_using-the-cascade.html ├── borders_using-transparent.html ├── borders_very-complex-borders.html ├── borders_width-keywords.html ├── c │ └── pbom-baseline.css ├── i │ ├── 0x00-big.png │ ├── 0x00.png │ ├── Flag_Map_of_Ohio.svg │ ├── arrow-down.png │ ├── arrow-left.png │ ├── arrow-right.png │ ├── arrow-up.png │ ├── chrome.jpg │ ├── circle.png │ ├── circles.png │ ├── plaque.png │ ├── stars.png │ └── waves.png ├── index.html ├── logical-border-radius.html ├── logical-border-styles.html ├── logical-padding.html ├── margins_collapsing-within-revealed.html ├── margins_collapsing-within.html ├── margins_collapsing.html ├── margins_inline-nonreplaced-element-25-left.html ├── margins_inline-nonreplaced-element-25-negative.html ├── margins_inline-nonreplaced-element-25-sides-linebreak.html ├── margins_inline-nonreplaced-element-25-sides.html ├── margins_inline-replaced-elements.html ├── margins_mixed-units.html ├── margins_negative-in-action.html ├── margins_paragraphs-with-and-without.html ├── margins_percentages-and-widths-of-parents.html ├── margins_punching-out.html ├── margins_setting-a-margin-for-h1.html ├── outlines_discontinuous-and-non-rectangular.html ├── outlines_outline-over-margin.html ├── outlines_outline-styles.html ├── outlines_overlapping.html ├── outlines_various-outlines.html ├── outlines_width-keywords.html ├── padding_adding-padding-to-elements.html ├── padding_effect-of-padding-bordered-blocks.html ├── padding_inline-nonreplaced-element-25-left.html ├── padding_inline-nonreplaced-element-25-sides-linebreak.html ├── padding_inline-nonreplaced-element-25-sides.html ├── padding_inline-nonreplaced-element.html ├── padding_mixed-padding.html ├── padding_mixed-value.html ├── padding_more-than-one-single-side.html ├── padding_percentages-and-widths-of-parents.html ├── padding_replaced-element.html ├── padding_replaced-inline-element.html └── padding_using-instead-of-margins.html ├── 08-backgrounds ├── background-attachment-alignment.html ├── background-attachment-default-v-local.html ├── background-attachment.html ├── background-clip-text.html ├── background-clip.html ├── background-image-link-icons.html ├── background-image-why-not-inherited.html ├── background-image.html ├── background-multiple-four-corners.html ├── background-multiple-positioned-obscuring.html ├── background-multiple-positioned-repeated.html ├── background-multiple-positioned.html ├── background-multiple.html ├── background-origin-bottom-right.html ├── background-origin-differing-clips.html ├── background-origin.html ├── background-position-centered-single.html ├── background-position-length.html ├── background-position-negative-pct.html ├── background-position-negative-pos.html ├── background-position-offset-changing.html ├── background-position-offset-inferred-zeroes.html ├── background-position-various-percentages.html ├── background-repeat-bordering-elements.html ├── background-repeat-clip.html ├── background-repeat-horizontally.html ├── background-repeat-no-repeat.html ├── background-repeat-repeating.html ├── background-repeat-round-space-clip.html ├── background-repeat-spacing-on-one-axis.html ├── background-repeat-tiling-round-centered.html ├── background-repeat-tiling-round.html ├── background-repeat-tiling-space.html ├── background-repeat-various-spaces.html ├── background-repeat-vertically.html ├── background-shorthand.html ├── background-size-contain-repeat.html ├── background-size-contain.html ├── background-size-cover.html ├── background-size-distorting.html ├── background-size-origin-percent.html ├── background-size-origin.html ├── backgrounds-more-complicated.html ├── backgrounds-padding.html ├── backgrounds-reverse-h1-effect.html ├── backgrounds-two-tone.html ├── box-shadow-blur-and-spread.html ├── box-shadow-incomplete.html ├── box-shadow-inset.html ├── box-shadow-simple.html ├── i │ ├── ISO_7010_W003.svg │ ├── arrowhead.png │ ├── bg01.png │ ├── bg02.gif │ ├── bg03.jpg │ ├── bg23.gif │ ├── box-green.gif │ ├── box-red.gif │ ├── chrome.jpg │ ├── email-icon.png │ ├── email.gif │ ├── focus-hi.png │ ├── focus-hi.svg │ ├── focus.png │ ├── frame-sq.png │ ├── grid1.gif │ ├── grid2.gif │ ├── msword-icon.png │ ├── pdf-icon.png │ ├── radio-warn-fade.png │ ├── radio-warn.png │ ├── stars.gif │ ├── triplebor.gif │ ├── wavybord.gif │ ├── yinyang-200.png │ ├── yinyang-bold.png │ ├── yinyang-sm-x2.png │ ├── yinyang-sm.png │ └── yinyang.png └── index.html ├── 09-gradients ├── conic-gradients-different-start-angles.html ├── conic-gradients-hue-wheels.html ├── conic-gradients-rotated-and-offset.html ├── conic-gradients-simple.html ├── conic-gradients-smoothed-triple.html ├── conic-gradients-three-variants.html ├── gradient-color-hints-curve.html ├── gradient-color-hints-default.html ├── gradient-color-hints-various.html ├── i │ ├── ISO_7010_W003.svg │ ├── arrowhead.png │ ├── bg01.png │ ├── bg02.gif │ ├── bg03.jpg │ ├── bg23.gif │ ├── box-green.gif │ ├── box-red.gif │ ├── chrome.jpg │ ├── email-icon.png │ ├── email.gif │ ├── focus-hi.png │ ├── focus-hi.svg │ ├── focus.png │ ├── frame-sq.png │ ├── grid1.gif │ ├── grid2.gif │ ├── msword-icon.png │ ├── pdf-icon.png │ ├── radio-warn-fade.png │ ├── radio-warn.png │ ├── stars.gif │ ├── triplebor.gif │ ├── wavybord.gif │ ├── yinyang-200.png │ ├── yinyang-bold.png │ ├── yinyang-sm-x2.png │ ├── yinyang-sm.png │ └── yinyang.png ├── index.html ├── linear-gradients-clipping-too-far.html ├── linear-gradients-clipping-too-soon.html ├── linear-gradients-coincident-color-stops.html ├── linear-gradients-color-stops-out-of-place.html ├── linear-gradients-double-rainbow-stops.html ├── linear-gradients-every-10pct.html ├── linear-gradients-every-25px.html ├── linear-gradients-fade-white-v-transparent.html ├── linear-gradients-gradientline-calculating-colors.html ├── linear-gradients-gradientline-perpendicular-lines-multi.html ├── linear-gradients-gradientline-perpendicular-lines-stops-past-endpoints.html ├── linear-gradients-gradientline-perpendicular-lines.html ├── linear-gradients-gradientline-placement-and-sizing.html ├── linear-gradients-hard-stop-stripes.html ├── linear-gradients-quadrant-side-effects.html ├── linear-gradients-quadrant-top-right.html ├── linear-gradients-simple-progression.html ├── linear-gradients-simple.html ├── linear-gradients-solid-color-sized.html ├── linear-gradients-tablecloth-regular.html ├── manipulating-gradients-play-the-music.html ├── manipulating-gradients-tiled-radials.html ├── manipulating-gradients-two-folds.html ├── radial-gradients-changing-center-position-with-size.html ├── radial-gradients-changing-center-position.html ├── radial-gradients-color-stop-added.html ├── radial-gradients-color-stop-beyond-endpoint.html ├── radial-gradients-color-stop-negative.html ├── radial-gradients-degenerate-tall-ellipses.html ├── radial-gradients-degenerate-zerowidth.html ├── radial-gradients-keywords-multi.html ├── radial-gradients-pct-multi.html ├── radial-gradients-ray-and-ellipses.html ├── radial-gradients-repeating.html ├── radial-gradients-setting-endpoint.html ├── radial-gradients-simple-multi.html ├── radial-gradients-simple-two.html ├── repeating-gradients-linear-tiled-w-backgroundrepeat.html ├── repeating-gradients-no-hard-resets.html └── repeating-gradients-yellowstripes.html ├── 10-floating-and-positioning ├── abspos-auto-edge-static-top.html ├── abspos-auto-edge-static.html ├── abspos-containing-block-root-element.html ├── abspos-containing-block.html ├── abspos-height-offset-properties.html ├── abspos-horizontal-center.html ├── abspos-ignoring-margin-right.html ├── abspos-ignoring-right.html ├── abspos-relative-containing-block.html ├── abspos-replaced-element.html ├── abspos-shrink-to-fit.html ├── abspos-stretching-replaced-elements.html ├── abspos-vertical-auto-margins.html ├── abspos-vertical-layout-behavior.html ├── c │ └── floats-baseline.css ├── clear-element-cleared.html ├── clear-margin-effects.html ├── clear-not-at-all.html ├── clear-on-both-sides.html ├── clear-to-left-not-right.html ├── fixedpos-emulating-frames.html ├── floating-and-backgrounds.html ├── floating-bgs-slide-under.html ├── floating-expected-behavior.html ├── floating-image.html ├── floating-images-with-margins.html ├── floating-overlapping-floats.html ├── floating-paragraph.html ├── floating-wider-than-parents.html ├── floating-with-negative-margins-details.html ├── floating-with-negative-margins.html ├── i │ ├── ClipArtMoon.jpg │ ├── ClipArtMoon.psd │ ├── Untitled-1.psd │ ├── arrow-down.png │ ├── arrow-left.png │ ├── arrow-right.png │ ├── arrow-up.png │ ├── b4.gif │ ├── boxer.gif │ ├── chrome.jpg │ ├── d3.gif │ ├── d5.gif │ ├── down-arrow.png │ ├── fillrule-evenodd.svg │ ├── fillrule-nonzero.svg │ ├── fillrule-star-evenodd.svg │ ├── fillrule-star-nonzero.svg │ ├── fillrule-star.png │ ├── five.gif │ ├── four.gif │ ├── frown.gif │ ├── moon.png │ ├── one.gif │ ├── sit-gradient.png │ ├── star-evenodd.svg │ ├── star-nonzero.svg │ ├── star.gif │ ├── star.svg │ ├── stripe.gif │ ├── tall1.gif │ ├── three.gif │ ├── two.gif │ └── wide1.gif ├── index.html ├── offset-props-lower-right.html ├── offset-props-outside-containing-block.html ├── relativepos-overlap.html ├── relativepos.html ├── relativepos2.html ├── stickypos-every-side.html ├── stickypos-from-the-top.html ├── stickypos-header-pileup.html ├── stickypos-rectangle.html ├── stickypos-to-the-bottom.html ├── stickypos-to-the-top.html ├── stickypos.html ├── width-height-minmax.html ├── width-height-only-offset.html ├── width-height-partially-outside.html ├── z-index-conceptual-view.html ├── z-index-elements-overlap.html ├── z-index-how-elements-stacked.html └── z-index-local-stacking-contexts.html ├── 11-flexbox ├── align-content-overflow.html ├── align-content.html ├── align-items-values-rows-cols.html ├── baseline-alignments.html ├── c │ └── examples.css ├── changing-flex-direction-change-layout.html ├── changing-flex-item-alignment.html ├── changing-order-changes-visual-order.html ├── effect-of-margins-cross-axis.html ├── flex-basis-auto-basis-and-widths.html ├── flex-basis-content-basis.html ├── flex-basis-default-sizing.html ├── flex-basis-fit-content.html ├── flex-basis-max-content.html ├── flex-basis-min-content.html ├── flex-basis-percentage-main-axis.html ├── flex-basis-percentage.html ├── flex-basis-width-vs-length.html ├── flex-direction-four-values.html ├── flex-direction-rtl-four-values.html ├── flex-direction-ttb-four-values.html ├── flex-flow-empty-space.html ├── flex-flow-stacking-col.html ├── flex-flow-stacking-row.html ├── flex-flow-unwrapped-row.html ├── flex-grow-auto-and-zero.html ├── flex-grow-differences-between-flex-and-flex-grow.html ├── flex-grow-mixed-width-and-factors.html ├── flex-grow-sizing-when-using-shorthand.html ├── flex-grow-variety.html ├── flex-items-dont-grow-nor-shrink.html ├── flex-items-in-aside.html ├── flex-items-shrink-and-grow.html ├── flex-items-shrink-dont-grow.html ├── flex-items-within-container.html ├── flex-shrink-homepage.html ├── flex-shrink-proportionally-relative-to-factor-and-content.html ├── flex-shrink-proportionally-relative-to-factor.html ├── flex-shrink-variety.html ├── flex-shrink-with-image.html ├── flex-using-single-numeric-value.html ├── flex-wrap-container-overflow-with-min-width.html ├── flex-wrap-three-values.html ├── flex-wrap-zero-min-width-flex-items.html ├── gap-shorthand.html ├── gaps-between-items.html ├── gaps-between-rows.html ├── gaps-percentage.html ├── gaps-plus-margins.html ├── home-page-layout-row-and-column.html ├── i │ ├── arrow-down-green.svg │ ├── arrow-down-red.svg │ ├── arrow-down.svg │ ├── arrow-left-blue.svg │ ├── arrow-left-green.svg │ ├── arrow-left.svg │ ├── arrow-right-blue.svg │ ├── arrow-right-green.svg │ ├── arrow-right.svg │ ├── arrow-up-green.svg │ ├── arrow-up.svg │ ├── chrome.jpg │ ├── unicorn1.jpg │ ├── unicorn2.jpg │ ├── unicorn3.jpg │ ├── unicorn4.jpg │ └── unicorn5.jpg ├── index.html ├── justify-content-center.html ├── justify-content-end.html ├── justify-content-i18n-center.html ├── justify-content-i18n.html ├── justify-content-space-around.html ├── justify-content-space-between.html ├── justify-content-space-evenly.html ├── justify-content-start.html ├── justify-content-values.html ├── order01.html ├── order02.html ├── power-grid-layout.html ├── safe-vs-unsafe-alignment.html ├── simple-tabbed-navigation.html ├── two-kinds-of-flex-containers.html └── widget-with-components-vertically-centered.html ├── 12-grid-layout ├── attaching-implicit-grid-lines.html ├── attaching-named-grid-lines-another.html ├── attaching-named-grid-lines.html ├── attaching-spanning-grid-lines.html ├── attaching-to-grid-lines.html ├── auto-fill-and-auto-fit.html ├── auto-fill-columns-with-fixed.html ├── auto-fill-rows-three-heights.html ├── auto-lines-previous-figure.html ├── auto-lines-with-without-column.html ├── auto-lines-with-without-row.html ├── c │ ├── grid-baseline.css │ └── subgrid-baseline.css ├── content-aware-fit-content-wide.html ├── content-aware-fit-content.html ├── content-aware-sizing-captions.html ├── content-aware-sizing.html ├── content-aware-with-without-minmax.html ├── grid-alignment-distribution-block.html ├── grid-alignment-distribution-inline.html ├── grid-alignment-justification-centered.html ├── grid-alignment-justify-items-both.html ├── grid-alignment-self.html ├── grid-and-box-model-abspos-auto.html ├── grid-and-box-model-abspos.html ├── grid-and-box-model-auto-margins.html ├── grid-and-box-model-margins.html ├── grid-and-box-model-various-auto-margins.html ├── grid-area-assigning-elements.html ├── grid-area-assigning-to-lines.html ├── grid-area-implict-areas-made-explicit.html ├── grid-area-implict-lines-made-explicit.html ├── grid-areas-named-areas-more-tracks.html ├── grid-areas-named-areas-sized.html ├── grid-areas-simple-set-grid-inspector.html ├── grid-areas-simple-set.html ├── grid-areas-unnamed-areas.html ├── grid-components.html ├── grid-fixed-adapting-to-container.html ├── grid-fixed-creating-grid.html ├── grid-fixed-exceeding-container.html ├── grid-fixed-line-placement.html ├── grid-fixed-name-placement.html ├── grid-flexible-center-column.html ├── grid-flexible-column-sizing.html ├── grid-flexible-four-columns.html ├── grid-flexible-minmax.html ├── grid-flow-column.html ├── grid-flow-dense.html ├── grid-flow-explicit-size.html ├── grid-flow-images-space.html ├── grid-flow-images.html ├── grid-flow-patterns.html ├── grid-flow-row.html ├── grid-items.html ├── grid-line-numbers-names.html ├── grid-order-sequence.html ├── grid-order.html ├── grid-overlap-items.html ├── grid-overlap-sidebar-footer.html ├── grid-overlap-source-order.html ├── grid-shorthand.html ├── grids-and-floats.html ├── grids-and-inline-grids.html ├── grids-and-margin-collapsing.html ├── i │ ├── arrow-down.png │ ├── arrow-down.svg │ ├── arrow-left.png │ ├── arrow-left.svg │ ├── arrow-right.png │ ├── arrow-right.svg │ ├── arrow-up.png │ ├── arrow-up.svg │ ├── chrome.jpg │ ├── conhugeco.png │ ├── warning.svg │ ├── x-box.png │ └── yinyang.png ├── implicit-grid-lines-tracks.html ├── implicit-grid-named-lines-tracks.html ├── index.html ├── repeat-gridlines-named-lines.html ├── repeat-gridlines-track-pattern.html ├── subgrid-footer-own-rows.html ├── subgrid-footer.html ├── subgrid-gallery-cards-rows-repeat.html ├── subgrid-gallery-cards-rows.html ├── subgrid-gallery-cards.html ├── subgrid-gallery-stretch.html ├── subgrid-gallery.html ├── subgrid-grid-gaps.html ├── subgrid-header.html ├── subgrid-initial-setup.html └── subgrid-main-named-lines.html ├── 13-table-layout-in-css ├── alignment-baseline.html ├── alignment-vertical.html ├── anon-obj-row.html ├── border-spacing-cells-table-annotated.html ├── border-spacing-collapsed-unusual.html ├── borders-separated.html ├── c │ └── baseline.css ├── captions-styling.html ├── formatting-grid-cells-basis.html ├── i │ ├── arrow-down.svg │ ├── arrow-left.svg │ ├── arrow-right.svg │ └── arrow-up.svg ├── index.html ├── layers-formatting-schematic.html ├── layers-seeing-background.html ├── table-layout-automatic.html └── table-layout-fixed.html ├── 14-fonts ├── f │ ├── SwitzeraADF-Bold.otf │ ├── SwitzeraADF-BoldCond.otf │ ├── SwitzeraADF-BoldCondItalic.otf │ ├── SwitzeraADF-BoldExt.otf │ ├── SwitzeraADF-BoldExtItalic.otf │ ├── SwitzeraADF-BoldItalic.otf │ ├── SwitzeraADF-Cond.otf │ ├── SwitzeraADF-CondItalic.otf │ ├── SwitzeraADF-DemiBold.otf │ ├── SwitzeraADF-DemiBoldItalic.otf │ ├── SwitzeraADF-DmBdCond.otf │ ├── SwitzeraADF-DmBdCondItalic.otf │ ├── SwitzeraADF-Ext.otf │ ├── SwitzeraADF-ExtItalic.otf │ ├── SwitzeraADF-ExtraBold.otf │ ├── SwitzeraADF-ExtraBoldItalic.otf │ ├── SwitzeraADF-Italic.otf │ ├── SwitzeraADF-Light.otf │ ├── SwitzeraADF-LightCond.otf │ ├── SwitzeraADF-LightCondItalic.otf │ ├── SwitzeraADF-LightItalic.otf │ ├── SwitzeraADF-Medium.otf │ ├── SwitzeraADF-MediumItalic.otf │ └── SwitzeraADF-Regular.otf ├── font-adding-line-height.html ├── font-face-downloaded.html ├── font-face-variety-of-faces.html ├── font-family-various-families.html ├── font-necessity-of-size-and-family.html ├── font-shorthand-changes.html ├── font-size-absolute-sizes.html ├── font-size-adjust-times.html ├── font-size-adjust-verdana-times.html ├── font-size-issues-of-inheritance.html ├── font-size-percentages.html ├── font-size-relative-sizing.html ├── font-stretch-declared-faces.html ├── font-stretch.html ├── font-style-declared-faces.html ├── font-style-italic-oblique.html ├── font-style-more-styles.html ├── font-typical-rules.html ├── font-variant-caps.html ├── font-variant-numeric.html ├── font-variant-small-caps.html ├── font-weight-declared-faces.html ├── font-weight-inherited.html ├── font-weight-trying-to-be-bolder.html └── index.html ├── 15-text-properties ├── ch06.css ├── hyphens-results.html ├── i │ ├── dot.gif │ ├── short.gif │ ├── star.gif │ └── tall.gif ├── index.html ├── letter-spacing-inherited.html ├── letter-spacing-various.html ├── line-height-simple-calculations.html ├── line-height-small-large-slight.html ├── line-heights-unitless-factors.html ├── overflow-wrap.html ├── tab-size.html ├── text-align-different-last-lines.html ├── text-align-justify.html ├── text-align-lrc-vertical-writing.html ├── text-align-selected-behaviors.html ├── text-align-start-end.html ├── text-combine-upright.html ├── text-decoration-color-consistency.html ├── text-decoration-correct-although-strange.html ├── text-decoration-ink-skipping-results.html ├── text-decoration-overcoming-default-behavior-underlines.html ├── text-decoration-style-various.html ├── text-decoration-thickness-various.html ├── text-decoration-various.html ├── text-emphasis-various.html ├── text-indent-percentages.html ├── text-indent.html ├── text-orientation.html ├── text-rendering-different-optimizations.html ├── text-shadow-dropping-all-over.html ├── text-shadow-simple.html ├── text-transform-various.html ├── text-underline-offset-various.html ├── vertical-align-baseline-image.html ├── vertical-align-percentages.html ├── vertical-align-precise-details-middle.html ├── vertical-align-taller-line.html ├── vertical-align-text-top-and-bottom.html ├── vertical-align-top-and-bottom.html ├── vertical-alignment-superscript-subscript.html ├── white-space-honoring.html ├── white-space-suppressing-line-wrapping.html ├── white-space-three-ways.html ├── word-break-alteration.html ├── word-spacing-between-words.html ├── word-spacing-really-wide.html ├── writing-mode-vertical.html └── writing-mode.html ├── 16-lists-and-generated-content ├── counter-patterns-additive-romandice.html ├── counter-patterns-alphabetic.html ├── counter-patterns-cyclic-thisisfine.html ├── counter-patterns-cyclic-wings.html ├── counter-patterns-cyclic.html ├── counter-patterns-extends-fourhex.html ├── counter-patterns-fixed-tooclose.html ├── counter-patterns-fixed.html ├── counter-patterns-numeric-negative.html ├── counter-patterns-numeric-negativepad.html ├── counter-patterns-numeric-pad.html ├── counter-patterns-numeric-three-systems.html ├── counter-patterns-simple.html ├── counter-patterns-symbolic-long.html ├── counter-patterns-symbolic-ranged.html ├── counter-patterns-symbolic.html ├── counters-counting-headings-changed.html ├── counters-counting-headings.html ├── counters-counting-items.html ├── counters-scope-nested.html ├── generated-content-attr-missing.html ├── generated-content-attr-urls.html ├── generated-content-block.html ├── generated-content-icons.html ├── generated-content-inline.html ├── generated-content-placement.html ├── generated-content-quotes-nested.html ├── generated-content-quotes.html ├── generated-content-strings-newlines.html ├── generated-content-strings-verbatim.html ├── generated-content-text.html ├── i │ ├── big-ohio.gif │ ├── east.svg │ ├── money.svg │ ├── north.svg │ ├── ohio.gif │ ├── pdf-doc-icon.gif │ └── west.svg ├── index.html ├── list-layout-largemarkers.html ├── list-layout-padding-v-margin.html ├── list-layout-threeitems-listborder.html ├── list-layout-threeitems-markers.html ├── list-layout-threeitems.html ├── list-style-image-bigmarkers.html ├── list-style-image-gradients.html ├── list-style-image-sublists.html ├── list-style-image.html ├── list-style-position.html ├── list-style-type-markersoff.html ├── list-style-type-stringmarkers.html ├── list-style-type.html ├── list-style.html └── marker-pseudo-styling-examples.html ├── 17-transforms ├── backface-visibility-photo-information.html ├── backface-visibility.html ├── difference-two-axes-3d-axis.html ├── different-transform-lists.html ├── effects-varying-perspective-values.html ├── elemental-frames-reference.html ├── i │ ├── arrowhead.png │ ├── box-axes.png │ ├── box-salmon.png │ ├── box.gif │ ├── box.png │ ├── compass.png │ ├── fish-head.png │ ├── focus.png │ ├── frame-sq.png │ ├── rotate.png │ ├── salmon.png │ ├── salmon_hi.tif │ ├── ticks.gif │ └── translate.png ├── index.html ├── matrix-transformed-and-equivalent.html ├── matrix3d-transformed-and-equivalent.html ├── overwriting-modifying-transforms.html ├── perspective-basic-ruler.html ├── perspective-origin-rulers.html ├── perspective-shared-vs-individual.html ├── rotation-3d-vector-determined.html ├── rotations-3d-vectors.html ├── rotations-around-three-axes.html ├── rotations-three-axes.html ├── rotations-xy-plane.html ├── scaled-elements.html ├── skewed-elements.html ├── skewing-along-xy-axes.html ├── spherical-coordinate-system.html ├── three-cartesian-axes.html ├── transform-box.svg ├── transform-origin-skew-and-scale.html ├── transform-origin-various-calculations.html ├── transform-origin-various-rotations.html ├── transform-style-flat-versus-3d-preserve.html ├── transform-style-flat.html ├── transformed-div-element.html ├── translating-three-dimensions.html └── translating-two-dimensions.html ├── 18-transitions ├── cardflip.html ├── contenteditable.html ├── dd_menu_static.html ├── i │ ├── psy.png │ └── step-timing-functions.svg ├── index.html ├── input-appearance-valid-invalid-focus.html ├── menus-initial-midtransition-and-final-state.html ├── menus-very-slow-transition.html ├── sprite.html ├── step-timing-functions.html ├── transition-delay-negative.html ├── transition-duration-revert-difference.html ├── transition-reverse-test.html ├── transition-reverse.html └── transitionend.html ├── 19-animation ├── 02_W.html ├── animation-iteration-delay.html ├── animation-iteration-delay1.html ├── animation-iteration-delay2.html ├── animation-iteration-delay3.html ├── animation-iteration-delay4.html ├── animationchain.html ├── animationchain2.html ├── animationchain2a.html ├── animationorder.html ├── animationorder2.html ├── appendRule.html ├── badnames.html ├── ball1.html ├── ball3.html ├── ball4.html ├── ball6.html ├── ball_animation_delay_negative.html ├── c │ └── dancer.png ├── cubicbezierprint.html ├── cubicbezierprint2.html ├── duration_broken_value.html ├── events.html ├── events2.html ├── fortypercent.html ├── halfiterationforwards.html ├── index.html ├── moveme.html ├── name.html ├── nameaddedlater.html ├── no0or100.html ├── nomidpoint.html ├── odditeration.html ├── round2.html ├── snowflake.html ├── snowflake2.html ├── sprite.html └── sprite2.html ├── 20-filters-blending-clipping-masking ├── blending-backgrounds-backdrops.html ├── blending-backgrounds-color-transparent.html ├── blending-backgrounds-threebgs.html ├── blending-elements-color-dodge-burn.html ├── blending-elements-dark-light-diff-excl.html ├── blending-elements-hard-soft-light.html ├── blending-elements-hue-sat-lum-color.html ├── blending-elements-multiply-screen-overlay.html ├── blending-elements-normal.html ├── blending-isolation.html ├── clipping-boxes-ellipse.html ├── clipping-boxes.html ├── clipping-compare.html ├── clipping-rule-compare.html ├── clipping-shapes.html ├── clipping-svg-path.html ├── filter-basic-effects-dropshadows.html ├── filter-basic-effects.html ├── filter-bcs-effects.html ├── filter-color-effects.html ├── filter-svg-effects.html ├── g │ ├── filter.svg │ └── shapes.svg ├── i │ ├── Bato_(bugaku_mask).png │ ├── Beijing_opera_mask.jpg │ ├── Britannica_Shakespeare_Death-Mask.jpg │ ├── Chenonceau_Kitchen_Stove.jpg │ ├── Compass_Card.png │ ├── Compass_masked.png │ ├── Edit-cut.svg │ ├── Hungary_road_sign_I-025.svg │ ├── ISO_7010_M017.svg │ ├── Kitchen-Dough-Blender-masked.png │ ├── Kitchen-Dough-Blender.jpg │ ├── Korean_mask_of_yangban_(aristocrat).JPG │ ├── Louis_Moe_-_konvoluttenengra00gjel_0073_A_-_hairy_creature_stylized_scissors_(21673071451).jpg │ ├── Map_symbol_theatre_02.svg │ ├── Mascara_Blue_Demon.svg │ ├── Mask-IMG_4251.JPG │ ├── Mask_handicraft_masaya_nicaragua.jpg │ ├── Nozyce_stajenne-do_strzyzenia_grzyw_konskich.jpg │ ├── Orange-scissors.svg │ ├── Scissors_icon_black.svg │ ├── Scissors_silhouette.svg │ ├── Terracotta_comedy_mask_agora_museum_athens.jpg │ ├── Theatre_Logo_Mask.jpg │ ├── Wiener_Gewerbewappen_Kleidermacher.jpg │ ├── arrow-down.png │ ├── arrow-left.png │ ├── arrow-right.png │ ├── arrow-up.png │ ├── arrow.svg │ ├── chrome.jpg │ ├── circle.svg │ ├── circles-filled.png │ ├── circles-filled.svg │ ├── circles.png │ ├── circles.svg │ ├── cloud-stroke.svg │ ├── cloud.svg │ ├── diamond-square.svg │ ├── diamond.html │ ├── diamond.png │ ├── hatchgrid.svg │ ├── hexlike.svg │ ├── mask.JPG │ ├── mbm-img.png │ ├── moon.png │ ├── sit-gradient.png │ ├── square.svg │ ├── star-evenodd.svg │ ├── star-nonzero.svg │ ├── star.svg │ ├── theatre-masks.svg │ └── triangle.svg ├── index.html ├── mask-border-fill.html ├── mask-border-repeat.html ├── mask-border-slicing-patterns.html ├── masks-clip.html ├── masks-composite-diagram.html ├── masks-composite-multiple.html ├── masks-image-listitems.html ├── masks-image-simple.html ├── masks-image-variety.html ├── masks-mode.html ├── masks-multiple.html ├── masks-origin.html ├── masks-position.html ├── masks-repeat.html ├── masks-sizing.html ├── object-fit-scale-down.html ├── object-fit.html ├── object-position-cover.html ├── object-position.html ├── shapes-circle-close-far-edges.html ├── shapes-circle-rect-clipped.html ├── shapes-circle-rect.html ├── shapes-circle-small.html ├── shapes-circle.html ├── shapes-ellipse-percents.html ├── shapes-ellipse.html ├── shapes-image-float-shape.html ├── shapes-image-threshold.html ├── shapes-inset-boxes.html ├── shapes-inset-rounded.html ├── shapes-margins-additional.html ├── shapes-margins.html ├── shapes-polygon-clip.html ├── shapes-polygon-fill.html ├── shapes-polygon.html ├── shapes-right-floated-image-shape.html ├── shapes-shape-boxes.html └── size-containment.html ├── 21-css-at-rules ├── container-query-units.html ├── i │ ├── arrow-down.svg │ ├── arrow-left.svg │ ├── arrow-right.svg │ └── arrow-up.svg ├── index.html ├── mediaqueries-logical-operators.html ├── pagebreaking-breaks.html ├── pagebreaking-potential.html ├── pagesize-landscape.html ├── pagesize-page-box.html └── widows-counting.html ├── LICENSE ├── README.md ├── index.html └── styles ├── indices.css ├── play-icon-round.svg ├── style-edit.css └── toc.css /01-css-fundamentals/block-and-inline-level-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Block- and inline-level elements in an HTML document 6 | 9 | 10 | 11 | 12 |

h1 (block)

13 | 14 |

15 | This paragraph (p) element is a block-level element. The strongly emphasized text is an inline element, and will line-wrap when necessary. The content outside of inline elements is actually part of the block element. The content inside inline elements such as this one belong to the inline element. 16 |

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /01-css-fundamentals/c/bigtext.css: -------------------------------------------------------------------------------- 1 | body {background: white; font: x-large serif;} 2 | h1 {color: blue;} 3 | a:link {color: navy; text-decoration: underline;} 4 | p {margin-left: 5%; margin-right: 10%;} 5 | p:first-line {font-size: 120%; font-weight: bold; 6 | color: black;} 7 | p.footnote {font-size: smaller;} 8 | blockquote {font-style: italic;} 9 | blockquote em {font-style: normal;} 10 | pre, code, tt {color: gray; font-family: monospace;} -------------------------------------------------------------------------------- /01-css-fundamentals/c/sheet1.css: -------------------------------------------------------------------------------- 1 | body {background: white; font: medium serif;} 2 | h1 {color: blue;} 3 | a:link {color: navy; text-decoration: underline;} 4 | p {margin-left: 5%; margin-right: 10%;} 5 | p:first-line {font-size: 120%; font-weight: bold; 6 | color: black;} 7 | p.footnote {font-size: smaller;} 8 | blockquote {font-style: italic;} 9 | blockquote em {font-style: normal;} 10 | pre, code, tt {color: gray; font-family: monospace;} -------------------------------------------------------------------------------- /01-css-fundamentals/c/sheet2.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 1.8em; 3 | border-bottom: 1px dotted gray; 4 | } 5 | h1:first-letter { 6 | font-size: 125%; 7 | } 8 | -------------------------------------------------------------------------------- /01-css-fundamentals/c/zany.css: -------------------------------------------------------------------------------- 1 | body {background: white; font: medium serif;} 2 | h1 {color: goldenrod;} 3 | a:link {color: lime; text-decoration: underline;} 4 | p {margin-left: 5%; margin-right: 10%;} 5 | p:first-line {font-size: 120%; font-weight: bold; 6 | color: teal;} 7 | p.footnote {font-size: smaller;} 8 | blockquote {font-style: italic;} 9 | blockquote em {font-style: normal;} 10 | pre, code, tt {color: rebeccapurple; font-family: monospace;} -------------------------------------------------------------------------------- /01-css-fundamentals/i/arrow1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/01-css-fundamentals/i/arrow1.png -------------------------------------------------------------------------------- /01-css-fundamentals/i/arrow2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/01-css-fundamentals/i/arrow2.png -------------------------------------------------------------------------------- /01-css-fundamentals/xml-default-display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Default display of an XML document 6 | 9 | 10 | 11 | 12 | 13 | The Victorian Internet 14 | The Remarkable Story of the Telegraph and the Nineteenth Century's On-Line Pioneers 15 | Tom Standage 16 | Bloomsbury Pub Plc USA 17 | February 25, 2014 18 | 9781620405925 19 | 162040592X 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /02-selectors/i/W3C_logo_big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/02-selectors/i/W3C_logo_big.jpg -------------------------------------------------------------------------------- /02-selectors/i/W3C_logo_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/02-selectors/i/W3C_logo_small.jpg -------------------------------------------------------------------------------- /02-selectors/i/checkmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/02-selectors/i/checkmark.png -------------------------------------------------------------------------------- /02-selectors/i/target.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/02-selectors/i/target.gif -------------------------------------------------------------------------------- /02-selectors/i/w3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/02-selectors/i/w3.png -------------------------------------------------------------------------------- /02-selectors/i/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/02-selectors/i/warning.png -------------------------------------------------------------------------------- /02-selectors/selecting-adjacent-siblings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting adjacent siblings 6 | 9 | 10 | 11 | 12 |
13 |
    14 |
  1. List item 1
    2. 15 |
  2. List item 1
    3. 16 |
  3. List item 1
    4. 17 |
18 | This is some text that is part of the 'div'. 19 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /02-selectors/selecting-element-based-on-context.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Selecting an element based on its context 7 | 10 | 11 | 12 | 13 |

Meerkat Central

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /02-selectors/selecting-elements-based-on-attributes-and-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements based on attributes and their values 6 | 9 | 10 | 11 | 12 | W3C
13 | Standards Info
15 | confused.link 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /02-selectors/selecting-elements-based-on-attributes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements based on their attributes 6 | 9 | 10 | 11 | 12 |

Hello

13 |

Serenity

14 |

Fooling

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /02-selectors/selecting-elements-based-on-portions-of-attribute-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements based on portions of attribute values 6 | 10 | 11 | 12 | 13 |
Mercury
14 |
Venus
15 |
Earth
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /02-selectors/selecting-elements-based-on-substrings-that-begin-attribute-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements based on substrings that begin attribute values 6 | 11 | 12 | 13 | 14 | W3C home page 15 | My banking login screen 16 | O’Reilly & Associates home page 17 | Send mail to me@example.com 18 | Wikipedia (English) 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /02-selectors/selecting-elements-based-on-substrings-that-end-attribute-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements based on substrings that end attribute values 6 | 10 | 11 | 12 | 13 | Home page 14 | FAQ 15 | Printable instructions 16 | Detailed warranty 17 | Contact us 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /02-selectors/selecting-elements-based-on-substrings-within-attribute-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements based on substrings within attribute values 6 | 10 | 11 | 12 | 13 |
Mercury
14 |
Venus
15 |
Earth
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /02-selectors/very-specific-descendant-selector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | A very specific descendant selector 7 | 10 | 11 | 12 | 13 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/first-letter-pseudo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The ::first-letter pseudo-element in action 6 | 9 | 10 | 11 | 12 |

This is an h2 element

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/first-line-pseudo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The ::first-line pseudo-element in action 6 | 12 | 13 | 14 | 15 |

16 | This is a paragraph of text that has only 17 | one stylesheet applied to it. That style 18 | causes the first line to be big and purple. 19 | No other line will have those styles applied. 20 |

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/highlighting-form-element-focus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Highlighting a form element that has focus 6 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/W3C_logo_big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/W3C_logo_big.jpg -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/W3C_logo_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/W3C_logo_small.jpg -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/checkmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/checkmark.png -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/masthead.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/masthead.jpg -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/redbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/redbox.gif -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/short.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/short.gif -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/target.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/target.gif -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/w3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/w3.png -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/i/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/03-pseudo-class-and-element-selectors/i/warning.png -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/inserting-content-before-element.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inserting content before an element 6 | 9 | 10 | 11 | 12 |

This is an h2 element

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/selecting-elements-using-focus-within.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting elements using :focus-within 6 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/selecting-images-only-children-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting images that are only children inside links 6 | 11 | 12 | 13 | 14 | W3C 15 | W3C 16 | A link to the web site 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/selecting-images-only-children.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting images that are only children inside links 6 | 11 | 12 | 13 | 14 | W3C 15 | The W3C 16 | The W3C 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/selecting-images-only-sibling-of-type.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selecting images that are the only sibling of their type 6 | 11 | 12 | 13 | 14 | •W3C 15 | •W3C 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/selection-styling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Selection styling 7 | 12 | 13 | 14 | 15 |

This is a paragraph with some text that can be selected, one of two.

16 |

This is a paragraph with some text that can be selected, two of two.

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-checked-and-indeterminate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling checked and indeterminate UI elements 6 | 10 | 11 | 12 | 13 | 14 |
Name
Title
E-mail
15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-enabled-and-disabled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling enabled and disabled UI elements 6 | 10 | 11 | 12 | 13 | 14 |
Rating 18 | 1 19 | 2 20 | 3 21 | 4 22 | 5 23 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-every-third-child.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling every third list item 6 | 9 | 10 | 11 | 12 |
13 |

These are the necessary steps:

14 | 22 |

23 | Do not push the brake at the same time as the accelerator. 24 |

25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-first-children.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling first children 6 | 10 | 11 | 12 | 13 |
14 |

These are the necessary steps:

15 | 20 |

21 | Do not push the brake at the same time as the accelerator. 22 |

23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-last-children.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling last children 6 | 10 | 11 | 12 | 13 |
14 |

These are the necessary steps:

15 | 20 |

21 | Do not push the brake at the same time as the accelerator. 22 |

23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-second-children.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling second children 6 | 10 | 11 | 12 | 13 |
14 |

These are the necessary steps:

15 | 20 |

21 | Do not push the brake at the same time as the accelerator. 22 |

23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-the-button-file-input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling the button in a file submission input 6 | 13 | 14 | 15 | 16 | 17 | Select file from computer 18 | 19 | 20 | Select file from computer 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-the-root-element.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling the root element 6 | 10 | 11 | 12 | 13 | This is the body of the document. 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/styling-valid-and-invalid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styling valid and invalid UI elements 6 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/using-has.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Using :has() to select elements 6 | 15 | 16 | 17 | 18 |
19 | 20 |
21 |
22 |

No image here!

23 |
24 |
25 |

This has text and an image. 26 |

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /03-pseudo-class-and-element-selectors/using-matches-any.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Using :matches-any to select elements 7 | 10 | 11 | 12 | 13 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /04-specificity-and-the-cascade/directly-assigning-styles.html: -------------------------------------------------------------------------------- 1 | Directly assigning styles to the relevant elements
Home | Products | Services | Contact | About
-------------------------------------------------------------------------------- /04-specificity-and-the-cascade/higher-specificity-wins.html: -------------------------------------------------------------------------------- 1 | Higher specificity wins out over lower specificity

Well, hello there!

-------------------------------------------------------------------------------- /04-specificity-and-the-cascade/important-rules-win.html: -------------------------------------------------------------------------------- 1 | Important rules always win

NightWing

-------------------------------------------------------------------------------- /04-specificity-and-the-cascade/inheritance-of-styles.html: -------------------------------------------------------------------------------- 1 | Inheritance of styles
  1. Strap on some fins
  2. Adjust your mask
  3. Dive in!
-------------------------------------------------------------------------------- /04-specificity-and-the-cascade/zero-specificity-beats-no-specificity.html: -------------------------------------------------------------------------------- 1 | Zero specificity defeats no specificity

Meerkat Central

Welcome to the best place on the Web for meerkat information!

-------------------------------------------------------------------------------- /05-values-and-units/custom-value-scoping.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scoping custom values to certain contexts 6 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |

Heading 1

24 |

Main text.

25 | 26 | 30 | 31 |

Heading 1

32 |

Main text.

33 | 34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /05-values-and-units/custom-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Using custom values to color headings 6 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |

Heading 1

22 |

Main text.

23 |

Heading 2

24 |

More text.

25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /05-values-and-units/declared-color-vs-default-color.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Declared color versus default color 7 | 11 | 12 | 13 | 14 | 15 |

This paragraph has a gray foreground.

16 |

This paragraph has the default foreground.

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /05-values-and-units/different-colors-for-different-elements.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Different colors for different elements 7 | 15 | 16 | 17 | 18 |

19 | This is a paragraph that is, for the most part, utterly undistinguished—but its emphasized text is quite another story altogether. 20 |

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /05-values-and-units/ems-vs-rems.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ems versus rems 5 | 8 | 9 | 10 | 11 |

This paragraph has the same font size as the root element thanks to inheritance.

12 |
13 |

This paragraph has the same font size as its parent element.

14 |

This paragraph has the same font size as the root element.

15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /05-values-and-units/i/box-red.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/05-values-and-units/i/box-red.gif -------------------------------------------------------------------------------- /05-values-and-units/i/grid-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/05-values-and-units/i/grid-black.png -------------------------------------------------------------------------------- /05-values-and-units/i/hsl-hues-lightness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/05-values-and-units/i/hsl-hues-lightness.png -------------------------------------------------------------------------------- /05-values-and-units/i/inserting_attribute_values.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/05-values-and-units/i/inserting_attribute_values.png -------------------------------------------------------------------------------- /05-values-and-units/i/target.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/05-values-and-units/i/target.png -------------------------------------------------------------------------------- /05-values-and-units/i/tester.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/05-values-and-units/i/tester.jpg -------------------------------------------------------------------------------- /05-values-and-units/inserting-attribute-values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Inserting attribute values 5 | 10 | 11 | 12 | 13 |

Greetings!

14 |

Salutations!

15 |

Howdy-do!

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /05-values-and-units/named-colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Named colors 5 | 11 | 12 | 13 | 14 |

Greetings!

15 |

Salutations!

16 |

Howdy-do!

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /05-values-and-units/setting-absolute-length-left-margins.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Setting absolute-length left margins 5 | 9 | 10 | 11 | 12 |

[one] This paragraph has a one-"inch" left margin.

13 |

[two] This paragraph has a half-"inch" left margin.

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /05-values-and-units/text-in-progressive-translucency-redux.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Text set in progressive translucency, redux 5 | 13 | 14 | 15 | 16 |

[one] This is a paragraph.

17 |

[two] This is a paragraph.

18 |

[three] This is a paragraph.

19 |

[four] This is a paragraph.

20 |

[five] This is a paragraph.

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /05-values-and-units/text-in-progressive-translucency.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Text set in progressive translucency 5 | 13 | 14 | 15 | 16 |

[one] This is a paragraph.

17 |

[two] This is a paragraph.

18 |

[three] This is a paragraph.

19 |

[four] This is a paragraph.

20 |

[five] This is a paragraph.

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /05-values-and-units/using-em-for-margins-and-sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Using em for margins and font sizing 5 | 12 | 13 | 14 | 15 |

Left margin = 24 pixels

16 |

Left margin = 18 pixels

17 |

Left margin = 12 pixels

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /05-values-and-units/using-pixel-lengths.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Using pixel lengths 5 | 6 | 7 | 8 |

9 | The following image is 20 pixels tall and wide: 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-values-and-units/viewport-relative-sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Viewport-relative sizing 5 | 11 | 12 | 13 | 14 |
A div! It is half the width of the viewport and a third the height. Six of them could create a full-viewport UI.
15 |

A paragraph that follows the single div we actually have in this example.

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/display-changing-list-to-inline.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Changing the display role from list-item to inline 6 | 7 | 11 | 12 | 13 | 14 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/display-contents.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A regular unordered list, and one with display: contents 6 | 12 | 13 | 14 | 15 |
16 | 17 | 22 | 23 |
24 |
25 | 26 | 31 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/horizontal-formatting-replaced-elements-changing-widths.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Changing replaced element inline sizes 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/arrowhead-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/arrowhead-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/arrowhead-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/arrowhead-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/inline-replaced-inline-on-baseline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/06-basic-visual-formatting/i/inline-replaced-inline-on-baseline.png -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/rulers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/06-basic-visual-formatting/i/rulers.png -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/06-basic-visual-formatting/i/star.png -------------------------------------------------------------------------------- /06-basic-visual-formatting/i/star2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/06-basic-visual-formatting/i/star2.png -------------------------------------------------------------------------------- /06-basic-visual-formatting/line-layout-multi-line-element.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | A multiple-line inline element 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 |

17 | This is text held within a span element that is inside a containing element (a paragraph, in this case). The border shows the boundaries of the span element. 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/line-layout-single-line-element.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | A single-line inline element 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 |

17 | This is text held within a span element that is inside a containing element (a paragraph, in this case). The border shows the boundaries of the span element. 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/making-elements-invisible.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Making elements invisible without suppressing their element boxes 7 | 12 | 13 | 14 | 15 |

16 | This is a paragraph that should be visible. Nulla berea consuetudium ohio city, mutationem dolore. Humanitatis molly shannon ut lorem. Doug dieken dolor possim south euclid. 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/managing-line-height-assigning-to-inline.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Assigning the line-height property to inline elements 6 | 7 | 8 | 12 | 13 | 14 | 15 |

16 | Not only does this paragraph have “normal” text, but it also
17 | contains a line in which some big text is found.
18 | This large text helps illustrate our point. 19 |

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /06-basic-visual-formatting/managing-line-height-increasing-line-height.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Increasing line-height to leave room for inline borders 6 | 7 | 8 | 11 | 12 | 13 | 14 |

15 | Not only does this paragraph have “normal” text, but it also
16 | contains a line in which a hyperlink is found.
17 | This large text helps illustrate our point. 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_border-radius-various.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A variety of rounded corners 6 | 14 | 17 | 18 | 19 | 20 |
21 | 22 |

23 | My borders are rounded. 24 |

25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_inline-replaced-element.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Borders on inline replaced elements 7 | 8 | 12 | 13 | 14 | 15 | This is a paragraph that contains an inline replaced element—in this case, an image—that has been styled with a border. This does affect the line heights, as explained in the text. 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_many-aspects.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Borders have many aspects 7 | 8 | 13 | 14 | 15 | 16 |

An h1 element!

17 |

A paragraph!

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_outset-image.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Applying an outset border to a hyperlinked image 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_really-short-declaration.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | A really short border declaration 7 | 8 | 12 | 13 | 14 | 15 |

An h1 element!

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_removing-left-border.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Removing the left border 7 | 8 | 12 | 13 | 14 | 15 |

An h1 element!

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_setting-bottom-with-shorthand.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Setting a bottom border with a shorthand property 7 | 8 | 12 | 13 | 14 | 15 |

An h1 element!

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_two-outset.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Two outset borders 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_using-the-cascade.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Using the cascade to your advantage 7 | 8 | 13 | 14 | 15 | 16 |

An h1 element!

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_using-transparent.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Using transparent borders 7 | 8 | 14 | 15 | 16 | 17 |

18 | Home 19 | About 20 | Contact 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/borders_very-complex-borders.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Very complex borders 7 | 8 | 15 | 16 | 17 | 18 |

An h1 element!

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/c/pbom-baseline.css: -------------------------------------------------------------------------------- 1 | html {background: #DDD;} body {width: 800px; max-width: max-content; padding: 1em; margin: 0; box-sizing: border-box; background: white;} /* for print preview/production */ body:hover {filter: saturate(0%);} -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/0x00-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/0x00-big.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/0x00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/0x00.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/arrow-down.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/arrow-left.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/arrow-right.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/arrow-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/arrow-up.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/chrome.jpg -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/circle.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/circles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/circles.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/plaque.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/plaque.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/stars.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/i/waves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/07-padding-borders-outlines-and-margins/i/waves.png -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/margins_collapsing-within.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Margins collapsing with parents 7 | 8 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

Welcome to ConHugeCo

22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/margins_inline-nonreplaced-element-25-left.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | An inline nonreplaced element with an inline-start margin 7 | 8 | 11 | 12 | 13 | 14 | 15 |

16 | This is a paragraph that contains some strongly emphasized text that has been styled with left margin and a background. 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/margins_mixed-units.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Mixed-value margins 7 | 8 | 14 | 15 | 16 |
17 |

It’s an h2 element!

18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/margins_setting-a-margin-for-h1.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Setting a margin for h1 elements 7 | 8 | 14 | 15 | 16 |
17 |

An h1 element!

18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/outlines_outline-over-margin.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Outline over margin 7 | 8 | 13 | 14 | 15 | 16 |

It’s an h1 element!

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/outlines_overlapping.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Overlapping outlines 7 | 8 | 12 | 13 | 14 | 15 |

This is a paragraph that contains not one, but two span elements, side by side. Their outlines overlap, since there’s no space between them to keep the outlines apart.

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/padding_adding-padding-to-elements.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Adding padding to elements 7 | 8 | 11 | 12 | 13 | 14 |

This Is an h2 Element. You Won’t Believe What Happens Next!

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/padding_mixed-padding.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Mixed padding 7 | 8 | 14 | 15 | 16 | 17 |

This Is an h2 Element.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/padding_mixed-value.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Mixed-value padding 7 | 8 | 14 | 15 | 16 | 17 |

This Is an h2 Element.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/padding_more-than-one-single-side.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | More than one single-side padding 7 | 8 | 15 | 16 | 17 | 18 |

This Is an h2 Element.

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/padding_replaced-element.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Padding replaced elements 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /07-padding-borders-outlines-and-margins/padding_replaced-inline-element.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Padding replaced elements 7 | 8 | 12 | 13 | 14 | 15 | This is a paragraph that contains an inline replaced element—in this case, an image—that has been styled with padding and a background. This does affect the line heights, as explained in the text. 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /08-backgrounds/backgrounds-padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Backgrounds and padding 6 | 11 | 12 | 13 | 14 |

A paragraph.

15 |

A padded paragraph.

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /08-backgrounds/backgrounds-two-tone.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Using background and border to two-tone an image 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /08-backgrounds/box-shadow-incomplete.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Box shadows are incomplete 6 | 15 | 16 | 17 | 18 |
19 | 20 |
    21 |
  1. This is a shadowless box.
    2. 22 |
  2. This is a shadowed box.
    3. 23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /08-backgrounds/box-shadow-simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A simple box shadow 6 | 15 | 16 | 17 | 18 |
19 | 20 |
    21 |
  1. This is a shadowless box.
    2. 22 |
  2. This is a shadowed box.
    3. 23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /08-backgrounds/i/arrowhead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/arrowhead.png -------------------------------------------------------------------------------- /08-backgrounds/i/bg01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/bg01.png -------------------------------------------------------------------------------- /08-backgrounds/i/bg02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/bg02.gif -------------------------------------------------------------------------------- /08-backgrounds/i/bg03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/bg03.jpg -------------------------------------------------------------------------------- /08-backgrounds/i/bg23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/bg23.gif -------------------------------------------------------------------------------- /08-backgrounds/i/box-green.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/box-green.gif -------------------------------------------------------------------------------- /08-backgrounds/i/box-red.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/box-red.gif -------------------------------------------------------------------------------- /08-backgrounds/i/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/chrome.jpg -------------------------------------------------------------------------------- /08-backgrounds/i/email-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/email-icon.png -------------------------------------------------------------------------------- /08-backgrounds/i/email.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/email.gif -------------------------------------------------------------------------------- /08-backgrounds/i/focus-hi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/focus-hi.png -------------------------------------------------------------------------------- /08-backgrounds/i/focus-hi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /08-backgrounds/i/focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/focus.png -------------------------------------------------------------------------------- /08-backgrounds/i/frame-sq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/frame-sq.png -------------------------------------------------------------------------------- /08-backgrounds/i/grid1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/grid1.gif -------------------------------------------------------------------------------- /08-backgrounds/i/grid2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/grid2.gif -------------------------------------------------------------------------------- /08-backgrounds/i/msword-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/msword-icon.png -------------------------------------------------------------------------------- /08-backgrounds/i/pdf-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/pdf-icon.png -------------------------------------------------------------------------------- /08-backgrounds/i/radio-warn-fade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/radio-warn-fade.png -------------------------------------------------------------------------------- /08-backgrounds/i/radio-warn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/radio-warn.png -------------------------------------------------------------------------------- /08-backgrounds/i/stars.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/stars.gif -------------------------------------------------------------------------------- /08-backgrounds/i/triplebor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/triplebor.gif -------------------------------------------------------------------------------- /08-backgrounds/i/wavybord.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/wavybord.gif -------------------------------------------------------------------------------- /08-backgrounds/i/yinyang-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/yinyang-200.png -------------------------------------------------------------------------------- /08-backgrounds/i/yinyang-bold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/yinyang-bold.png -------------------------------------------------------------------------------- /08-backgrounds/i/yinyang-sm-x2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/yinyang-sm-x2.png -------------------------------------------------------------------------------- /08-backgrounds/i/yinyang-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/yinyang-sm.png -------------------------------------------------------------------------------- /08-backgrounds/i/yinyang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/08-backgrounds/i/yinyang.png -------------------------------------------------------------------------------- /09-gradients/conic-gradients-different-start-angles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Conic gradients with angled color stops and different start angles 6 | 26 | 27 | 28 | 29 |
30 | 31 |
32 |
33 | 34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /09-gradients/i/arrowhead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/arrowhead.png -------------------------------------------------------------------------------- /09-gradients/i/bg01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/bg01.png -------------------------------------------------------------------------------- /09-gradients/i/bg02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/bg02.gif -------------------------------------------------------------------------------- /09-gradients/i/bg03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/bg03.jpg -------------------------------------------------------------------------------- /09-gradients/i/bg23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/bg23.gif -------------------------------------------------------------------------------- /09-gradients/i/box-green.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/box-green.gif -------------------------------------------------------------------------------- /09-gradients/i/box-red.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/box-red.gif -------------------------------------------------------------------------------- /09-gradients/i/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/chrome.jpg -------------------------------------------------------------------------------- /09-gradients/i/email-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/email-icon.png -------------------------------------------------------------------------------- /09-gradients/i/email.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/email.gif -------------------------------------------------------------------------------- /09-gradients/i/focus-hi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/focus-hi.png -------------------------------------------------------------------------------- /09-gradients/i/focus-hi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /09-gradients/i/focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/focus.png -------------------------------------------------------------------------------- /09-gradients/i/frame-sq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/frame-sq.png -------------------------------------------------------------------------------- /09-gradients/i/grid1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/grid1.gif -------------------------------------------------------------------------------- /09-gradients/i/grid2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/grid2.gif -------------------------------------------------------------------------------- /09-gradients/i/msword-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/msword-icon.png -------------------------------------------------------------------------------- /09-gradients/i/pdf-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/pdf-icon.png -------------------------------------------------------------------------------- /09-gradients/i/radio-warn-fade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/radio-warn-fade.png -------------------------------------------------------------------------------- /09-gradients/i/radio-warn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/radio-warn.png -------------------------------------------------------------------------------- /09-gradients/i/stars.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/stars.gif -------------------------------------------------------------------------------- /09-gradients/i/triplebor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/triplebor.gif -------------------------------------------------------------------------------- /09-gradients/i/wavybord.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/wavybord.gif -------------------------------------------------------------------------------- /09-gradients/i/yinyang-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/yinyang-200.png -------------------------------------------------------------------------------- /09-gradients/i/yinyang-bold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/yinyang-bold.png -------------------------------------------------------------------------------- /09-gradients/i/yinyang-sm-x2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/yinyang-sm-x2.png -------------------------------------------------------------------------------- /09-gradients/i/yinyang-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/yinyang-sm.png -------------------------------------------------------------------------------- /09-gradients/i/yinyang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/09-gradients/i/yinyang.png -------------------------------------------------------------------------------- /09-gradients/linear-gradients-color-stops-out-of-place.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Handling color stops that are out of place 6 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /09-gradients/linear-gradients-fade-white-v-transparent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fading to white versus fading to transparent 6 | 15 | 16 | 17 | 18 |
19 | 20 |
21 |
22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /09-gradients/linear-gradients-hard-stop-stripes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hard-stop stripes 6 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /09-gradients/manipulating-gradients-tiled-radials.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tiled radial gradient images 6 | 11 | 12 | 13 | 14 |
15 | 16 |

A very spotty body

17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /09-gradients/radial-gradients-color-stop-added.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Adding a color stop 6 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /09-gradients/radial-gradients-color-stop-beyond-endpoint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Color stops beyond the ending point 6 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /09-gradients/radial-gradients-color-stop-negative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Handling a negative color-stop position 6 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /09-gradients/radial-gradients-degenerate-zerowidth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The effects of a zero-width ellipse 6 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /09-gradients/radial-gradients-repeating.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Repeating radial gradients 6 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /09-gradients/radial-gradients-simple-two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple radial gradients 6 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /09-gradients/repeating-gradients-linear-tiled-w-backgroundrepeat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tiling gradient images with background-repeat 6 | 12 | 13 | 14 | 15 |

This is an H1, yo.

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /09-gradients/repeating-gradients-no-hard-resets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dealing with hard resets in repeating-gradient images 6 | 15 | 16 | 17 | 18 |

This is an H1, yo.

19 |

This is an H1, yo.

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /09-gradients/repeating-gradients-yellowstripes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A repeating gradient image with repeating-linear-gradient 6 | 12 | 13 | 14 | 15 |

This is an H1, yo.

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /10-floating-and-positioning/abspos-horizontal-center.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Horizontally centering an absolutely positioned element with auto margins 8 | 10 | 11 | 12 | 13 |
14 | An absolutely positioned element can have its content 15 | shrink-wrapped 17 | thanks to the way positioning rules work. 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10-floating-and-positioning/abspos-ignoring-margin-right.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Making use of an auto left margin 8 | 10 | 11 | 12 | 13 |
14 | An absolutely positioned element can have its content 15 | shrink-wrapped 17 | thanks to the way positioning rules work. 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10-floating-and-positioning/abspos-ignoring-right.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Ignoring the value for right in an overconstrained situation 8 | 10 | 11 | 12 | 13 |
14 | An absolutely positioned element can have its content 15 | shrink-wrapped 17 | thanks to the way positioning rules work. 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10-floating-and-positioning/abspos-replaced-element.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Absolutely positioning a replaced element 7 | 10 | 11 | 12 | 13 |
14 | a frowny face 16 |
17 |
19 | it's a div! 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /10-floating-and-positioning/abspos-shrink-to-fit.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | The “shrink-to-fit” behavior of absolutely positioned elements 8 | 10 | 11 | 12 | 13 |
14 | An absolutely positioned element can have its content 15 | shrink-wrapped 17 | thanks to the way positioning rules work. 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10-floating-and-positioning/abspos-vertical-auto-margins.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Vertically centering an absolutely positioned element with auto-margins 8 | 10 | 11 | 12 | 13 |
15 |
17 | element D 18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /10-floating-and-positioning/c/floats-baseline.css: -------------------------------------------------------------------------------- 1 | html {background: #DDD;} body {width: 800px; padding: 1em; margin: 0; box-sizing: border-box; background: white;} .tall1 {width: 21px; height: 155px; border: 1px solid; background: url(../i/down-arrow.png) repeat-y, linear-gradient(to bottom, hsla(0,100%,80%,1) 0%, hsla(180,100%,80%,1) 100% );} /* for print preview/production */ body:hover {filter: saturate(0%);} -------------------------------------------------------------------------------- /10-floating-and-positioning/clear-margin-effects.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Clearing and its effect on margins 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 | Why Doubt Salmon? 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /10-floating-and-positioning/floating-image.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | A floating image 7 | 8 | 11 | 12 | 13 | 14 |

15 | Style sheets were our last, best hope for structure. They succeeded. 16 | b4 17 | It was the dawn of the second age of web browsers. This is the story of the first important steps towards sane markup and accessibility. 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10-floating-and-positioning/i/ClipArtMoon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/ClipArtMoon.jpg -------------------------------------------------------------------------------- /10-floating-and-positioning/i/ClipArtMoon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/ClipArtMoon.psd -------------------------------------------------------------------------------- /10-floating-and-positioning/i/Untitled-1.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/Untitled-1.psd -------------------------------------------------------------------------------- /10-floating-and-positioning/i/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/arrow-down.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/arrow-left.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/arrow-right.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/arrow-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/arrow-up.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/b4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/b4.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/boxer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/boxer.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/chrome.jpg -------------------------------------------------------------------------------- /10-floating-and-positioning/i/d3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/d3.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/d5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/d5.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/down-arrow.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/fillrule-star-evenodd.svg: -------------------------------------------------------------------------------- 1 | 2 | Example fillrule-evenodd - demonstrates fill-rule:evenodd 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /10-floating-and-positioning/i/fillrule-star-nonzero.svg: -------------------------------------------------------------------------------- 1 | 2 | Example fillrule-nonzero - demonstrates fill-rule:nonzero 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /10-floating-and-positioning/i/fillrule-star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/fillrule-star.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/five.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/five.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/four.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/four.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/frown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/frown.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/moon.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/one.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/one.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/sit-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/sit-gradient.png -------------------------------------------------------------------------------- /10-floating-and-positioning/i/star-evenodd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /10-floating-and-positioning/i/star-nonzero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /10-floating-and-positioning/i/star.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/star.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /10-floating-and-positioning/i/stripe.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/stripe.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/tall1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/tall1.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/three.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/three.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/two.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/two.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/i/wide1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/10-floating-and-positioning/i/wide1.gif -------------------------------------------------------------------------------- /10-floating-and-positioning/relativepos-overlap.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | Relatively positioned elements can overlap other content 8 | 12 | 13 | 14 | 15 |

16 | In this paragraph, we will find that there is an image that has been pushed to 17 | the right. It will therefore A star! 18 | overlap content nearby, assuming that it is not the last element in its line box. 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10-floating-and-positioning/relativepos.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | A relatively positioned element 8 | 12 | 13 | 14 | 15 |

16 | Style sheets were our last, best hope for structure. They succeeded. 17 | b4 18 | It was the dawn of the second age of Web browsers. This is the story of the first important steps towards sane markup and accessibility. 19 |

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /11-flexbox/c/examples.css: -------------------------------------------------------------------------------- 1 | @import url(../../styles/style-edit.css); 2 | style, 3 | body { 4 | font-family: "ubuntu mono", Consolas, monospace; 5 | } 6 | div > div { 7 | font-family: "Myriad Pro",Myriad,"Liberation Sans","Nimbus Sans L","Helvetica Neue"; 8 | } 9 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-down-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-down-red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-left-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-left-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-right-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-right-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-up-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /11-flexbox/i/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/11-flexbox/i/chrome.jpg -------------------------------------------------------------------------------- /11-flexbox/i/unicorn1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/11-flexbox/i/unicorn1.jpg -------------------------------------------------------------------------------- /11-flexbox/i/unicorn2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/11-flexbox/i/unicorn2.jpg -------------------------------------------------------------------------------- /11-flexbox/i/unicorn3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/11-flexbox/i/unicorn3.jpg -------------------------------------------------------------------------------- /11-flexbox/i/unicorn4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/11-flexbox/i/unicorn4.jpg -------------------------------------------------------------------------------- /11-flexbox/i/unicorn5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/11-flexbox/i/unicorn5.jpg -------------------------------------------------------------------------------- /12-grid-layout/grid-items.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Grid items 7 | 8 | 16 | 17 | 18 | 19 |

Note: This element is a 20 | grid container with several grid items inside it.

21 | 22 | 23 | -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/arrow-down.png -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/arrow-left.png -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/arrow-right.png -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/arrow-up.png -------------------------------------------------------------------------------- /12-grid-layout/i/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /12-grid-layout/i/chrome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/chrome.jpg -------------------------------------------------------------------------------- /12-grid-layout/i/conhugeco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/conhugeco.png -------------------------------------------------------------------------------- /12-grid-layout/i/x-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/x-box.png -------------------------------------------------------------------------------- /12-grid-layout/i/yinyang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/12-grid-layout/i/yinyang.png -------------------------------------------------------------------------------- /13-table-layout-in-css/anon-obj-row.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Anonymous-object generation in table formatting 6 | 7 | 11 | 12 | 13 | 14 |
Name
Title
E-mail
15 | 16 | 17 | 18 | 19 |
Shirt size:
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /13-table-layout-in-css/c/baseline.css: -------------------------------------------------------------------------------- 1 | html {background: silver;} 2 | body {background: white; padding: 1em;} 3 | -------------------------------------------------------------------------------- /13-table-layout-in-css/i/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /13-table-layout-in-css/i/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /13-table-layout-in-css/i/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /13-table-layout-in-css/i/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Bold.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-BoldCond.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-BoldCond.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-BoldCondItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-BoldCondItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-BoldExt.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-BoldExt.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-BoldExtItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-BoldExtItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-BoldItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Cond.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Cond.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-CondItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-CondItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-DemiBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-DemiBold.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-DemiBoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-DemiBoldItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-DmBdCond.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-DmBdCond.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-DmBdCondItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-DmBdCondItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Ext.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Ext.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-ExtItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-ExtItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-ExtraBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-ExtraBold.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-ExtraBoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-ExtraBoldItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Italic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Italic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Light.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-LightCond.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-LightCond.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-LightCondItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-LightCondItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-LightItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Medium.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-MediumItalic.otf -------------------------------------------------------------------------------- /14-fonts/f/SwitzeraADF-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/14-fonts/f/SwitzeraADF-Regular.otf -------------------------------------------------------------------------------- /14-fonts/font-adding-line-height.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Adding line height to the mix 6 | 10 | 11 | 12 | 13 |

A level 2 heading element that has had a 'line-height' of '36pt' set for it

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /14-fonts/font-face-downloaded.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Using a downloaded font 6 | 13 | 14 | 15 | 16 |

A Level 1 Heading Element

17 |

18 | This is a paragraph, and as such uses the browser’s default font (because there are no other author styles being applied to this document). This is usually, as it is here, a serif font of some variety. 19 |

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /14-fonts/font-necessity-of-size-and-family.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The necessity of both size and family 6 | 12 | 13 | 14 | 15 |

A Level 1 Heading Element

16 |

A Level 2 Heading Element

17 |

A Level 3 Heading Element

18 |

A Level 4 Heading Element

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /14-fonts/font-shorthand-changes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shorthand changes 6 | 11 | 12 | 13 | 14 |

A Level 1 Heading Element

15 |

A Level 2 Heading Element

16 |

A Level 3 Heading Element

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /14-fonts/font-size-issues-of-inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The issues of inheritance 6 | 11 | 12 | 13 | 14 |

This paragraph contains both emphasis and strong 15 | emphasis, both of which are larger than the paragraph text.

16 | 17 |

12px 14.4px 19.44px 12px

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /14-fonts/font-size-relative-sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Relative font sizing at the edges of the absolute sizes 6 | 11 | 12 | 13 | 14 |

A Heading with Emphasis added

15 |

This paragraph has some emphasis as well.

16 |

xxx-large (larger) xxx-large

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /14-fonts/font-stretch.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Stretching font characters 6 | 11 | 12 | 13 | 14 |

15 | If there is one thing I can't stress enough, it's the value of image editors in producing books like this one. 16 |

17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /14-fonts/font-style-more-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | More font styles 6 | 11 | 12 | 13 | 14 |

This paragraph has a 'font-style' of 'normal', which is why it looks... normal. The exceptions are those elements that have been given a different style, such as the 'EM' element and the 'I' element, which get to be oblique and italic, respectively.

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /14-fonts/font-typical-rules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Typical font rules 6 | 10 | 11 | 12 | 13 |

A Level 1 Heading Element

14 |

A Level 2 Heading Element

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /14-fonts/font-variant-small-caps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The small-caps value in use 6 | 10 | 11 | 12 | 13 |

The Uses of font-variant

14 |

15 | The property font-variant is very interesting. Given how common its use is in print media and the relative ease of its implementation, it should be supported by every CSS1-aware browser. 16 |

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /14-fonts/font-weight-inherited.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inherited font-weight 6 | 9 | 10 | 11 | 12 |

13 | Within this paragraph we find some italicized text, a bit of underlined text, and the occasional stretch of hyperlinked text for our viewing pleasure. 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /15-text-properties/ch06.css: -------------------------------------------------------------------------------- 1 | html {background: silver;} body {width: 40em; padding: 1em; margin: 0; background: white;} body.l2up {width: 80em; display: flex; justify-content: space-between;} body.l2up > * {width: 45%;} body.l3up {width: 80em; display: flex; justify-content: space-between;} body.l3up > * {width: 30%;} code, tt, kbd {font: 0.95em "Andale Mono", monospace, serif;} -------------------------------------------------------------------------------- /15-text-properties/i/dot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/15-text-properties/i/dot.gif -------------------------------------------------------------------------------- /15-text-properties/i/short.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/15-text-properties/i/short.gif -------------------------------------------------------------------------------- /15-text-properties/i/star.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/15-text-properties/i/star.gif -------------------------------------------------------------------------------- /15-text-properties/i/tall.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/15-text-properties/i/tall.gif -------------------------------------------------------------------------------- /15-text-properties/letter-spacing-inherited.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Inherited letter spacing 6 | 7 | 12 | 13 | 14 | 15 |

This spacious paragraph features tiny text which is just 16 | as spacious, even though the author probably wanted the 17 | spacing to be in proportion to the size of the text.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /15-text-properties/letter-spacing-various.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Various kinds of letter spacing 6 | 7 | 12 | 13 | 14 | 15 |

The letters in this paragraph are spaced as normal.

16 |

The letters in this paragraph are spread out a bit.

17 |

The letters in this paragraph are smooshed together a bit.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /15-text-properties/line-height-small-large-slight.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Small line-height, large font-size, slight problem 6 | 7 | 12 | 13 | 14 | 15 |
16 |

This paragraph's 'font-size' is 18px, but the inherited 'line-height' 17 | value is only 10px. This may cause the lines of text to overlap each 18 | other by a small amount.

19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /15-text-properties/line-heights-unitless-factors.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Using line-height factors to overcome inheritance problems 6 | 7 | 12 | 13 | 14 | 15 |
16 |

This paragraph's 'font-size' is 18px, and since the 'line-height' 17 | set for the parent div is 1.5, the 'line-height' for this paragraph 18 | is 27px (18 * 1.5).

19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /15-text-properties/text-combine-upright.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Various types of upright combinations 6 | 8 | 13 | 14 | 15 | 16 |
17 |

这是一些文本

18 |

这是一些文本

19 |

这是117一些0文本23日

20 |

这是117一些0文本23日

21 |

这是117一些0文本23日

22 |

这是117一些0文本23日

23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /15-text-properties/text-decoration-color-consistency.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Color consistency in underlines 6 | 7 | 12 | 13 | 14 | 15 |

This paragraph, which is black and has a black underline, also contains 16 | strongly emphasized text that has the black underline beneath it as 17 | well.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /15-text-properties/text-decoration-correct-although-strange.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Correct, although strange, decorative behavior 6 | 7 | 12 | 13 | 14 | 15 |

This paragraph, which is black and has a black overline, also contains 16 | superscripted text through which the overline will cut.

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /15-text-properties/text-decoration-various.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Various kinds of text decoration 6 | 7 | 14 | 15 | 16 | 17 |

This text has been decorated with an underline.

18 |

This text has been decorated with an overline.

19 |

This text has been decorated with a line-through.

20 |

This text has been decorated with nothing at all.

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /15-text-properties/text-indent-percentages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Text indenting with percentages 6 | 7 | 12 | 13 | 14 | 15 |
16 |

This paragraph is contained inside a DIV, which is 400px wide, so the 17 | first line of the paragraph is indented 40px (400 * 10% = 40). This is 18 | because percentages are computed with respect to the width of the element.

19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /15-text-properties/text-indent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Text indenting 6 | 7 | 11 | 12 | 13 | 14 |

This is a paragraph element, which means that the first line will be indented by 3em (i.e., three times the computed font-size of the text in the paragraph). The other lines in the paragraph will not be indented, no matter how long the paragraph may be.

15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /15-text-properties/text-rendering-different-optimizations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Different optimizations 6 | 7 | 13 | 14 | 15 | 16 |

17 | Ten Vipers Infiltrate AWACS 18 |

19 | 20 |

21 | Ten Vipers Infiltrate AWACS 22 |

23 | 24 | 25 |

(Use Chrome; Photoshop highlighting needed)

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /15-text-properties/text-shadow-simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple shadows 6 | 7 | 12 | 13 | 14 | 15 |

16 | Keep your eye on the shadows. They move when you aren’t watching. 17 |

18 | 19 |

20 | I run between the shadows—some are phantoms, some are real. 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /15-text-properties/vertical-align-baseline-image.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Baseline alignment of an image 6 | 7 | 11 | 12 | 13 | 14 |

The image found in this paragraph A dot has its 15 | bottom edge aligned with the baseline of the text in the paragraph.

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /15-text-properties/vertical-align-percentages.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Percentages and fun effects 6 | 7 | 14 | 15 | 16 | 17 |

We can either soar to new heights or, instead, 18 | sink into despair...

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /15-text-properties/vertical-align-text-top-and-bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Text-top and -bottom alignment 6 | 7 | 12 | 13 | 14 | 15 |

Here: a tall tall image, 16 | and then a short image.

17 |

Here: a tall tall image, 18 | and then a short image.

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /15-text-properties/vertical-alignment-superscript-subscript.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Superscript and subscript alignment 6 | 7 | 12 | 13 | 14 | 15 |

This paragraph contains superscripted 16 | and subscripted text.

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /15-text-properties/white-space-honoring.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Honoring the spaces in markup 6 | 7 | 10 | 11 | 12 | 13 |

This paragraph has many 14 | spaces in it.

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /15-text-properties/white-space-suppressing-line-wrapping.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Suppressing line wrapping with the white-space property 6 | 7 | 10 | 11 | 12 | 13 |

This paragraph is not allowed to wrap, 14 | which means that the only way to end a line is to insert a line-break 15 | element. If no such element is inserted, then the line will go forever, 16 | forcing the user to scroll horizontally to read whatever can't be 17 | initially displayed
in the browser window.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /15-text-properties/word-spacing-really-wide.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Really wide word spacing 6 | 7 | 11 | 12 | 13 | 14 |

The spaces between words in this paragraph will be increased by one inch. Room enough for ya?

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-cyclic-thisisfine.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | This list is fine 7 | 17 | 18 | 19 | 20 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-cyclic-wings.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Putting “wings” on the thinker 7 | 17 | 18 | 19 | 20 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-cyclic.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | A cyclic counter pattern 7 | 15 | 16 | 17 | 18 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-fixed-tooclose.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | When symbols get too close 7 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-fixed.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | A fixed counter pattern 7 | 15 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-numeric-negative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Negative-value formatting 6 | 16 | 17 | 18 | 19 |
    20 |
  1. item
    2. 21 |
  2. item
    3. 22 |
  3. item
    4. 23 |
  4. item
    5. 24 |
  5. item
    6. 25 |
  6. item
    7. 26 |
  7. item
    8. 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-numeric-pad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Padding values 6 | 17 | 18 | 19 | 20 |
    21 |
  1. one
    2. 22 |
  2. two
    3. 23 |
  3. three
    4. 24 |
  4. four
    5. 25 |
  5. five
    6. 26 |
  6. six
    7. 27 |
  7. seven
    8. 28 |
  8. eight
    9. 29 |
  9. nine
    10. 30 |
  10. ten
    11. 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counter-patterns-simple.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | A simple counter pattern 7 | 14 | 15 | 16 | 17 |
    18 |
  1. one
    2. 19 |
  2. two
    3. 20 |
  3. three
    4. 21 |
  4. four
    5. 22 |
  5. five
    6. 23 |
  6. six
    7. 24 |
  7. seven
    8. 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/counters-counting-items.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Counting the items 6 | 12 | 13 | 14 | 15 | 16 | 17 | First item 18 | Item two 19 | The third item 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-block.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Generating block-level content 6 | 9 | 10 | 11 | 12 |

The Secret Life of Salmon

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-inline.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Changing the generated content to be inline 6 | 11 | 12 | 13 | 14 |

The Secret Life of Salmon

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-placement.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Taking placement into account 6 | 11 | 12 | 13 | 14 |

The Secret Life of Salmon

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-quotes-nested.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Nested curly quotes 7 | 13 | 14 | 15 | 16 | 17 | In the beginning, there was nothing. And God said: Let there 18 | be light! And there was still nothing, but you could see it. 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-quotes.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Inserting quotes and other content 7 | 15 | 16 | 17 | 18 | 19 | I hate quotations. 20 | Ralph Waldo Emerson 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-strings-newlines.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Inserting and suppressing newlines 6 | 11 | 12 | 13 | 14 | 15 |

Spawning

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/generated-content-strings-verbatim.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Strings are displayed verbatim 6 | 9 | 10 | 11 | 12 | 13 |

Spawning

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/i/big-ohio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/16-lists-and-generated-content/i/big-ohio.gif -------------------------------------------------------------------------------- /16-lists-and-generated-content/i/ohio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/16-lists-and-generated-content/i/ohio.gif -------------------------------------------------------------------------------- /16-lists-and-generated-content/i/pdf-doc-icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/16-lists-and-generated-content/i/pdf-doc-icon.gif -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-layout-padding-v-margin.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Margins and padding as indentation devices 6 | 12 | 13 | 14 | 15 | 20 | 21 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-layout-threeitems-listborder.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Adding a list border 6 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-layout-threeitems-markers.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Markers are added 6 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-layout-threeitems.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Three list items 6 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-style-image-bigmarkers.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Using really big images as markers 6 | 10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-style-image-sublists.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Switching off image markers in sublists 6 | 10 | 11 | 12 | 13 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-style-image.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Using images as markers 6 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-style-position.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Placing the markers inside and outside list items 6 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-style-type-markersoff.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Switching off list-item markers 6 | 10 | 11 | 12 | 13 |
    14 |
  1. Item the first 15 |
  2. Item the second 16 |
  3. Item the third 17 |
  4. Item the fourth 18 |
  5. Item the fifth 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /16-lists-and-generated-content/list-style.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Bringing it all together 6 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /17-transforms/backface-visibility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | Visible and hidden backfaces 7 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /17-transforms/i/arrowhead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/arrowhead.png -------------------------------------------------------------------------------- /17-transforms/i/box-axes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/box-axes.png -------------------------------------------------------------------------------- /17-transforms/i/box-salmon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/box-salmon.png -------------------------------------------------------------------------------- /17-transforms/i/box.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/box.gif -------------------------------------------------------------------------------- /17-transforms/i/box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/box.png -------------------------------------------------------------------------------- /17-transforms/i/compass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/compass.png -------------------------------------------------------------------------------- /17-transforms/i/fish-head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/fish-head.png -------------------------------------------------------------------------------- /17-transforms/i/focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/focus.png -------------------------------------------------------------------------------- /17-transforms/i/frame-sq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/frame-sq.png -------------------------------------------------------------------------------- /17-transforms/i/rotate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/rotate.png -------------------------------------------------------------------------------- /17-transforms/i/salmon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/salmon.png -------------------------------------------------------------------------------- /17-transforms/i/salmon_hi.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/salmon_hi.tif -------------------------------------------------------------------------------- /17-transforms/i/ticks.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/ticks.gif -------------------------------------------------------------------------------- /17-transforms/i/translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/17-transforms/i/translate.png -------------------------------------------------------------------------------- /17-transforms/overwriting-modifying-transforms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Overwriting or modifying transforms 5 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /17-transforms/perspective-basic-ruler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | A basic “ruler” 6 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /17-transforms/transform-style-flat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A 3D-transformed inner div 5 | 12 | 13 | 14 | 15 | 16 |
17 | outer 18 |
inner
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /17-transforms/transformed-div-element.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A transformed div element 6 | 14 | 15 | 16 | 17 |
18 | I’ve been transformed! 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /18-transitions/i/psy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meyerweb/csstdg5figs/568a9ff4649cc08720a73c27d5ab9548a55fee97/18-transitions/i/psy.png -------------------------------------------------------------------------------- /18-transitions/sprite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | Sprite Animation 12 | 13 | 14 | 15 | 24 |

Hover over the dancer to see him dance!

25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /18-transitions/transition-delay-negative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | negative transition-delay 17 | 18 | 19 | 20 | 30 |