cssadvanced235 snippets

CSS3: The Visual Guide

Stop guessing display or position values. Master Flexbox, Grid and responsive layouts visually in seconds.

Sections12

🎯 Basic Selectors

16 snippets

This section covers the fundamentals of selecting HTML elements using CSS, enabling you to apply styles to specific elements, groups of elements, or elements with unique identifiers.

Element Selector: Paragraph

Selects all paragraph (<p>) elements in the HTML document and applies blue text color to them. This is the most fundamental type of selector, acting directly on the HTML tag name.

css

p { color: blue; }

Element Selector: H1 Heading

Selects all level 1 heading (<h1>) elements in the HTML document and sets the font size to 2 times the parent element's default font size. Useful for consistently styling all headings of a given level.

css

h1 { font-size: 2em; }

Element Selector: Division

Selects all divisions (<div>) in the HTML document and applies a 10-pixel margin on all four sides (top, right, bottom, left). Used for uniform external spacing of all div blocks.

css

div { margin: 10px; }

Element Selector: Span

Selects all span (<span>) elements and ensures they behave as inline elements, occupying only the space necessary for their content. Although `inline` is the default for `span`, this declaration can be used to reinforce or override inherited styles.

css

span { display: inline; }

Generic Class Selector

Selects all HTML elements that have the `class="classe"` attribute and sets the text color to red. Class selectors are ideal for applying styles to multiple unrelated elements or for style reuse.

css

.classe { color: red; }

Class Selector: Primary Button

Selects elements with the `btn-primary` class and sets the background color to blue. Commonly used to style primary buttons in user interfaces.

css

.btn-primary { background: blue; }

Class Selector: Centered Text

Selects elements with the `text-center` class and centers the text within them. A common utility class for text alignment.

css

.text-center { text-align: center; }

Class Selector: Hidden Element

Selects elements with the `hidden` class and completely removes them from the document flow, making them invisible and non-interactive. Unlike `visibility: hidden;`, `display: none;` does not occupy space.

css

.hidden { display: none; }

ID Selector: Header

Selects the HTML element with the `id="header"` attribute and positions it fixed in the viewport. ID selectors should be used for unique elements on the page.

css

#header { position: fixed; }

ID Selector: Main Content

Selects the element with the ID `main-content` and sets its maximum width to 1200 pixels. This ensures that the main content does not exceed a specific width, keeping it readable on large screens.

css

#main-content { max-width: 1200px; }

ID Selector: Sidebar

Selects the element with the ID `sidebar` and sets its width to 300 pixels. Used to define fixed dimensions for specific layout components.

css

#sidebar { width: 300px; }

ID Selector: Footer

Selects the element with the ID `footer` and applies a top margin of 50 pixels. This creates spacing between the footer and the content above it.

css

#footer { margin-top: 50px; }

Combined Selector: Div with Class

Selects only `div` elements that also have the `container` class, setting their width to 100%. This selector combines an element selector with a class selector for greater specificity.

css

div.container { width: 100%; }

Combined Selector: List Item in Navigation

Selects all list items (<li>) that are descendants of an unordered list (<ul>) with the `nav` class, making them behave as inline elements. Commonly used to create horizontal navigation menus.

css

ul.nav li { display: inline; }

Combined Selector: Element with Class inside ID

Selects the element with the `logo` class that is a descendant of an element with the `header` ID, making it float left. This is useful for positioning specific elements within an identified container.

css

#header .logo { float: left; }

Combined Selector: H2 Title in Article

Selects all level 2 headings (<h2>) that are descendants of an `<article>` element with the `post` class, setting their color to a dark gray shade. Helps style headings within a specific content context.

css

