HTML/CSSExamples

Posted on: Apr 18, 2023

Stripped-down, bare-bone examples demonstrating various HTML elements and CSS properties.

See them in action and tinker — play with the code and watch what happens.

Text

• Headings: h1 to h6 in their default style.
• Size doesn’t matter: Making headings any size you choose with CSS.
• Bold, italics, case, and line height: Using font-weight, font-style, font-variant, text-transform, and line-height.
• Font families: Font family lists and the generic fallback font families.
• Font sizes: Absolute and relative units.
• Spacing out text: text-align, text-indent, word-spacing, and letter-spacing properties.
• Vertical alignment: The vertical-align property.
• Subscript and superscript: Using positioning as an alternative to the vertical-align property.
• Text shadows: Shadows. On text.
• Simple drop caps: A simple way to achieve a common effect.
• Fancy drop caps: Jazzing up that first letter.
• Graphical drop caps: Using images.
• First-paragraph drop caps: Targeting the first letter of the first paragraph.
• Pull quotes 1: A simple pull quote structure.
• Pull quotes 2: Adding a bit of style.
• Pull quotes 3: A more elaborate style.

Links

• Underlines: Various ways of underlining (usually links), using text-decoration, border-bottom, and background-image.
• Anchors and targets: Linking to parts of a page, and styling them using the :target pseudo class.
• Rollovers 1: Graphical links that change when the cursor moves over them using :hover.
• Rollovers 2: Further interactive effects, utilizing the :active pseudo class.
• Rollovers 3: Fading in and out.
• Rollovers 4: Rotating, using transform.
• Simple CSS transitions: Subtle animations of text links when they are hovered over.
• More CSS transitions: Using border-radius and RGBa colors.
• CSS transition timing functions: Handling acceleration and deceleration of animated transitions.

Colors, Images, and Backgrounds

• Colors: CSS colors, using color and background-color properties.
• HTML images: The img element.
• Background images: The background-image CSS property.
• Positioning backgrounds: Using the background-position property.
• Repeating background images: Using the background-repeat property.
• Background attachment: How a background behaves with scrolling content.
• Background image size: Using background-size.
• Multiple backgrounds: Layering backgrounds inside a single box.
• Linear gradients: Creating gradient backgrounds with CSS.
• Radial gradients: Circular and elliptical gradient backgrounds.
• Opacity: The transparency of a box.

Layout

• Widths and heights: width, height, max-width, min-height, and so on.
• Borders: Thick, thin, this color, that color, solid, dotted, dashed…
• Rounded corners: Using the border-radius property.
• Box shadows: Adding pop.
• Margin collapsing: How vertical margins merge, or “collapse”, into each other.
• Outlines: The “borders” that border borders.
• Overflow: Managing the portions of content that do not fit inside a box.
• Block and inline 1: Changing the behavior of boxes using the display property.
• Block and inline 2: More differences between block and inline boxes.
• Block and inline 3: Applying display: inline-block.
• Positioning: static: Following the normal flow.
• Positioning: relative: Offsetting from the box’s initial position.
• Positioning: absolute 1: Positioning in relation to a box’s container.
• Positioning: absolute 2: Inside a positioned box.
• Positioning: fixed: In relation to the viewport.
• Z-index: Stacking positioned boxes.
• Floating 1: A simple floated box.
• Floating 2: Two floated boxes.
• Floating 3: Clearing floated boxes.
• Page layout 1: Two columns step 1: positioning a navigation column.
• Page layout 2: Two columns step 2: using margin to push the content out from under the navigation column.
• Page layout 3: Using a border to provide the background for a column.
• Page layout 4: Three columns.
• Page layout 5: Adding a header.
• Page layout 6: Footers won’t always work with absolute positioned columns…
• Page layout 7: Adding a footer using floated columns.
• Charles Darwin: A styled up version of the basic principles of previous examples.
• 2D Transforms: Manipulating the size, shape, and position of boxes with the transform property.
• Transform origin: Altering the point at which transformations are measured from.

Lists & Navigation

• Basic lists: ul, ol, and li elements.
• Nested lists: Lists inside lists.
• Description lists: dl, dt, and dd.
• List markers: Changing bullets and numbering using list-style-type.
• Images as list item markers: Using list-style-image.
• Inside and outside list markers: Using list-style-position.
• Dropdowns 1: The basics of a dropdown menu.
• Dropdowns 2: A simple multi-level dropdown menu.
• Dropdowns 3: Multi-level dropdown with more detailed design.
• Inline tabs: Basic tabbed navigation using the display property.
• Floated tabs: Basic tabs using the float property.
• More tabs: Making tabs more tab-like.
• Yet more tabs: An alternative tab style.
• Skinny tabs: Using simple underlines.
• Fancy tabs: Going wild with CSS.
• Show / hide navigation (JavaScript): Toggling display using JavaScript.
• Show / hide navigation (target): Toggling display using the :target pseudo class.

Tables

• Basic table: table, tr, and td elements.
• Header cells: th elements.
• Merging cells 1: The rowspan attribute.
• Merging cells 2: The colspan attribute.
• Border collapsing 1: Collapsing table cell borders.
• Border collapsing 2: Collapsing table cell borders and table borders.
• Column groups: col and colgroup elements.
• Empty cells: Using the empty-cells property to specify how empty cells should be displayed.
• Automatic table layout: The default layout algorithm that tables use.
• Fixed table layout: Set using the table-layout property.

Forms

• Text boxes: Text and password type input elements.
• Checkboxes and radio buttons: More input element types.
• File input: For uploading.
• Text areas: The textarea element.
• Select boxes: Basic use of select and option elements.
• Select box option groups: Using the optgroup element.
• Multiple selection select boxes: Using the multiple attribute.

From: https://www.htmldog.com/