css_examples

Modern CSS Examples

CSS Selectors

Targeting elements: Type (e.g., h1), Class (.my-class), ID (#unique-id). Combining selectors: Descendant (article p), Child (ul > li), Sibling (h2 + p, h2 ~ p). Attribute selectors: Presence ([target]), Exact value ([target="_blank"]), Partial value ([class*="button"]). Pseudo-classes: State (:hover, :focus), Structural (:nth-child(2n)). Pseudo-elements: Parts of elements (::before, ::first-line). Grouping selectors: Apply same styles (h1, h2, h3).

Learn how CSS selectors target HTML elements for styling.

CSS Backgrounds

Set the background color of a page (body). Set background colors for different elements. Use an image as a background (background-image). Control background repetition (background-repeat). Position background images (background-position). Scale background images (background-size: cover, contain). Define the background painting area (background-clip). Control positioning reference (background-origin). Create fixed backgrounds (background-attachment: fixed). Use multiple background images. Shorthand property (background) for conciseness.

Explore how to style element backgrounds with colors, images, and more.

CSS Text Styling

Set text color (color). Align text (text-align: left, right, center, justify). Decorate text (text-decoration: underline, none, etc.). Transform text case (text-transform: uppercase, lowercase, capitalize). Indent text (text-indent). Adjust space between characters (letter-spacing). Control line height (line-height). Manage white space (white-space: nowrap). Handle text overflow (text-overflow: ellipsis). Control word breaking (overflow-wrap: break-word). Vertical alignment in specific contexts (e.g., flexbox, grid).

Learn properties for controlling text appearance and layout.

CSS Fonts

Set font family (font-family: websafe or custom fonts). Define font size (font-size: using px, em, rem, %, vw). Specify font weight (font-weight: normal, bold, numeric values 100-900). Set font style (font-style: normal, italic). Apply font variant (font-variant: small-caps). Use the font shorthand property. Load custom fonts using @font-face.

Understand how to control typography on the web.

CSS Links

Style links based on state using pseudo-classes (:link, :visited, :hover, :active, :focus, :focus-visible). Remove default underline (text-decoration: none). Add background colors and padding for button-like appearance. Change cursor on hover (cursor: pointer).

Learn how to style hyperlinks effectively.

CSS Lists

Change list item markers (list-style-type). Use custom images for markers (list-style-image). Control marker position (list-style-position). Use the list-style shorthand property. Modern custom list markers using ::marker pseudo-element or ::before.

Explore properties for styling ordered and unordered lists.

CSS Tables

Add borders to table elements (border). Collapse borders (border-collapse: collapse). Set table width and height (width, height). Align text content horizontally (text-align). Align content vertically (vertical-align). Add padding within cells (padding). Style the table caption (caption-side). Strategies for responsive tables (e.g., overflow-x: auto on wrapper).

Learn how to style HTML tables.

CSS Box Model

Understanding content, padding, border, margin. Default box sizing (content-box). Modern best practice: box-sizing: border-box (includes padding and border in width/height). Example: Element with total width 250px using border-box.

Understand the fundamental CSS Box Model.

CSS Border

Set border width (border-width, border-top-width, etc.). Set border style (border-style, border-left-style, etc.: solid, dashed, dotted). Set border color (border-color, border-bottom-color, etc.). Use the border shorthand (border: 1px solid black). Use individual side shorthands (border-top, border-right, etc.). Create rounded corners (border-radius).

Learn how to style element borders.

CSS Outline

Draw an outline around an element (outline). Set outline style (outline-style). Set outline color (outline-color). Set outline width (outline-width). Offset the outline (outline-offset). Use case: Styling focus states for accessibility (often preferred over border for focus).

Explore the outline property, distinct from border.

CSS Margin

Specify margins outside the border (margin-top, margin-right, etc.). Use the margin shorthand (1 to 4 values). Use auto for horizontal centering of block elements (margin: 0 auto). Understand margin collapsing (vertical margins between adjacent elements).

Learn how to create space around elements using margins.

CSS Padding

Specify padding inside the border (padding-top, padding-right, etc.). Use the padding shorthand (1 to 4 values). Padding uses the element’s background.

Learn how to create space within elements using padding.

CSS Dimension

Set explicit width and height (width, height). Use various units (px, %, em, rem, vw, vh). Set minimum dimensions (min-width, min-height). Set maximum dimensions (max-width, max-height). Understand percentage heights require a defined parent height.

Control the size of elements.

CSS Display Property

Control element layout behavior (display). Common values: block, inline, inline-block, none. Modern layout methods: flex (Flexbox), grid (Grid Layout). Hiding elements: display: none (removes from layout) vs visibility: hidden (takes up space).

Understand how the display property affects layout.

CSS Positioning

Positioning schemes: static (default), relative, absolute, fixed, sticky. Using offset properties (top, right, bottom, left). Understanding containing blocks for absolute. Creating stacking contexts (z-index). Controlling overflow (overflow: hidden, scroll, auto). Changing the mouse cursor (cursor).

Learn different methods for positioning elements.

CSS Floating (Legacy Technique)

Using float: left or float: right. Clearing floats (clear: both). Primary use case today: Wrapping text around images. Note: Flexbox and Grid are preferred for page layout.

Understand the float property and its modern usage.

CSS Aligning Elements

Centering block elements horizontally (margin: auto). Aligning items with Flexbox (justify-content, align-items, align-self). Aligning items with Grid (justify-items, align-items, place-items, justify-self, align-self). Text alignment within elements (text-align). Vertical alignment in specific contexts (vertical-align for inline/table-cell, Flex/Grid for general alignment).

Learn modern techniques for aligning elements using Flexbox, Grid, and margins.

CSS Combinators

Descendant combinator ( ): Select elements inside another element. Child combinator (>): Select direct children. Adjacent Sibling combinator (+): Select the element immediately following another. General Sibling combinator (~): Select all siblings that follow another.

Combine selectors to target elements based on their relationship.

CSS Generated Content

Using ::before and ::after pseudo-elements. Inserting content with the content property (text, symbols, images, counters). Using CSS counters (counter-reset, counter-increment, content: counter(...)). Specifying quotation marks (quotes).

Add content to the page using CSS.

CSS Pseudo-classes

Link states: :link, :visited. User action states: :hover, :active, :focus, :focus-visible (improved focus styling). Input states: :checked, :disabled, :enabled. Structural pseudo-classes: :first-child, :last-child, :nth-child(), :nth-of-type(), :only-child, :empty. Language pseudo-class: :lang().

Style elements based on their state or position in the document.

CSS Pseudo-elements

Style parts of an element: ::first-letter, ::first-line. Insert generated content: ::before, ::after. Style list markers: ::marker. Style highlighted text: ::selection.

Target specific parts of an element’s content (use :: syntax).

CSS Navigation Bars

Creating vertical and horizontal navigation menus. Modern implementation using Flexbox or Grid for layout. Styling list items (li) and links (a) as menu items.

Build navigation bars using modern CSS layout techniques.

CSS Image Gallery

Creating responsive image galleries. Using Flexbox or Grid for layout. Styling images and captions.

Learn to create image galleries with modern CSS.

CSS Opacity and Transparency

Setting element transparency with opacity (0.0 to 1.0). Creating hover effects with opacity. Using RGBA and HSLA colors for transparency on color or background-color without affecting child element opacity.

Control the transparency of elements and colors.

CSS Image Sprites

Combining multiple images into one file (sprite sheet). Using background-image, background-position, width, and height to display individual icons. Reduces HTTP requests. Alternatives: SVG icons, icon fonts.

Understand the image sprite technique for performance optimization.

CSS Attribute Selectors

Select based on attribute presence: [data-value]. Select based on exact attribute value: [type="submit"]. Select based on space-separated words: [class~="warning"]. Select based on hyphen-separated values (language codes): [lang|="en"]. Select based on prefix: [href^="https"]. Select based on suffix: [src$=".png"]. Select based on substring: [alt*="figure"]. Case-insensitive matching: [type="submit" i].

Target elements based on their attributes and attribute values.

CSS Rounded Corners

Create rounded corners using border-radius. Apply rounding to all corners (shorthand). Apply rounding to individual corners (border-top-left-radius, etc.). Create elliptical corners by providing two values per corner.

Learn how to easily create rounded corners.

CSS Border Images

Use an image to create complex borders (border-image-source). Slice the image for corners and sides (border-image-slice). Define border image width (border-image-width). Control image repetition (border-image-repeat: stretch, repeat, round). Use the border-image shorthand.

Explore using images as element borders.

Advanced CSS Backgrounds

Apply multiple background images (layered). Control background size (background-size: cover, contain, length, percentage). Define background positioning origin (background-origin: padding-box, border-box, content-box). Specify background clipping area (background-clip: padding-box, border-box, content-box, text). Creating full-page background images.

Dive deeper into advanced background styling.

CSS Gradients

Create smooth color transitions. Linear gradients (linear-gradient()): Specify direction (angle or keywords like to top left) and color stops. Radial gradients (radial-gradient()): Specify shape (ellipse, circle), size, position, and color stops. Repeating gradients (repeating-linear-gradient(), repeating-radial-gradient()). Using transparency in gradients.

Learn to create background gradients without images.

CSS Shadow Effects

Add shadows to text (text-shadow: offset-x offset-y blur-radius color). Add shadows to element boxes (box-shadow: offset-x offset-y blur-radius spread-radius color). Optional inset keyword for inner shadows (box-shadow). Apply multiple shadows by comma-separating values.

Create depth and emphasis with text and box shadows.

Advanced CSS Text Effects

Handle overflowing text (text-overflow: clip, ellipsis). Control word breaking (overflow-wrap: break-word, word-break: break-all). Specify writing mode (writing-mode). Control text orientation (text-orientation).

Explore more advanced text styling and layout options.

CSS Custom Fonts (@font-face)

Embed custom fonts using the @font-face rule. Specify font family name and source URL (src: url(...) format(...)). Include different font formats for browser compatibility (WOFF2, WOFF recommended). Define font weight and style variations within @font-face.

Learn how to use custom fonts on your website.

CSS 2D Transforms

Apply 2D transformations with transform. Translate (move) elements (translate(x, y), translateX(x), translateY(y)). Rotate elements (rotate(angle)). Scale elements (scale(x, y), scaleX(x), scaleY(y)). Skew elements (skew(x-angle, y-angle), skewX(angle), skewY(angle)). Combine transforms with matrix(). Change the transformation origin (transform-origin).

Manipulate elements in 2D space without affecting layout flow.

CSS 3D Transforms

Apply 3D transformations with transform. Rotate around axes (rotateX(angle), rotateY(angle), rotateZ(angle)). Translate in 3D (translate3d(x, y, z), translateZ(z)). Scale in 3D (scale3d(x, y, z), scaleZ(z)). Set perspective for the 3D space (perspective on parent element). Define perspective origin (perspective-origin on parent). Control rendering of nested 3D elements (transform-style: preserve-3d on parent). Hide back faces of rotated elements (backface-visibility: hidden).

Create depth and perspective with 3D transformations.

CSS Transitions

Animate property changes smoothly (transition). Specify the property to transition (transition-property). Set the duration (transition-duration). Define the timing function (acceleration curve: ease, linear, ease-in-out, cubic-bezier()) (transition-timing-function). Add a delay before starting (transition-delay). Use the transition shorthand property.

Create smooth visual effects when property values change.

CSS Animations

Define complex animations using @keyframes rules. Apply animations to elements (animation). Specify animation name (animation-name). Set duration (animation-duration). Define timing function (animation-timing-function). Add delay (animation-delay). Control iteration count (animation-iteration-count: infinite). Set animation direction (animation-direction: alternate). Specify fill mode (animation-fill-mode: forwards, backwards). Control play state (animation-play-state: paused). Use the animation shorthand property.

Build multi-step animations using keyframes.

CSS Multiple Columns Layout

Flow content into multiple columns (column-count, column-width, columns shorthand). Control the gap between columns (column-gap). Add a rule (line) between columns (column-rule-style, column-rule-width, column-rule-color, column-rule shorthand). Make elements span across columns (column-span: all). Control column breaks (break-inside, break-before, break-after).

Create newspaper-like multi-column text layouts.

CSS User Interface

Allow users to resize elements (resize: horizontal, vertical, both). Control outline offset (outline-offset). Modify the cursor appearance (cursor). Customize appearance of form elements (accent-color, appearance).

Properties that affect user interface elements and interactions.

CSS Box Sizing

Default (content-box): Width/Height applies to content only. Recommended (border-box): Width/Height includes content, padding, and border. Using box-sizing: border-box globally simplifies layout calculations.

Control how the browser calculates element dimensions (Box Model).