article.post h2 { color: #333; }

📦 Box Model

20 snippets

The Box Model is a fundamental CSS concept describing how HTML elements are rendered as rectangular boxes. Each box has content, padding, border, and margin, which together determine the total size and spacing of the element on the page.

Element Width

Sets the explicit content width of the element to 300 pixels. This property controls the horizontal dimension of the element.

css

width: 300px;

Element Height

Sets the explicit content height of the element to 200 pixels. This property controls the vertical dimension of the element.

css

height: 200px;

Maximum Width

Sets the maximum width an element can occupy to 100% of its parent container. This is crucial for making elements, such as images, responsive, ensuring they do not overflow on smaller screens.

css

max-width: 100%;

Minimum Height

Sets the minimum height of the element to 100% of the viewport height (visible height of the browser window). Ensures the element occupies at least the full screen height, useful for full-page layouts.

css

min-height: 100vh;

Box Sizing: Border-Box

Changes the default Box Model, making an element's width and height include padding and border, but not margin. This simplifies dimension calculation and layout, as the element's total size remains consistent regardless of added padding or border.

css

box-sizing: border-box;

Margin on All Sides

Applies a 10-pixel margin on all four sides (top, right, bottom, left) of the element. Margin creates external space between the element and other adjacent elements.

css

margin: 10px;

Vertical and Horizontal Margin

Applies a 10-pixel margin to the top and bottom, and 20 pixels to the left and right of the element. This is a shorthand syntax for setting vertical and horizontal margins differently.

css

margin: 10px 20px;

Individual Side Margin

Sets specific margins for each side of the element, in order: top (10px), right (15px), bottom (20px), and left (25px). Allows granular control over external spacing.

css

margin: 10px 15px 20px 25px;

Margin Top Only

Applies a 20-pixel margin exclusively to the top of the element, without affecting other sides. Useful for creating specific vertical spacing.

css

margin-top: 20px;

Center Horizontally

Sets the top and bottom margins to 0 and the side margins to "auto". For block elements with a defined width, this centers them horizontally within their parent container.

css

margin: 0 auto;

Padding on All Sides

Applies a padding of 15 pixels to all four sides of the element's content. Padding creates internal space between the content and the element's border.

css

padding: 15px;

Vertical and Horizontal Padding

Applies 10 pixels of padding to the top and bottom, and 20 pixels to the left and right of the element. Shorthand syntax for setting vertical and horizontal padding differently.

css

padding: 10px 20px;

Individual Padding per Side

Sets specific padding for each side of the element, in order: top (5px), right (10px), bottom (15px), and left (20px). Allows granular control over internal spacing.

css

padding: 5px 10px 15px 20px;

Padding Only on Left

Applies a 30-pixel padding exclusively to the left side of the element, without affecting other sides. Useful for creating specific internal spacing.

css

padding-left: 30px;

Padding with Relative Unit

Applies a 1 "em" padding on all sides. The `em` unit is relative to the element's own font size, making the spacing scalable with the text.

css

padding: 1em;

Full Border

Defines a 1-pixel wide, solid style, light gray (`#ccc`) border on all four sides of the element. This is a shorthand property for `border-width`, `border-style`, and `border-color`.

css

border: 1px solid #ccc;

Rounded Borders

Applies a 5-pixel radius to the element's corners, making them rounded. A larger value results in more rounded corners.

css

border-radius: 5px;

Circular/Oval Shape

Applies a 50% radius to the element's corners. If the element is square, it will become a perfect circle; if rectangular, it will become an oval shape.

css

border-radius: 50%;

Styled Top Border

Defines a 2-pixel wide, dashed style, red border only on the top of the element. Allows individual borders to be styled independently.

css

border-top: 2px dashed red;

Remove Border

Completely removes any existing border from the element. It's a concise way to ensure an element has no borders.

css

border: none;

📝 Typography

20 snippets

This section details CSS properties used to control text and font appearance, including family, size, weight, style, decoration, alignment, and spacing. Essential for readability and aesthetics of text content.

Default Font Family

Defines the font family for the text. The browser will try to use "Arial" first; if not available, it will use any generic "sans-serif" font. It is good practice to provide fallback fonts.

css

font-family: Arial, sans-serif;

Font Family with Spaces

Defines the font family, using quotes for font names that contain spaces, such as "Helvetica Neue". If the first is not available, "Helvetica" will be used as a fallback.

css

font-family: "Helvetica Neue", Helvetica;

Serif Font

Sets the font family to a serif font, such as "Times New Roman". Serif fonts are traditionally used for long texts in print.

css

font-family: "Times New Roman", serif;

Monospaced Font

Sets the font family to a monospaced font, such as "Courier New". Monospaced fonts are those where all characters have the same width, ideal for code blocks or tabular data.

css

font-family: "Courier New", monospace;

Fallback Fonts

Defines a sequence of fallback fonts. The browser will try "Georgia", then "Times New Roman", and finally any available generic "serif" font, ensuring compatibility.

css

font-family: Georgia, "Times New Roman", serif;

Font Size in Pixels

Sets the font size to 16 pixels. Pixel units provide fixed and precise size control but can be less flexible for responsiveness.

css

font-size: 16px;

Font Size Relative to Parent (em)

Sets the font size to 1 "em", which is equivalent to the parent element's font size. This allows text to adapt proportionally to its container.

css

font-size: 1em;

Font Size Relative to Root (rem)

Sets the font size to 1 "rem", which is equivalent to the font size of the root element (<html>). `rem` is ideal for maintaining a consistent font scale throughout the document, facilitating responsiveness.

css

font-size: 1rem;

Font Weight: Bold

Sets the font weight to bold. Can be used to highlight important text. Other values include `normal`, `lighter`, `bolder`, or numeric values from 100 to 900.

css

font-weight: bold;

Numeric Font Weight

Sets the font weight using a numeric value (between 100 and 900, in multiples of 100). `300` usually corresponds to a "light" or "thin" font, if available in the font family.

css

font-weight: 300;

Font Style: Italic

Sets the font style to italic. Used to emphasize text or for specific typographic styles. Other values include `normal` and `oblique`.

css

font-style: italic;

Text Decoration: Underline

Applies a line below the text, i.e., underlines it. Commonly used for links, but can be applied to any text.

css

text-decoration: underline;

Remover Decoração de Texto

Remove qualquer decoração de texto padrão, como o sublinhado em links (<a>). Essencial para estilizar links de forma personalizada.

css

text-decoration: none;

Text Transform: Uppercase

Converts all text of the element to uppercase letters, without changing the original content in HTML. Useful for titles or visual emphasis.

css

text-transform: uppercase;

Text Transform: Capitalize

Converts the first letter of each word in the element's text to uppercase. Useful for titles or proper nouns.

css

text-transform: capitalize;

Text Alignment: Centered

Horizontally centers the text within its container element. Applies to block elements or table cells.

css

text-align: center;

Text Alignment: Justified

Distributes text evenly between the left and right margins, adding extra space between words as needed. Commonly used in long blocks of text for a formal appearance.

css

text-align: justify;

Line Height

Sets the line height to 1.5 times the element's font size. A unitless `line-height` is most recommended as it scales proportionally with `font-size`, improving readability.

css

line-height: 1.5;

Letter Spacing

Adds an extra 1-pixel spacing between text characters. Can be used to adjust the visual density of the text.

css

letter-spacing: 1px;

Word Spacing

Adds an extra 2-pixel spacing between words in the text. Can be used to adjust the readability of phrases.

css

word-spacing: 2px;

🎨 Colors and Backgrounds

20 snippets

This section explores CSS properties for setting text colors, background colors and images, as well as applying gradients and other visual effects. Crucial for the visual identity of any web page.

Hexadecimal Color

Sets the text color using a 6-digit (or 3-digit) hexadecimal code, where each pair represents the Red, Green, and Blue (RGB) values. `#333333` is a dark gray shade.

css

color: #333333;

RGB Color

Sets the text color using the RGB (Red, Green, Blue) model, with values from 0 to 255 for each component. `rgb(51, 51, 51)` is equivalent to `#333333`.

css

color: rgb(51, 51, 51);

RGBA Color (with Transparency)

Defines the text color using the RGBA model, which includes an alpha channel (transparency) with a value from 0 (fully transparent) to 1 (fully opaque). `0.8` means 80% opacity.

css

color: rgba(51, 51, 51, 0.8);

HSL Color

Defines the text color using the HSL model (Hue, Saturation, Lightness). `Hue` is a degree on the color circle (0-360), `Saturation` is the color intensity (0-100%), and `Lightness` is the brightness (0-100%). `hsl(0, 0%, 20%)` is a dark gray.

css

color: hsl(0, 0%, 20%);

Inherit Parent Color

Makes the element inherit the text color from its parent element. Useful for maintaining color consistency in nested elements.

css

color: inherit;

Solid Background Color

Sets a solid background color for the element using a hexadecimal code. `#f5f5f5` is a very light gray tone, almost white.

css

background-color: #f5f5f5;

Linear Background Gradient

Applies a linear gradient as a background color, transitioning from one color to another in a specific direction. `to right` indicates the gradient goes from left to right, with colors `#ff7e5f` (reddish orange) and `#feb47b` (peach).

css

background: linear-gradient(to right, #ff7e5f, #feb47b);

Radial Background Gradient

Applies a radial gradient as a background color, spreading from a central point. `circle` defines the gradient's shape, transitioning from `#ff7e5f` at the center to `#feb47b` at the edges.

css

background: radial-gradient(circle, #ff7e5f, #feb47b);

Background Image

Sets an image as the element's background. The path to the image is specified within `url()`. By default, the image will repeat to cover the entire element.

css

background: url("image.jpg");

Background Image Size: Cover

Adjusts the background image size so that it completely covers the element's area, cropping any excess parts. Maintains the image's aspect ratio.

css

background-size: cover;

Do Not Repeat Background Image

Prevents the background image from repeating. If the image is smaller than the element, it will appear only once.

css

background-repeat: no-repeat;

Background Image Position: Center

Positions the background image in the horizontal and vertical center of the element. Can be combined with `background-repeat: no-repeat;` to display a single centered image.

css

background-position: center center;

Fixed Background on Scroll

Makes the background image remain fixed in the viewport while the rest of the page content scrolls. Creates a parallax effect.

css

background-attachment: fixed;

Background Blend Mode

Defines how an element's background images (or colors) should be blended with each other. `multiply` multiplies the background colors, resulting in darker colors.

css

background-blend-mode: multiply;

Element Transparency

Sets the opacity (transparency) level of the entire element, including its content. A value of `0.8` means 80% opaque (20% transparent).

css

opacity: 0.8;

Current Element Color

Sets an element's color to the current value of the element's own `color` property. Useful for elements like borders or SVG fills that should match the text color.

css

color: currentColor;

Fill Color (SVG)

Defines the fill color of an SVG shape. Applies to SVG elements like `<path>`, `<circle>`, `<rect>`, etc., filling their interior with the specified color.

css

fill: #333;

Border Color (SVG)

Defines the color of the border (outline) of an SVG shape. Applies to SVG elements, drawing an outline with the specified color.

css

stroke: #666;

Filter: Brightness Adjustment

Applies a brightness filter to the element. A value of `1.2` (or 120%) increases brightness by 20%. `1` is the normal value, `0` is completely black.

css

filter: brightness(1.2);

Filter: Saturation

Applies a saturation filter to the element. A value of `1.5` (or 150%) increases color saturation by 50%, making them more vibrant. `1` is the normal value, `0` is fully desaturated (grayscale).

css

filter: saturate(1.5);

📐 Layout and Positioning

21 snippets

This section covers essential CSS properties for controlling layout and positioning of elements on the page, including display type, relative/absolute/fixed positioning, and float/clear techniques.

Display: Block

Makes the element behave as a block-level element. It occupies the full available width, forces a line break before and after it, and allows the application of `width`, `height`, `margin`, and `padding`.

css

display: block;

Display: Inline

Makes the element behave as an inline element. It occupies only the width required for its content, does not force line breaks, and ignores `width`, `height`, and `margin-top`/`margin-bottom`.

css

display: inline;

Display: Inline-Block

Combines `inline` and `block` characteristics. The element behaves like `inline` (does not force a line break), but accepts `width`, `height`, `margin`, and `padding` like a `block` element.

css

display: inline-block;

Display: Hide Element

Completely removes the element from the document flow. It is not rendered, does not occupy space, and is not interactive. Unlike `visibility: hidden;`, which only visually hides the element but maintains its space.

css

display: none;

Display: Flexbox Container

Transforms the element into a flexible container, activating the Flexbox context for its direct children. Allows for efficient and responsive creation of one-dimensional layouts (row or column).

css

display: flex;

Display: Grid Container

Transforms the element into a grid container, activating the CSS Grid context for its direct children. Allows for the creation of complex and responsive two-dimensional layouts (rows and columns).

css

display: grid;

Position: Static (Default)

This is the default value for all elements. Elements with `position: static;` are positioned according to the normal flow of the document, and the `top`, `right`, `bottom`, `left`, and `z-index` properties have no effect.

css

position: static;

Position: Relative

The element is positioned according to the normal flow of the document, but can be offset from its original position using `top`, `right`, `bottom`, and `left`. The element's original space is maintained in the layout.

css

position: relative;

Position: Absolute

The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (non-`static`). If no positioned ancestor is found, it is positioned relative to the `<html>`. The `top`, `right`, `bottom`, and `left` properties control its offset.

css

position: absolute;

Position: Fixed

The element is removed from the normal document flow and positioned relative to the viewport (browser window). It remains in the same position even when the page is scrolled, ideal for fixed headers or menus.

css

position: fixed;

Position: Sticky

The element is positioned relatively until its scroll position reaches a specified threshold (defined by `top`, `right`, `bottom`, or `left`), after which it becomes fixed on the screen. Useful for elements that "stick" when scrolling.

css

position: sticky;

Coordinate: Distance from Top

Defines the element's distance from the top edge of its positioned container (for `absolute`, `fixed`, `relative`, `sticky`). `0` aligns it perfectly to the top.

css

top: 0;

Coordinate: Distance from Right

Defines the element's distance from the right edge of its positioned container. `0` aligns it perfectly to the right.

css

right: 0;

Coordinate: Distance from Base

Defines the element's distance from the bottom edge of its positioned container. `0` aligns it perfectly to the base.

css

bottom: 0;

Coordinate: Distance from Left

Defines the element's distance from the left edge of its positioned container. `0` aligns it perfectly to the left.

css

left: 0;

Z-Index: Element Stacking

Controls the stacking order of positioned elements. Elements with a higher `z-index` will appear above elements with a lower `z-index`. Only works on elements with a `position` other than `static`.

css

z-index: 100;

Float: Float Left

Removes the element from the normal document flow and positions it to the left of its container, allowing other content to flow around it. Historically used for multi-column layouts.

css

float: left;

Float: Float Right

Removes the element from the normal document flow and positions it to the right of its container, allowing other content to flow around it.

css

float: right;

Clear: Clear Floats (Both)

Prevents the element from being positioned next to previous floating elements, both left and right. It forces the element to start on a new line below all floating elements.

css

clear: both;

Clear: Clear Float (Left)

Prevents the element from being positioned next to floating elements on the left. It forces the element to start on a new line below any floating element on the left.

css

clear: left;

Overflow: Hidden (Clearfix)

When applied to a parent container, this property can "contain" floating elements within it, preventing the container from collapsing. It's a common "clearfix" technique to ensure the parent correctly wraps its floating children.

css

overflow: hidden;

🔧 Flexbox

24 snippets

Flexbox is a one-dimensional CSS layout module designed to distribute space between items in a container and align those items. Extremely effective for creating flexible and responsive layouts in a single row or column.

Create Flex Container

Transforms the element into a flexible container, activating the Flexbox context for its direct children (flex items). Flex items will arrange themselves in a single row by default.

css

display: flex;

Item Direction: Row (Default)

Sets the main direction of flex items to horizontal (left-to-right in LTR languages). This is the default behavior of Flexbox.

css

flex-direction: row;

Item Direction: Column

Sets the main direction of flex items to vertical (top to bottom). Items will be stacked one below the other.

css

flex-direction: column;

Allow Wrapping

Allows flex items to wrap to the next line (or column, depending on `flex-direction`) if there isn't enough space in the container. The default is `nowrap`, which tries to keep all items on a single line/column.

css

flex-wrap: wrap;

Horizontal Alignment (Main Axis)

Aligns flex items along the main axis (horizontal by default) of the flex container. `center` centers the items. Other options include `flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

css

justify-content: center;

Vertical Alignment (Cross Axis)

Aligns flex items along the cross axis (vertical by default) of the flex container. `center` vertically centers the items. Other options include `flex-start`, `flex-end`, `stretch`, `baseline`.

css

align-items: center;

Justify Content: Align to Start

Aligns flex items to the start of the flex container's main axis. In `row`, items align to the left.

css

justify-content: flex-start;

Justify Content: Align to End

Aligns flex items to the end of the flex container's main axis. In `row`, items align to the right.

css

justify-content: flex-end;

Justify Content: Center

Centers flex items along the main axis of the flex container.

css

justify-content: center;

Justify Content: Space Between Items

Distributes extra space evenly between flex items. The first item is aligned to the start and the last to the end of the container.

css

justify-content: space-between;

Justify Content: Space Around Items

Distributes extra space evenly around flex items, resulting in half the space at the container's ends and full space between items.

css

justify-content: space-around;

Justify Content: Equal Spacing

Distributes extra space so that the space between each pair of items and the space between items and container edges are equal.

css

justify-content: space-evenly;

Align Items: Stretch to Fill

Stretches flex items to fill the full height of the flex container along the cross-axis, provided they don't have an explicit height defined. This is the default behavior.

css

align-items: stretch;

Align Items: Align to Top

Aligns flex items to the start of the flex container's cross-axis. In `row`, items align to the top.

css

align-items: flex-start;

Align Items: Align to End

Aligns flex items to the end of the flex container's cross axis. In `row`, items align to the bottom.

css

align-items: flex-end;

Align Items: Vertically Center

Centers flex items along the flex container's cross axis. In `row`, items center vertically.

css

align-items: center;

Align Items: Align to Baseline

Aligns flex items so that their text baselines are aligned along the cross axis.

css

align-items: baseline;

Align Content: Align Lines (with Wrap)

When there are multiple lines of flex items (due to `flex-wrap: wrap;`), this property aligns these lines as a group within the flex container. `center` vertically centers all lines. Similar to `justify-content` but for the cross-axis and multiple lines.

css

align-content: center;

Flex Item: Equal Growth

Shorthand property for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%;`. Makes the flex item grow and shrink to fill available space equally among other flex items. Each item with `flex: 1;` will have the same relative size.

css

flex: 1;

Flex Item: Proportional Growth

Shorthand property that makes the flex item grow twice as much as items with `flex: 1;`. `flex-grow: 2; flex-shrink: 1; flex-basis: 0%;`.

css

flex: 2;

Grow Capability

Defines the flex item's ability to grow to occupy available extra space in the container. A value of `1` means it will occupy a proportional part of the extra space.

css

flex-grow: 1;

No Shrink

Defines the flex item's ability to shrink when there isn't enough space in the container. A value of `0` prevents the item from shrinking below its `flex-basis` (or minimum content).

css

flex-shrink: 0;

Item Base Size

Defines the initial size of a flex item before any extra space is distributed. It can be a fixed value like `200px` or a percentage.

css

flex-basis: 200px;

Individual Item Alignment

Allows overriding the `align-items` property of the flex container for an individual flex item. `center` vertically centers this specific item, regardless of how other items are aligned.

css

align-self: center;

🔲 CSS Grid

21 snippets

CSS Grid Layout is a two-dimensional layout system that allows organizing elements in rows and columns, offering robust control over positioning and sizing. Ideal for creating complex page layouts efficiently.

Create Grid Container

Transforms the element into a grid container, activating the CSS Grid context for its direct children (grid items). Allows defining explicit rows and columns for the layout.

css

display: grid;

Define 3 Equal Columns

Defines three columns in the grid, where `1fr` means a fraction of the available space. Each column will occupy an equal part of the container's remaining space.

css

grid-template-columns: 1fr 1fr 1fr;

Fixed and Flexible Columns

Defines two columns: the first with a fixed width of 200 pixels and the second occupying the remaining available space (`1fr`).

css

grid-template-columns: 200px 1fr;

Repeat Columns

A shorthand function that creates three columns, each occupying an equal fraction of the available space. Equivalent to `1fr 1fr 1fr`.

css

grid-template-columns: repeat(3, 1fr);

Define Grid Rows

Defines three rows in the grid: the first and last rows automatically adjust to content (`auto`), and the middle row occupies the remaining available space (`1fr`).

css

grid-template-rows: auto 1fr auto;

Spacing Between Items (Gap)

Sets the spacing (gutter) of 20 pixels between grid rows and columns. It is a shorthand property for `grid-row-gap` and `grid-column-gap`.

css

gap: 20px;

Define Grid Areas

Starts defining named areas within the grid layout. Allows creating visual layouts intuitively by assigning names to cell blocks.

css

grid-template-areas:

Grid Area: First Row (Header)

Defines the first grid row as an area named "header" that spans three columns. The quotes indicate a row, and the names within them represent the cells.

css

  "header header header"

Grid Area: Second Row (Sidebar and Main)

Defines the second grid row with three cells: the first is a "sidebar" and the next two are "main".

css

  "sidebar main main"

Grid Area: Third Row (Footer)

Defines the third and last grid row as an area named "footer" that spans three columns. The semicolon terminates the `grid-template-areas` declaration.

css

  "footer footer footer";

Assign Element to an Area

Assigns a grid item to a named area previously defined in `grid-template-areas`. The element with this property will occupy all cells of the "header" area.

css

grid-area: header;

Occupy Specific Columns

Makes a grid item start at grid line 1 and end at grid line 3, thus occupying columns 1 and 2. The number after the slash is exclusive.

css

grid-column: 1 / 3;

Occupy Specific Rows

Makes a grid item start at grid line 2 and end at grid line 4, thus occupying rows 2 and 3.

css

grid-row: 2 / 4;

Occupy Multiple Columns

Makes a grid item occupy two columns from its starting position. `span` is useful when the starting position is not fixed.

css

grid-column: span 2;

Occupy Multiple Rows

Makes a grid item occupy three rows from its starting position.

css

grid-row: span 3;

Full Item Position

Shorthand property to define a grid item's position using `grid-row-start`, `grid-column-start`, `grid-row-end`, and `grid-column-end`. In this case, the item starts at row 1, column 1, and extends up to row 3 (exclusive) and column 4 (exclusive).

css

grid-area: 1 / 1 / 3 / 4;

Justify Items Horizontally

Aligns the content of each grid item individually along the row axis (horizontal) within its own grid cell. `center` horizontally centers the content.

css

justify-items: center;

Align Items Vertically

Aligns the content of each grid item individually along the column axis (vertical) within its own grid cell. `center` vertically centers the content.

css

align-items: center;

Align Grid Horizontally

Aligns the entire grid (the column tracks) along the row axis (horizontal) within the grid container, when there is extra space. `center` centers the grid.

css

justify-content: center;

Align Grid Vertically

Aligns the entire grid (the row tracks) along the column axis (vertical) within the grid container, when there is extra space. `center` centers the grid.

css

align-content: center;

Align Items and Content (Both)

Shorthand property that sets `justify-items` and `align-items` simultaneously. `center` centers the content of each grid item both horizontally and vertically within its cell.

css

place-items: center;

📱 Responsiveness

16 snippets

This section focuses on CSS techniques and properties for creating layouts that adapt to different screen sizes and devices. Responsiveness is crucial for a consistent and accessible user experience across all platforms.

Media Query: Mobile Devices

Initiates a style block that will be applied only when the viewport width is equal to or less than 768 pixels. This is commonly used to target specific styles for tablets and smartphones.

css

@media (max-width: 768px) {

Mobile Adjustment

Within a media query for mobile devices, sets the width of an element with the `container` class to 100%. This ensures the container occupies the full available width on smaller screens.

css

  .container { width: 100%; }

Close Media Query

Closes the media query style block, indicating the end of conditional CSS rules.

css

Media Query: Larger Devices

Starts a style block that will be applied only when the viewport width is equal to or greater than 769 pixels. This is commonly used to target specific styles for desktops and larger screens.

css

@media (min-width: 769px) {

Desktop Adjustment

Within a media query for larger devices, sets the width of an element with the `container` class to 750 pixels. This can be used to limit content width on large screens.

css

  .container { width: 750px; }

Close Media Query

Closes the media query style block, indicating the end of conditional CSS rules.

css

Responsive Image

Sets the maximum width of an image to 100% of its container. Combined with `height: auto;`, this ensures the image never exceeds its parent's width and maintains its original aspect ratio when resizing.

css

max-width: 100%;

Maintain Image Aspect Ratio

Sets an element's height (usually an image) to adjust automatically, maintaining its original aspect ratio relative to its width. Essential for responsive images.

css

height: auto;

Fluid Font (calc + vw)

Sets the font size using the `calc()` function to create a fluid size. The base size is 16 pixels, and `0.5vw` (0.5% of the viewport width) is added, causing the font to slightly increase or decrease with screen size.

css

font-size: calc(16px + 0.5vw);

Viewport Width

Sets the element's width to 100% of the viewport width (visible browser window). Useful for elements that should occupy the entire screen width.

css

width: 100vw;

Viewport Height

Sets the element's height to 100% of the viewport height (browser's visible window). Useful for creating full-page sections or "hero" layouts.

css

height: 100vh;

Viewport Relative Width

Sets the element's width to 50% of the viewport width. `vw` and `vh` units are ideal for creating elements that scale directly with screen size.

css

width: 50vw;

Viewport Relative Height

Sets the element's height to 100% of the viewport height. Ensures the element occupies the full screen height.

css

height: 100vh;

Viewport Relative Font Size

Sets the font size to 4% of the viewport width. This makes the text fluidly increase or decrease in size as the screen width changes.

css

font-size: 4vw;

Viewport Relative Margin

Defines a margin of 2% of the viewport height on all sides of the element. Allows vertical spacing to adapt to screen size.

css

margin: 2vh;

Minimum Width

Defines the minimum width an element can have, even if the viewport is smaller. This prevents content from becoming unreadable on very small screens, forcing horizontal scrolling if necessary.

css

min-width: 320px;

✨ Animations and Transitions

20 snippets

This section explores powerful CSS tools for adding motion and interactivity to elements, including smooth transitions, 2D and 3D transforms, and complex keyframe-based animations. Essential for dynamic user experiences.

Smooth Transition (Shorthand)

Applies a smooth transition to all CSS properties that change value. The transition will last 0.3 seconds and use the `ease` timing function (starts and ends slowly).

css

transition: all 0.3s ease;

Specific Property Transition

Applies a 0.5-second transition with `linear` timing (constant speed) only to the `color` property. Other properties will change instantly.

css

transition: color 0.5s linear;

Transition with Custom Animation Curve

Applies a transition to the `transform` property with a duration of 0.3 seconds and a custom `cubic-bezier` timing function. `cubic-bezier` allows creating complex acceleration and deceleration curves for more expressive transitions.

css

transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Transition Delay

Sets a delay of 0.2 seconds before the transition starts executing. The element will remain in its initial state for this period.

css

transition-delay: 0.2s;

Transition Duration

Sets the total transition duration to 0.5 seconds. Controls the time it takes for the property to change from its initial to its final state.

css

transition-duration: 0.5s;

2D Transform: Move Horizontally

Moves the element 50 pixels to the right along the X-axis. Negative values move to the left.

css

transform: translateX(50px);

2D Transform: Move Vertically

Moves the element 20 pixels down along the Y-axis. Negative values move upwards.

css

transform: translateY(20px);

2D Transform: Rotate

Rotates the element 45 degrees clockwise around its origin point (center by default). Negative values rotate counter-clockwise.

css

transform: rotate(45deg);

2D Transform: Scale (Increase Size)

Increases the size of the element by 20% (1.2 times its original size) on both the X and Y axes. `scale(x, y)` allows for different scaling on each axis.

css

transform: scale(1.2);

2D Transform: Skew Horizontally

Skews the element 15 degrees along the X-axis, creating a distortion effect. `skewY()` skews vertically.

css

transform: skewX(15deg);

3D Transform: Rotate on X-Axis

Rotates the element 45 degrees around the X-axis (horizontal), creating a forward or backward tilt effect.

css

transform: rotateX(45deg);

3D Transform: Rotate on Y-Axis

Rotates the element 45 degrees around the Y-axis (vertical), creating a side-turning effect.

css

transform: rotateY(45deg);

3D Transform: Rotate on Z-Axis

Rotates the element 45 degrees around the Z-axis (depth), which is equivalent to `rotate(45deg)` in 2D.

css

transform: rotateZ(45deg);

Combined 3D Perspective

Applies a 1000-pixel perspective to the element before rotating it 45 degrees on the X-axis. The `perspective` property (applied to the parent or as a `transform` function) is crucial for creating the illusion of depth in 3D transformations.

css

transform: perspective(1000px) rotateX(45deg);

Preserve 3D Context

Applied to a parent element, this property ensures that the element's 3D children are positioned in the same 3D space, rather than being flattened onto the 2D plane. Essential for creating complex 3D scenes with multiple elements.

css

transform-style: preserve-3d;

Define Keyframe Animation

Starts the definition of a CSS animation named `slideIn`. Within this block, you define the animation stages (keyframes) using percentages or the keywords `from` (0%) and `to` (100%).

css

@keyframes slideIn {

Initial Animation State

Defines the initial state of the animation (0%). In this case, the element starts 100% of its width off-screen to the left.

css

  from { transform: translateX(-100%); }

Animation End State

Defines the animation's end state (100%). In this case, the element ends in its original position (no horizontal displacement).

css

  to { transform: translateX(0); }

Close Keyframe

Closes the `@keyframes` animation definition block.

css

Apply Animation

Applies the `slideIn` animation to the element. The animation will have a duration of 0.5 seconds and use the `ease-in-out` timing function (starts and ends slowly, accelerates in the middle). This is a shorthand property that includes `animation-name`, `animation-duration`, `animation-timing-function`, among others.

css

animation: slideIn 0.5s ease-in-out;

🔍 Pseudo-classes and Pseudo-elements

20 snippets

This section explores pseudo-classes and pseudo-elements, which allow styling elements in specific states or parts of elements not represented by explicit HTML tags. Powerful tools for adding interactivity and visual refinement.

Pseudo-class: Hover

Applies styles when the mouse cursor is over the element. In this example, the text color changes to blue on hover.

css

:hover { color: blue; }

Pseudo-class: Active

Applies styles when the element is being activated (e.g., clicked by a mouse or touched on a touchscreen device). In this example, the element slightly shrinks when activated.

css

:active { transform: scale(0.95); }

Pseudo-class: Focus

Applies styles when the element (usually a form field or link) receives focus, either by tabbing or clicking. In this example, a blue border is added to indicate focus.

css

:focus { outline: 2px solid blue; }

Pseudo-classe: Visited

Aplica estilos a links (<a>) que já foram visitados pelo usuário. Por razões de privacidade, as propriedades que podem ser alteradas são limitadas (principalmente `color`).

css

:visited { color: purple; }

Pseudo-class: Link

Applies styles to links (<a>) that have not yet been visited by the user. It is the initial state of a link.

css

:link { color: blue; }

Structural Pseudo-class: First Child

Selects the first child element of its parent. In this example, the first child of any parent element will have bold text.

css

:first-child { font-weight: bold; }

Structural Pseudo-class: Last Child

Selects the last child element of its parent. Useful for removing unnecessary margins or paddings at the end of a list or group of elements.

css

:last-child { margin-bottom: 0; }

Structural Pseudo-class: Odd Children

Selects all child elements that are in odd positions (1st, 3rd, 5th, etc.) of their parent. Commonly used to create stripes in tables or lists (zebra-striping).

css

:nth-child(odd) { background: #f0f0f0; }

Structural Pseudo-class: Even Children

Selects all child elements that are in even positions (2nd, 4th, 6th, etc.) of their parent. Complements zebra-striping style.

css

:nth-child(even) { background: #fff; }

Structural Pseudo-class: Third Child

Selects the third child element of its parent. The number inside the parentheses specifies the exact position of the child to be selected.

css

:nth-child(3) { color: red; }

Form Pseudo-class: Checked

Applies styles to radio or checkbox input elements when they are checked (selected). In this example, the element increases in size when checked.

css

:checked { transform: scale(1.2); }

Form Pseudo-class: Disabled

Applies styles to form elements that are disabled (with the `disabled` attribute). In this example, the element becomes semi-transparent to indicate it cannot be interacted with.

css

:disabled { opacity: 0.5; }

Form Pseudo-class: Enabled

Applies styles to form elements that are enabled (without the `disabled` attribute). In this example, the cursor changes to a pointer to indicate the element is interactive.

css

:enabled { cursor: pointer; }

Form Pseudo-class: Required

Applies styles to form fields that have the `required` attribute, indicating they are mandatory. In this example, a red border is added.

css

:required { border: 2px solid red; }

Form Pseudo-class: Valid

Applies styles to form fields whose content is considered valid according to their validation rules (e.g., a well-formatted email in a `type="email"` field).

css

:valid { border-color: green; }

Pseudo-element: Before Content

Inserts CSS-generated content before the actual content of an element. The `content` property value is mandatory. Commonly used for icons, quotes, or decorative markers.

css

::before { content: "→"; }

Pseudo-element: After Content

Inserts CSS-generated content after the actual content of an element. Similar to `::before`, but positions the content at the end.

css

::after { content: "←"; }

Pseudo-element: First Line

Applies styles to the first line of text of a block element. The "first line" is determined by the element's width, not by the HTML. In this example, the first line is bold.

css

::first-line { font-weight: bold; }

Pseudo-element: First Letter

Applies styles to the first letter of a block element's text. Commonly used to create "drop cap" effects or initial caps, increasing the size of the first letter.

css

::first-letter { font-size: 2em; }

Pseudo-element: Selected Text

Applies styles to text that the user has selected (highlighted) in a document. In this example, the background of the selected text will be yellow. The properties that can be changed are limited.

css

::selection { background: yellow; }

🚀 Advanced Properties

20 snippets

This section explores advanced CSS properties for creating sophisticated visual effects like image filters, shadows, complex gradients, and element clipping. Ideal for adding a modern and creative touch to interfaces.

Filter: Blur

Applies a Gaussian blur effect to the element. A value of `5px` indicates that pixels will be blurred within a 5-pixel radius. Larger values result in more blur.

css

filter: blur(5px);

Filter: Brightness

Adjusts the brightness of the element. A value of `1.2` (or 120%) increases brightness by 20%. `1` is normal brightness, `0` makes the element completely black.

css

filter: brightness(1.2);

Filter: Contrast

Adjusts the contrast of the element. A value of `1.5` (or 150%) increases the contrast by 50%. `1` is normal contrast, `0` makes the element grayscale.

css

filter: contrast(1.5);

Filter: Grayscale

Converts the element's colors to a grayscale. A value of `100%` completely removes color saturation, making it black and white. `0%` keeps the original colors.

css

filter: grayscale(100%);

Filter: Sepia Effect

Applies a sepia effect to the element, giving it an old reddish-brown tone. A value of `50%` applies half of the total effect.

css

filter: sepia(50%);

Filter: Hue Rotation

Rotates the element's colors around the color wheel. `90deg` shifts the hue by 90 degrees, dramatically changing the colors. `0deg` or `360deg` has no effect.

css

filter: hue-rotate(90deg);

Soft Box Shadow

Applies a soft shadow around the element's box. The values are: X-offset (0), Y-offset (2px), blur radius (4px), and color (`rgba(0,0,0,0.1)` - black with 10% opacity).

css

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Medium Box Shadow

Applies a medium intensity shadow to the element's box, with greater Y-offset and blur radius, and 20% opacity.

css

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

Strong Box Shadow

Applies a more prominent shadow to the element's box, with greater offset, blur, and 30% opacity, creating a more pronounced elevation effect.

css

box-shadow: 0 8px 16px rgba(0,0,0,0.3);

Text Shadow

Applies a shadow to the element's text. The values are: X offset (2px), Y offset (2px), blur radius (4px), and color (`rgba(0,0,0,0.3)`).

css

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Inner Box Shadow

Applies an inner (inset) shadow to the element's box, creating a depth effect or a "pressed" element effect. The term `inset` is added before other values.

css

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Diagonal Linear Gradient

Applies a linear gradient that extends at a 45-degree angle, transitioning from color `#ff7e5f` to `#feb47b`. The angle can be specified in `deg`, `grad`, `rad`, or `turn`.

css

background: linear-gradient(45deg, #ff7e5f, #feb47b);

Basic Radial Gradient

Applies a radial gradient with a circle shape, starting with color `#ff7e5f` at the center and transitioning to `#feb47b` at the edges.

css

background: radial-gradient(circle, #ff7e5f, #feb47b);

Conic Gradient

Applies a conic gradient that rotates around a central point, creating a "pizza slice" effect. `from 0deg` defines the rotation's starting point. Colors are distributed angularly.

css

background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);

Repeating Linear Gradient

Creates a repeating linear gradient pattern. In this example, it creates 10px stripes of `#ff7e5f` and 10px of `#feb47b`, repeating at a 45-degree angle.

css

background: repeating-linear-gradient(45deg, #ff7e5f, #ff7e5f 10px, #feb47b 10px, #feb47b 20px);

Clip Path: Circular Clip

Clips the element into a circular shape. `circle(50%)` creates a circle with a radius of 50% of the element's smaller side, centered. Content outside the clip path is invisible.

css

clip-path: circle(50%);

Clip Path: Polygonal Clip

Clips the element into a polygonal shape defined by a list of point coordinates. In this example, it creates a diamond shape.

css

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Clip Path: Elliptical Clip

Clips the element into an elliptical shape. `ellipse(rx ry at x y)` defines the horizontal and vertical radii and the center position of the ellipse.

css

clip-path: ellipse(50% 40% at 50% 50%);

Image Mask

Applies an image as a mask to the element. The mask image (usually a PNG with transparency or SVG) defines which parts of the element are visible and which are transparent.

css

mask-image: url("mask.png");

Backdrop Filter: Background Blur

Applies a filter effect to the background area *behind* the element. In this example, content visible through the element will be blurred by 5 pixels, creating a frosted glass effect. Requires browser support and is usually used with a semi-transparent background on the element.

css

backdrop-filter: blur(5px);

🎨 CSS Custom Properties (Variables)

17 snippets

CSS Custom Properties, also known as CSS variables, allow defining reusable values in a stylesheet. They facilitate maintenance, promote design consistency, and enable dynamic theming.

Start of Global Variable Declaration

The `:root` selector represents the document's root element (the `<html>` element). Declaring variables here makes them globally accessible throughout the CSS document.

css

:root {

Variable Declaration: Primary Color

Declares a CSS variable named `--primary-color` and assigns it the hexadecimal value `#3498db` (a shade of blue). CSS variable names start with two hyphens (`--`).

css

  --primary-color: #3498db;

Variable Declaration: Secondary Color

Declares a CSS variable named `--secondary-color` and assigns it the value `#2ecc71` (a shade of green).

css

  --secondary-color: #2ecc71;

Variable Declaration: Base Font Size

Declares a CSS variable to define the base font size, facilitating typographic consistency throughout the project.

css

  --font-size-base: 16px;

Variable Declaration: Spacing Unit

Declares a CSS variable to define a spacing unit, useful for creating a consistent, grid-based spacing system.

css

  --spacing-unit: 8px;

End of Variable Declaration

Closes the CSS variable declaration block within the `:root` selector.

css

Using Variable for Color

Applies the value of the `--primary-color` variable to the `color` property. The `var()` function is used to access the value of a custom property.

css

color: var(--primary-color);

Using Variable for Font Size

Applies the value of the `--font-size-base` variable to the `font-size` property, ensuring the text uses the defined base size.

css

font-size: var(--font-size-base);

Using Variable for Margin

Applies the value of the `--spacing-unit` variable to the `margin` property, using the consistent spacing unit.

css

margin: var(--spacing-unit);

Calculation with Variable

Uses the `calc()` function to perform mathematical operations with CSS variables. In this case, padding is set to double the value of `--spacing-unit`, resulting in `16px`.

css

padding: calc(var(--spacing-unit) * 2);

Variable with Default Value (Fallback)

Uses the `--primary-color` variable. If the variable is not defined, the fallback value `#333` (dark gray) will be used. This increases the robustness of the CSS.

css

color: var(--primary-color, #333);

Variable with Explicit Fallback

Uses the `--font-size-base` variable with a fallback value of `16px` if the variable is not found or is undefined.

css

font-size: var(--font-size-base, 16px);

Nested Variable Fallback

Demonstrates the use of nested fallbacks. Tries to use `--bg-color`. If not defined, tries `--white`. If `--white` is also not defined, uses the final value `#fff`.

css

background: var(--bg-color, var(--white, #fff));

Media Query para Modo Escuro

Inicia um bloco de estilos que será aplicado se o sistema operacional do usuário estiver configurado para o modo escuro. Permite criar temas dinâmicos que se adaptam às preferências do usuário.

css