CSS3: The Visual Guide

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.

p { color: blue; }

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.

h1 { font-size: 2em; }

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.

div { margin: 10px; }

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.

span { display: inline; }

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.

.classe { color: red; }

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

.btn-primary { background: blue; }

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

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

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.

.hidden { display: none; }

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.

#header { position: fixed; }

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.

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

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

#sidebar { width: 300px; }

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.

#footer { margin-top: 50px; }

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.

div.container { width: 100%; }

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.

ul.nav li { display: inline; }

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.

#header .logo { float: left; }

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.

article.post h2 { color: #333; }

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

width: 300px;

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

height: 200px;

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.

max-width: 100%;

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.

min-height: 100vh;

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.

box-sizing: border-box;

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.

margin: 10px;

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.

margin: 10px 20px;

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.

margin: 10px 15px 20px 25px;

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

margin-top: 20px;

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.

margin: 0 auto;

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.

padding: 15px;

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.

padding: 10px 20px;

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.

padding: 5px 10px 15px 20px;

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

padding-left: 30px;

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.

padding: 1em;

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`.

border: 1px solid #ccc;

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

border-radius: 5px;

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.

border-radius: 50%;

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

border-top: 2px dashed red;

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

border: none;

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.

font-family: Arial, sans-serif;

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.

font-family: "Helvetica Neue", Helvetica;

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

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

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.

font-family: "Courier New", monospace;

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

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

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

font-size: 16px;

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.

font-size: 1em;

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.

font-size: 1rem;

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.

font-weight: bold;

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.

font-weight: 300;

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

font-style: italic;

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

text-decoration: underline;

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

text-decoration: none;

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

text-transform: uppercase;

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

text-transform: capitalize;

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

text-align: center;

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.

text-align: justify;

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.

line-height: 1.5;

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

letter-spacing: 1px;

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

word-spacing: 2px;

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.

color: #333333;

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`.

color: rgb(51, 51, 51);

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.

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

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.

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

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

color: inherit;

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

background-color: #f5f5f5;

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).

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

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.

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

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.

background: url("image.jpg");

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

background-size: cover;

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

background-repeat: no-repeat;

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.

background-position: center center;

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

background-attachment: fixed;

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

background-blend-mode: multiply;

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

opacity: 0.8;

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.

color: currentColor;

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

fill: #333;

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

stroke: #666;

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.

filter: brightness(1.2);

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).

filter: saturate(1.5);

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`.

display: block;

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`.

display: inline;

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.

display: inline-block;

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.

display: none;

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).

display: flex;

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).

display: grid;

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.

position: static;

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.

position: relative;

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.

position: absolute;

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.

position: fixed;

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.

position: sticky;

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.

top: 0;

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

right: 0;

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

bottom: 0;

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

left: 0;

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`.

z-index: 100;

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.

float: left;

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

float: right;

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.

clear: both;

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.

clear: left;

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.

overflow: hidden;

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.

display: flex;

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

flex-direction: row;

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

flex-direction: column;

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.

flex-wrap: wrap;

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`.

justify-content: center;

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`.

align-items: center;

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

justify-content: flex-start;

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

justify-content: flex-end;

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

justify-content: center;

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

justify-content: space-between;

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

justify-content: space-around;

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

justify-content: space-evenly;

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.

align-items: stretch;

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

align-items: flex-start;

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

align-items: flex-end;

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

align-items: center;

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

align-items: baseline;

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.

align-content: center;

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.

flex: 1;

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%;`.

flex: 2;

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.

flex-grow: 1;

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).

flex-shrink: 0;

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.

flex-basis: 200px;

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.

align-self: center;

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.

display: grid;

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.

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

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

grid-template-columns: 200px 1fr;

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

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

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`).

grid-template-rows: auto 1fr auto;

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`.

gap: 20px;

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

grid-template-areas:

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.

  "header header header"

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

  "sidebar main main"

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

  "footer footer footer";

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.

grid-area: header;

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.

grid-column: 1 / 3;

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

grid-row: 2 / 4;

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

grid-column: span 2;

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

grid-row: span 3;

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).

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

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

justify-items: center;

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

align-items: center;

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.

justify-content: center;

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.

align-content: center;

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.

place-items: center;

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.

@media (max-width: 768px) {

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.

  .container { width: 100%; }

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

}

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.

@media (min-width: 769px) {

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.

  .container { width: 750px; }

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

}

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.

max-width: 100%;

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

height: auto;

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.

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

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

width: 100vw;

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

height: 100vh;

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.

width: 50vw;

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

height: 100vh;

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.

font-size: 4vw;

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

margin: 2vh;

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.

min-width: 320px;

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).

transition: all 0.3s ease;

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

transition: color 0.5s linear;

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.

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

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

transition-delay: 0.2s;

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.

transition-duration: 0.5s;

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

transform: translateX(50px);

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

transform: translateY(20px);

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

transform: rotate(45deg);

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.

transform: scale(1.2);

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

transform: skewX(15deg);

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

transform: rotateX(45deg);

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

transform: rotateY(45deg);

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

transform: rotateZ(45deg);

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.

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

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.

transform-style: preserve-3d;

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%).

@keyframes slideIn {

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

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

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

  to { transform: translateX(0); }

Closes the `@keyframes` animation definition block.

}

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.

animation: slideIn 0.5s ease-in-out;

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

:hover { color: blue; }

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.

:active { transform: scale(0.95); }

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.

:focus { outline: 2px solid blue; }

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`).

:visited { color: purple; }

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

:link { color: blue; }

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

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

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.

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

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).

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

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

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

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

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

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

:checked { transform: scale(1.2); }

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.

:disabled { opacity: 0.5; }

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.

:enabled { cursor: pointer; }

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

:required { border: 2px solid red; }

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).

:valid { border-color: green; }

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.

::before { content: "→"; }

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

::after { content: "←"; }

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.

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

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.

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

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.

::selection { background: yellow; }

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.

filter: blur(5px);

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.

filter: brightness(1.2);

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.

filter: contrast(1.5);

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.

filter: grayscale(100%);

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

filter: sepia(50%);

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.

filter: hue-rotate(90deg);

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).

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

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

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

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

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

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)`).

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

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.

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

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`.

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

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

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

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.

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

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.

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

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.

clip-path: circle(50%);

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

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

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.

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

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.

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

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.

backdrop-filter: blur(5px);

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

:root {

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 (`--`).

  --primary-color: #3498db;

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

  --secondary-color: #2ecc71;

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

  --font-size-base: 16px;

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

  --spacing-unit: 8px;

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

}

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.

color: var(--primary-color);

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

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

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

margin: var(--spacing-unit);

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`.

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

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.

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

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

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

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`.

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

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.

@media (prefers-color-scheme: dark) {

Within the dark mode media query, redefines the value of the `--primary-color` variable to a lighter shade of blue, suitable for dark backgrounds.

  --primary-color: #5dade2;

Defines a `--bg-color` variable for a very dark gray shade, which will be used as the background color in dark mode.

  --bg-color: #1a1a1a;

Closes the media query style block, ending the conditional rules for dark mode.

}