# data[].attributes.attachment_link.readable_text
Get the poster!

Reference this guide a lot? Here's a high-res image you can print!

CSS Grid Layout (aka "Grid" or "CSS Grid"), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS has always been used to layout our web pages, but it's never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox is also a very great layout tool, but its one-directional flow has different use cases - and they actually work together quite well! Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.

The intention of this guide is to present the Grid concepts as they exist in the latest version of the specification. So I won't be covering the out-of-date Internet Explorer syntax (even though you can absolutely use Grid in IE 11) or other historical hacks.

As of March 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. Internet Explorer 10 and 11 on the other hand support it, but it's an old implementation with an outdated syntax. The time to build with grid is now!

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Similarly to flexbox, the source order of the grid items doesn't matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

Desktop

Chrome

Firefox

IE

Edge

Safari

57

52

11*

16

10.1

Mobile / Tablet

Android Chrome

Android Firefox

Android

iOS Safari

100

98

99

10.3

Before diving into the concepts of Grid it's important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it's easy to confuse them with one another if you don't first memorize their meanings defined by the Grid specification. But don't worry, there aren't many of them.

Grid Container

The element on which display: grid is applied. It's the direct parent of all the grid items. In this example container is the grid container.

<div class="container"> <div class="item item-1"> </div> <div class="item item-2"> </div> <div class="item item-3"> </div> </div>

Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines") and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Grid Track

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here's the grid track between the second and third-row grid lines.

Grid Area

The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here's the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn't.

<div class="container"> <div class="item"> </div> <div class="item"> <p class="sub-item"> </p> </div> <div class="item"> </div> </div>

Grid Cell

The space between two adjacent row and two adjacent column grid lines. It's a single "unit" of the grid. Here's the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Table of Contents of Grid Properties

Properties for the Grid container

Properties for Grid items

Properties for the Parent
(Grid Container)

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

grid - generates a block-level grid

inline-grid - generates an inline-level grid

.container { display: grid | inline-grid; }

The ability to pass grid parameters down through nested elements (aka subgrids) has been moved to level 2 of the CSS Grid specification. Here's a quick explanation.

grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

<track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

<line-name> - an arbitrary name of your choosing

.container { grid-template-columns: ... ...; /* e.g. 1fr 1fr minmax(10px, 1fr) 3fr repeat(5, 1fr) 50px auto 100px 1fr */ grid-template-rows: ... ...; /* e.g. min-content 1fr min-content 100px 1fr max-content */ }

Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

.container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

.container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; }

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.container { grid-template-columns: repeat(3, 20px [col-start]); }

Which is equivalent to this:

.container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; }

If multiple lines share the same name, they can be referenced by their line name and count.

.item { grid-column-start: col-start 2; }

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container { grid-template-columns: 1fr 1fr 1fr; }

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn't include the 50px:

.container { grid-template-columns: 1fr 50px 1fr 1fr; }

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Values:

<grid-area-name> - the name of a grid area specified with grid-area

. - a period signifies an empty grid cell

none - no grid areas are defined

.container { grid-template-areas: "<grid-area-name> | . | none | ..." "..."; }

Example:

.item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }

That'll create a grid that's four columns wide by three rows tall. The entire top row will be composed of the header area. The middle row will be composed of two main areas, one empty cell, and one sidebar area. The last row is all footer.

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces between them they represent a single cell.

Notice that you're not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area's starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.

A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Values:

.container { grid-template: none | <grid-template-rows> / <grid-template-columns>; }

It also accepts a more complex but quite handy syntax for specifying all three. Here's an example:

.container { grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; }

That's equivalent to this:

.container { grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; grid-template-areas: "header header header" "footer footer footer"; }

Since grid-template doesn't reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it's recommended to use the grid property instead of grid-template.

column-gap
row-gap
grid-column-gap
grid-row-gap

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Values:

.container { /* standard */ column-gap: <line-size>; row-gap: <line-size>; /* old */ grid-column-gap: <line-size>; grid-row-gap: <line-size>; }

Example:

.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; }

The gutters are only created between the columns/rows, not on the outer edges.

Note: The grid- prefix will be removed and grid-column-gap and grid-row-gap renamed to column-gap and row-gap. The unprefixed properties are already supported in Chrome 68+, Safari 11.2 Release 50+, and Opera 54+.

gap
grid-gap

A shorthand for row-gap and column-gap

Values:

.container { /* standard */ gap: <grid-row-gap> <grid-column-gap>; /* old */ grid-gap: <grid-row-gap> <grid-column-gap>; }

Example:

.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; gap: 15px 10px; }

If no row-gap is specified, it's set to the same value as column-gap

Note: The grid- prefix is deprecated (but who knows, may never actually be removed from browsers). Essentially grid-gap renamed to gap. The unprefixed property is already supported in Chrome 68+, Safari 11.2 Release 50+, and Opera 54+.

place-items sets both the align-items and justify-items properties in a single declaration.

Values:

For more details, see align-items and justify-items.

This can be very useful for super quick multi-directional centering:

.center { display: grid; place-items: center; }

place-content sets both the align-content and justify-content properties in a single declaration.

Values:

All major browsers except Edge support the place-content shorthand property.

For more details, see align-content and justify-content.

grid-auto-columns
grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid. (see The Difference Between Explicit and Implicit Grids)

Values:

<track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

.container { grid-auto-columns: <track-size> ...; grid-auto-rows: <track-size> ...; }

To illustrate how implicit grid tracks get created, think about this:

.container { grid-template-columns: 60px 60px; grid-template-rows: 90px 90px; }

This creates a 2 x 2 grid.

But now imagine you use grid-column and grid-row to position your grid items like this:

.item-a { grid-column: 1 / 2; grid-row: 2 / 3; } .item-b { grid-column: 5 / 6; grid-row: 2 / 3; }

We told .item-b to start on column line 5 and end at column line 6, but we never defined a column line 5 or 6. Because we referenced lines that don't exist, implicit tracks with widths of 0 are created to fill in the gaps. We can use grid-auto-columns and grid-auto-rows to specify the widths of these implicit tracks:

.container { grid-auto-columns: 60px; }

If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.

Values:

row - tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default)

column - tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary

dense - tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later

.container { grid-auto-flow: row | column | row dense | column dense; }

Note that dense only changes the visual order of your items and might cause them to appear out of order, which is bad for accessibility.

Examples:

Consider this HTML:

<section class="container"> <div class="item-a">item-a</div> <div class="item-b">item-b</div> <div class="item-c">item-c</div> <div class="item-d">item-d</div> <div class="item-e">item-e</div> </section>

You define a grid with five columns and two rows, and set grid-auto-flow to row (which is also the default):

.container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; }

When placing the items on the grid, you only specify spots for two of them:

.item-a { grid-column: 1; grid-row: 1 / 3; } .item-e { grid-column: 5; grid-row: 1 / 3; }

Because we set grid-auto-flow to row, our grid will look like this. Notice how the three items we didn't place ( item-b, item-c and item-d) flow across the available rows:

If we instead set grid-auto-flow to column, item-b, item-c and item-d flow down the columns:

.container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: column; }

A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow (Note: You can only specify the explicit or the implicit grid properties in a single grid declaration).

Values:

none - sets all sub-properties to their initial values.

<grid-template> - works the same as the grid-template shorthand.

<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? - sets grid-template-rows to the specified value. If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-columns is omitted, it is set to auto.

[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> - sets grid-template-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-rows is omitted, it is set to auto.

Examples:

The following two code blocks are equivalent:

.container { grid: 100px 300px / 3fr 1fr; } .container { grid-template-rows: 100px 300px; grid-template-columns: 3fr 1fr; }

The following two code blocks are equivalent:

.container { grid: auto-flow / 200px 1fr; } .container { grid-auto-flow: row; grid-template-columns: 200px 1fr; }

The following two code blocks are equivalent:

.container { grid: auto-flow dense 100px / 1fr 2fr; } .container { grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; }

And the following two code blocks are equivalent:

.container { grid: 100px 300px / auto-flow 200px; } .container { grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px; }

It also accepts a more complex but quite handy syntax for setting everything at once. You specify grid-template-areas, grid-template-rows and grid-template-columns, and all the other sub-properties are set to their initial values. What you're doing is specifying the line names and track sizes inline with their respective grid areas. This is easiest to describe with an example:

.container { grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; }

That's equivalent to this:

.container { grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; }

Properties for the Children
(Grid Items)

float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Determines a grid item's location within the grid by referring to specific grid lines. grid-column-start/ grid-row-start is the line where the item begins, and grid-column-end/ grid-row-end is the line where the item ends.

Values:

.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto; }

Examples:

.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; }

.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; }

If no grid-column-end/ grid-row-end is declared, the item will span 1 track by default.

Items can overlap each other. You can use z-index to control their stacking order.

grid-column
grid-row

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Values:

<start-line> / <end-line> - each one accepts all the same values as the longhand version, including span

.item { grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; }

Example:

.item-c { grid-column: 3 / span 2; grid-row: third-line / 4; }

If no end line value is declared, the item will span 1 track by default.

place-self sets both the align-self and justify-self properties in a single declaration.

Values:

auto - The "default" alignment for the layout mode.

Examples:

.item-a { place-self: center; }

.item-a { place-self: center stretch; }

All major browsers except Edge support the place-self shorthand property.

Special Units & Functions

You'll likely end up using a lot of fractional units in CSS Grid, like 1fr. They essentially mean "portion of the remaining space". So a declaration like:

grid-template-columns: 1fr 3fr;

Means, loosely, 25% 75%. Except that those percentage values are much more firm than fractional units are. For example, if you added padding to those percentage-based columns, now you've broken 100% width (assuming a content-box box model). Fractional units also much more friendly in combination with other units, as you can imagine:

grid-template-columns: 50px min-content 1fr;

When sizing rows and columns, you can use all the lengths you are used to, like px, rem, %, etc, but you also have keywords:

min-content: the minimum size of the content. Imagine a line of text like "E pluribus unum", the min-content is likely the width of the word "pluribus".

max-content: the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence.

auto: this keyword is a lot like fr units, except that they "lose" the fight in sizing against fr units when allocating the remaining space.

fit-content: use the space available, but never less than min-content and never more than max-content.

fractional units: see above

The minmax() function does exactly what it seems like: it sets a minimum and maximum value for what the length is able to be. This is useful for in combination with relative units. Like you may want a column to be only able to shrink so far. This is extremely useful and probably what you want:

grid-template-columns: minmax(100px, 1fr) 3fr;

The min() function.

The max() function.

The repeat() function can save some typing:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* easier: */ grid-template-columns: repeat(8, 1fr); /* especially when: */ grid-template-columns: repeat(8, minmax(10px, 1fr));

But repeat() can get extra fancy when combined with keywords:

auto-fill: Fit as many possible columns as possible on a row, even if they are empty.

auto-fit: Fit whatever columns there are into the space. Prefer expanding columns to fill space rather than empty columns.

This bears the most famous snippet in all of CSS Grid and one of the all-time great CSS tricks:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

The difference between the keywords is spelled out in detail here.

An experimental feature of CSS grid is masonry layout. Note that there are lots of approaches to CSS masonry, but mostly of them are trickery and either have major downsides or aren't what you quite expect.

The spec has an official way now, and this is behind a flag in Firefox:

.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: masonry; }

See Rachel's article for a deep dive.

Subgrid is an extremely useful feature of grids that allows grid items to have a grid of their own that inherits grid lines from the parent grid.

.parent-grid { display: grid; grid-template-columns: repeat(9, 1fr); } .grid-item { grid-column: 2 / 7; display: grid; grid-template-columns: subgrid; } .child-of-grid-item { /* gets to participate on parent grid! */ grid-column: 3 / 6; }

This is only supported in Firefox right now, but it really needs to get everywhere.

It's also useful to know about display: contents;. This is not the same as subgrid, but it can be a useful tool sometimes in a similar fashion.

<div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <ul style="display: contents;"> <!-- These grid-items get to participate on the same grid!--> <li class="grid-item"></li> <li class="grid-item"></li> </ul> </div>

Fluid width columns that break into more or less columns as space is available, with no media queries!

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* This is better for small screens, once min() is better supported */ /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */ gap: 1rem; }

According to the CSS Grid Layout Module Level 1 specification, there are 5 animatable grid properties:

grid-gap, grid-row-gap, grid-column-gap as length, percentage, or calc.

grid-template-columns, grid-template-rows as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list.

As of this writing, only the animation of (grid-)gap, (grid-)row-gap, (grid-)column-gap is implemented in any of the tested browsers.

Browser

(grid-)gap, (grid-)row-gap, (grid-)column-gap

grid-template-columns

grid-template-rows

Firefox

supported ✅ 53+

supported ✅ 66+

supported ✅ 66+

Safari 12.0

not supported ❌

not supported ❌

not supported ❌

Chrome

supported ✅ 66+

not supported ❌

not supported ❌

Chrome for Android 66+, Opera Mini 33+

supported ✅

not supported ❌

not supported ❌

Edge

supported ✅ 16+

not supported ❌

not supported ❌

# data[].attributes.attachment_link.description
Get the poster! Reference this guide a lot? Here's a high-res image you can print! CSS Grid Layout (aka "Grid" or "CSS Grid"), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces.

# data[].attributes.headline
Para combinar tipografías y elegir la mejor para tu web

# data[].attributes.subject
Para combinar tipografías y elegir la mejor para tu web

# data[].attributes.attachment_link.title
Fontpair - Free, beautiful fonts and font pairings curated just for you

# data[].attributes.attachment_link.description
Free typography for your next design project (Google Fonts, Fontshare, Fontesk, Font Squirrel, and more)

# data[].attributes.attachment_link.authors[].name
Vsevolod Strukchinsky, Vladimir Starkov and contributors

# data[].attributes.attachment_link.description
Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

# data[].attributes.attachment_link.title
PIXEL - REM - Point unit Converter - SeoChecker

# data[].attributes.attachment_link.description
What is a Pixel unit? A pixel, (or picture element), abbreviated as "px" is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.

# data[].attributes.attachment_link.title
Sass: Syntactically Awesome Style Sheets

# data[].attributes.headline
Tutorial para centrar fácilmente un bg image

# data[].attributes.subject
Tutorial para centrar fácilmente un bg image

# data[].attributes.attachment_link.readable_text
This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods.

The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it:

Fills entire page with image, no white space

Scales image as needed

Retains image proportions (aspect ratio)

Image is centered on page

Does not cause scrollbars

As cross-browser compatible as possible

Isn't some fancy shenanigans like Flash

Image above credited to this site.

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Works in:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+ (Opera 9.5 supported background-size but not the keywords)

Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Update: Thanks to Goltzman in the comments for pointing out an Adobe Developer Connection article which features some code to make IE do cover backgrounds as well:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead.

Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.

Big thanks, as usual, to Doug Neiner for this alternate version. Here we use an inline <img> element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.

The especially clever bit is using a media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.

Here is the CSS:

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Works in:

Any version of good browsers: Safari / Chrome / Opera / Firefox

IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim

IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine

IE 9: Works

One rather simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it's aspect ratio.

#bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; }

However, this doesn't center the image and that's a pretty common desire here... So, we can fix that by wrapping the image in a div. That div we'll make twice as big as the browser window. Then the image will be placed, still preserving it's aspect ratio and covering the visible browser window, and the dead center of that.

#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }

Credit to Corey Worrell for the concept on this one.

Works in:

Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)

IE 8+

Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

Peter VanWylen wrote in to say that if you add the image via JavaScript, the img needs to have width: auto; and height: auto; to work in IE 8, 9, or 10.

Update January 2018: Trying to get this to work on Android? JL García wrote to me saying he needed to add height: 100%; and overflow: hidden; to the html element to get it to work. The full snippet being:

html { background: url(images/bg.jpg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden; }

I tested it, and it seemed totally correct. Without it / With it.

This whole idea becomes a lot easier (from a CSS perspective) if we know if the aspect ratio of the image (inline <img> we intend to use as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than we can set only the width to 100% on the image and know it will fill both height and width. If it is higher, we can set only the height to 100% and know that it will fill both the height and width.

We have access to this information through JavaScript. As usual around here, I like to lean on jQuery.

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); });

This doesn't account for centering, but you could definitely alter this to do that. Credits to Koen Haarbosch for the concept behind this idea.

Works in:

IE7+ (could probably get in IE6 with a fixed position shim)

Most any other desktop browser

Update (June 2012): Reader Craig Manley writes in with a technique to load an appropriately sized background image according to screen. As in, don't load some huge 1900px wide background image for an iPhone.

First, you'd make images like 1024.jpg, 1280.jpg, 1366.jpg, etc. Then instead of loading an img, you'd load a shim.

If you don't like the gif shim (personally I think it's OK because it's not "content" it's a background) you could load up one of the real images instead. This code will account for that.

Then you test the screen width and set the src of the image based on it. The code below does it on resize, which you may or may not want. You could just run the code once if you wanted.

(function() { var win = $(window); win.resize(function() { var win_w = win.width(), win_h = win.height(), $bg = $("#bg"); // Load narrowest background image based on // viewport width, but never load anything narrower // that what's already loaded if anything. var available = [ 1024, 1280, 1366, 1400, 1680, 1920, 2560, 3840, 4860 ]; var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null; if (!current || ((current < win_w) && (current < available[available.length - 1]))) { var chosen = available[available.length - 1]; for (var i=0; i<available.length; i++) { if (available[i] >= win_w) { chosen = available[i]; break; } } // Set the new image $bg.attr('src', '/img/bg/' + chosen + '.jpg'); // for testing... // console.log('Chosen background: ' + chosen); } // Determine whether width or height should be 100% if ((win_w / win_h) < ($bg.width() / $bg.height())) { $bg.css({height: '100%', width: 'auto'}); } else { $bg.css({width: '100%', height: 'auto'}); } }).resize(); })(jQuery);

Note that screen width isn't the only possible good information to have when choosing an image size. See this article.

If you use this, please feel free to leave what technique you used and if you altered it in any way in the comments below. Always cool to see techniques "in the wild."
Download Files
Just for posterity's sake, there is another example in here called table.php which uses an old technique that used to be a part of this article. It had some cleverness, but wasn't quite as good as either CSS technique now presented above.

# data[].attributes.attachment_link.description
This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times.

# data[].attributes.attachment_link.readable_text
Join the community, upload your pattern as a PNG or GIF file, you must be the creator of your pattern, and it must be tileable.

Your pattern may be edited to maintain the desired quality, but we will always give you full credit for your submission.

All entries accepted to Subtle Patterns will be made available for free, licensed under Creative Commons, which allows others to share and build upon your pattern legally.

Your pattern may be edited to maintain the desired quality, but we will always give you full credit for your submission.

All entries accepted to Subtle Patterns will be made available for free, licensed under Creative Commons, which allows others to share and build upon your pattern legally.

# data[].attributes.attachment_link.title
Subtle Patterns | Free textures for your next web project

# data[].attributes.attachment_link.description
Subtle Patterns brought to you by Toptal, free textures for your next web project. Find out more here.

# data[].attributes.attachment_link.description
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

# data[].attributes.attachment_link.readable_text
What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.

When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.

When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.

When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.

When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

A Crash Course in Web Design

What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.

When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.

- Excerpt from A Voyage to Arcturus, by David Lindsay.

# data[].attributes.attachment_link.description
Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

# data[].attributes.attachment_link.readable_text
Built-in Server

Prepros comes with a built-in HTTP & HTTPS server. It can serve pages directly from your project folder or proxy them from an external server such as WordPress, Shopify, XAMPP, Wamp, MAMP, etc.

# data[].attributes.attachment_link.description
Prepros comes with a built-in HTTP & HTTPS server. It can serve pages directly from your project folder or proxy them from an external server such as WordPress, Shopify, XAMPP, Wamp, MAMP, etc.

# data[].attributes.attachment_link.description
Scout-App is a cross-platform desktop app that handles processing your Sass/SCSS files into CSS with ease!

# data[].attributes.body
https://cssanimation.rocks/es/transition-vs-animation/

# data[].attributes.attachment_link.title
Transiciones vs. Animaciones - CSS Animation

# data[].attributes.attachment_link.description
Una descripción de las diferencias entre animaciones y transiciones dentro de la animación web.

# data[].attributes.body
https://www.w3schools.com/css/css_grid.asp

# data[].attributes.attachment_link.readable_text
Try it Yourself "

Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Browser Support

The grid properties are supported in all modern browsers.

Grid Elements

A grid layout consists of a parent element, with one or more child elements.

Example

Try it Yourself "

Display Property

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

All direct children of the grid container automatically become grid items.

Grid Columns

The vertical lines of grid items are called columns.

Grid Rows

The horizontal lines of grid items are called rows.

Grid Gaps

The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

Example

The column-gap property sets the gap between the columns:

Try it Yourself "

Example

The row-gap property sets the gap between the rows:

Try it Yourself "

Example

The gap property is a shorthand property for the row-gap and the column-gap properties:

Try it Yourself "

Example

The gap property can also be used to set both the row gap and the column gap in one value:

Try it Yourself "

Grid Lines

The lines between columns are called column lines.

The lines between rows are called row lines.

Refer to line numbers when placing a grid item in a grid container:

Example

Place a grid item at column line 1, and let it end on column line 3:

Try it Yourself "

Example

Place a grid item at row line 1, and let it end on row line 3:

Try it Yourself "

All CSS Grid Properties

Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

grid-template
A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
Hacer galería de fotos con bootstrap!

# data[].attributes.attachment_link.readable_text
Gallery

A stunning collection of responsive galleries created with the latest Bootstrap 5. Image gallery, video gallery, photo gallery, full-page, eCommerce, lightbox, slider, thumbnails, and many more.

Static images

An example with the usage of static images.

To learn more read Images Docs.

Carousel / Slider

Carousel (also called "slider") is a slideshow cycling through different elements such as photos, videos, or text.

To learn more read Carousel Docs.

Gallery with modals and YouTube videos

An example of the combination of bootstrap modals and youtube video embeds.

Lightbox

If you need advanced options you can use MDBootstrap LightBox component.

Note: This component requiresMDBootstrap Pro package.

Full page gallery

An example of full-page usage of the gallery.

Click on the image to see live demo.

# data[].attributes.attachment_link.description
A stunning collection of responsive galleries created with the latest Bootstrap 5. Image gallery, video gallery, photo gallery, full-page, eCommerce, lightbox, slider, thumbnails, and many more. An example with the usage of static images. To learn more read Images Docs . Carousel (also called "slider") is a slideshow cycling through different elements such as photos, videos, or text.

# data[].attributes.headline
Verificar compatibilidad de reglas por navegador

# data[].attributes.subject
Verificar compatibilidad de reglas por navegador

# data[].attributes.attachment_link.title
Can I use... Support tables for HTML5, CSS3, etc

# data[].attributes.attachment_link.description
“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

# data[].attributes.attachment_link.readable_text
Cross size: El ancho o alto de un flex ítem, dependiendo de lo que haya en la dimensión transversal, es el del ítem. La propiedad cross size puede ser el ancho o el alto del ítem, lo que se encuentre en la transversal.

Flex container es el elemento que involucra su estructura. Tu defines que un elemento es un Flex Container con la propiedad display y valores flex o inline-flex.
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> .flex-container { display: flex; }
Flex Ítem son elementos secundarios del flex container.

Ejes o Axes son las dos direcciones básicas que existen en un Flex Container: main axis, o eje principal, y cross axis, o eje transversal.

Propiedades del elemento principal

Cuando usamos el Flexbox, es muy importante saber qué propiedades se declaran en el elemento principal (por ejemplo, una div que contendrá los elementos a alinear) y cuáles se declararán en los elementos secundarios. A continuación, se muestran las propiedades que deben declararse utilizando el elemento principal como selector (para alinear los elementos secundarios):
Display
Esta propiedad define un flex container; inline o block dependiendo de los valores pasados. Coloca todos los elementos secundarios directos en un contexto Flex.
.container { display: flex; */\* or inline-flex \*/* }
Tenga en cuenta que la propiedad CSS columns no tiene efecto en un flex container.
Flex-direction
Establece el eje principal, definiendo así la dirección en la que los flex ítems están alineados en el flex container. Flexbox es (con la excepción de un wrapping opcional) un concepto de diseño unidireccional. Piensa en los flex ítems inicialmente posicionaids o en líneas horizontales o en columnas verticales.
.flex-container { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap
Por estándar, los flex ítems todos intentarán encajarse en una sola línea. Con esta propiedad puedes modificar este comportamiento y permitir que los ítems pasen a la siguiente línea según sea necesario.
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap (estándar): todos los flex ítems estarán en una sola línea

wrap: los flex ítems se dividirán en múltiples líneas, de arriba a abajo

wrap-reverse: los flex ítems se dividirán en múltiples líneas de abajo hacia arriba

flex-flow
La propiedad flex-flow es una propiedad shorthand (una misma declaración incluye varios valores relacionados con más de una propiedad) que incluye flex-direction y flex-wrap. Determina cuáles serán los ejes principal y transversal del contenedor. El valor estándar es row nowrap.
.flex-container { flex-flow: row nowrap | row wrap | column nowrap | column wrap; } Justify-content
Esta propiedad define la alineación de los ítems a lo largo del eje principal. Ayuda a distribuir el espacio libre que queda en el contenedor, ya sea que todos los flex ítems de una línea sean inflexibles o flexibles, pero ya hayan alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de los ítems cuando sobrepasan el límite de la línea.
.flex-container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

start: los ítems se alinean a lo largo del borde de inicio de la dirección del writing-mode (modo de escritura).

end: los ítems se alinean a lo largo del borde final de la dirección del writing-mode (modo de escritura).

left: los ítems están alineados a lo largo del borde izquierdo del contenedor, a menos que esto no tenga sentido con el flex-direction que se está utilizando. En este caso, se comporta como start.

right: los ítems están alineados a lo largo del borde derecho del contenedor, a menos que esto no tenga sentido con el flex-direction que se está utilizando. En este caso, se comporta como start.

center: los ítems están centrados en la línea.

Space-between: los ítems se distribuyen uniformemente a lo largo de la línea; el primer ítem al lado del borde inicial de la línea, el último ítem al lado del borde final de la línea.

Space-around: los ítems se distribuyen en línea con el mismo espacio entre ellos. Tenga en cuenta que visualmente el espacio puede no ser igual, ya que todos los ítems tienen la misma cantidad de espacio en ambos lados: el primer ítem solo tendrá una unidad de espacio a lo largo del borde del contenedor, pero dos unidades de espacio entre él y el siguiente ítem, porque el ítem siguiente también tiene su propio espaciamiento que se está aplicando.

Space-evenly: los ítems se distribuyen de manera que el espacio entre dos elementos cualesquiera en la línea (incluso entre los ítems y los bordes) sea igual.

Nota: el soporte dado por los navegadores para estos valores es difuso. Por ejemplo, space-between no tiene soporte en ninguna versión de Edge (hasta la elaboración de este tutorial) y start / end / left / right aún no se han implementado en Chrome. Para obtener tablas detalladas, consulte MDN. Los valores más seguros son flex-start, flex-end y center.

También hay dos palabras clave adicionales que puedes usar junto con estos valores: safe y unsafe. Safe asegura que, independiente de cómo hagas este tipo de posicionamiento, no sea posible "empujar" un elemento y hacer con que sea renderizado hacia afuera de la pantalla (por ejemplo, sobre el tope) de una manera que haga con que el contenido sea imposible de mover con el desplazamiento de la pantalla (el CSS llama a esto de "pérdida de datos").
Align-ítems
Establece el comportamiento estándar de cómo flex ítems están alineados según el eje transversal ( cross axis). En cierto modo, funciona de manera similar al justify-content, pero en el eje transversal (perpendicular al eje principal).
. .flex-container { align-items: stretch | flex-start | flex-end | center | baseline; }

Flex-start/start/self-start: ítems se posicionan al inicio del eje transversal. La diferencia entre ellos es sutil y se refiere a las reglas de flex-direction o writing-mode.

center: ítems se centran en el eje transversal.

baseline: ítems se alinean de acuerdo con sus baselines.

Los modificadores safe y unsafe se puede usar junto con todas estas palabras clave (por favor verifique el soporte de cada navegador) y sirven para evitar cualquier alineación de elementos que haga con que el contenido sea inaccesible (por ejemplo, fuera de la pantalla).
align-content
Organiza las líneas dentro de un flex container cuando hay espacio adicional en el eje transversal, similar a cómo justify-content alinea ítems individuales dentro del eje principal.

Importante: Esta propiedad no tiene efecto cuando solo hay una línea de flex ítems en el contenedor.
.flex-container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

flex-start / start: ítems alineados con el inicio del contenedor. El valor (con mayor soporte de los navegadores) flex-start se guía por la flex-direction, mientras que start se guía por la dirección del writing-mode.

Flex-end/end: ítems alineados con el final del contenedor. El valor (con mayor soporte de los navegadores) flex-end se guía por la flex-direction, mientras que end se guía por la dirección del writing-mode.

center: ítems centrados en el contenedor.

space-between: ítems distribuidos uniformemente; la primera línea al inicio del contenedor y la última línea al final del contenedor.

space-around: ítems distribuidos uniformemente con el mismo espaciamiento entre cada línea.

space-evenly: elementos distribuidos uniformemente con el mismo espaciamiento entre ellos.

stretch (estándar): ítems en cada línea se estiran para ocupar el espacio remanente entre ellas.

Los modificadores safe y unsafe se puede usar junto con todas estas palabras clave (por favor verifique el soporte de cada navegador) y sirven para evitar cualquier alineación de elementos que haga con que el contenido sea inaccesible (por ejemplo, fuera de la pantalla).

Propiedades de los elementos secundarios

A continuación, veremos propiedades que deben declararse teniendo como selector los elementos secundarios, es decir:

Esto significa que, donde hay un elemento principal con propiedad flex (o flex-container), también puede asignar propiedades flex específicas a elementos secundarios ( flex-ítem).

Puede definir las propiedades a continuación para solo uno de los elementos secundarios a través de un identificador, como una clase específica.

order

Determina el orden en que aparecerán los elementos.

Por estándar los flex ítems, se organizan en la pantalla en orden de código. Pero la propiedad order controla el orden en que aparecen en el contenedor.
.flex-item { order: <número>; */\* el valor estándar es 0 \*/* }
Flex-grow

Define la habilidad de un flex ítem de crecer, según el caso. El valor de esta propiedad es un valor numérico sin indicación de unidad, que se utiliza para calcular la proporción. Este valor dicta la cantidad de espacio disponible en el contenedor que ocupará el ítem.

Si todos los ítems tienen flex-grow establecido en 1, el espacio remanente en el contenedor se distribuirá de manera uniforme entre todos. Si uno de los ítems tiene el valor 2, ocupará el doble de espacio en el contenedor que los demás (o al menos intentará hacerlo).
.flex-item { flex-grow: <numero>; */\* el valor default(estándar) es 0 \*/* }
La propiedad no acepta valores negativos.

flex-shrink

Establece la habilidad de un flex ítem para contraerse, según el caso. .flex-item {
flex-shrink: <número>; */\* el valor estándar es 0 \*/* }
La propiedad no acepta valores negativos.
flex-basis
Establece el tamaño estándar de un elemento antes de que se distribuya el espacio remanente del contenedor. Puede ser un largo (por ejemplo, 20%, 5rem, etc.) o una palabra clave. La palabra clave auto significa "observe mis propiedades de altura o ancho" (lo que era hecho por la palabra clave t main-size, que fue depreciada). La palabra clave content significa "establezca el tamaño según el contenido interno del ítem"; esta palabra clave aún no tiene mucho soporte, por lo que no es fácil de probar, al igual que sus relacionadas: max-content, min-content y fit-content.
.flex-item { flex-basis: flex-basis: | auto; */\* el valor estándar es auto \*/* }
Con el valor 0, el espacio adicional alrededor del contenido no se considera. Con el valor de auto, el espacio adicional se distribuye con base en el valor de flex-grox del ítem.
flex
Esta es la propiedad shorthand para flex-grow, flex-shrink y flex-basis, combinadas. El segundo y tercer parámetros (flex-shrink y flex-basis) son opcionales. El estándar es 0 1 auto, pero si lo defines con un solo número, es equivalente a 0 1.
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
Se recomienda que utilices esta propiedad shorthand en lugar de definir cada una de las propiedades por separado. Shorthand establece los demás valores de forma inteligente.
align-self
Permite que la alineación estándar (o lo que esté definido por align-items) se sobrescriba para ítems individuales.

Por favor consulte la explicación de la propiedad align-items para entender cuáles son los posibles valores.
. .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
¡Importante!

CSS solo ve la jerarquía de principal-secundario; no aplicará propiedades Flex a elementos que no estén directamente relacionados;

Para que las propiedades funcionen en elementos secundarios, los principales deben tener propiedad display: flex;.

Las propiedades float, clear y vertical-align no tienen ningún efecto en flex-items.

¿Vamos a practicar?
Flexbox Froggy
Enlaces útiles

Al igual que con cualquier otra funcionalidad nueva que hemos aprendido, es fundamental practicar mucho e investigar siempre que tengamos dudas. A continuación se muestran algunos enlaces útiles.

Este contenido se basa en gran parte en el tutorial de CSS Tricks, ¡con nuestros agradecimientos! Guarda en tus favoritos para consultar siempre que lo necesites.

La guía CSS Tricks también aborda algunos otros aspectos importantes de Flex: soporte de los navegadores, errores, propiedades relacionadas, prefijos y etc. Si tiene alguna duda que no se haya abordado en este artículo, puedes consultar estos temas relacionados en el enlace.

¿Te gustó la publicación y quieres saber más? Aquí en Alura tenemos una formación front-end donde aprenderás más sobre HTML y CSS.

Juliana Amoasei

Desarrolladora JS con experiencia multidisciplinaria. Siempre aprendiendo para enseñar y viceversa.

# data[].attributes.attachment_link.title
Flexbox CSS: Guia Completo, Elementos y Ejemplos | Alura Cursos Online

# data[].attributes.attachment_link.description
Un guia visual para la herramienta CSS FlexBox y como utilizar sus propriedades

# data[].attributes.attachment_link.readable_text
Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width ( propiedad que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades que pueden utilizarse en CSS para indicar un determinado tamaño . Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades de CSS que pueden utilizarlas.

Unidades absolutas

Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales en contextos donde las medidas no varían como pueden ser en medios impresos (documentos, impresiones, etc...), pero son unidades poco adecuadas para la web, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer hoy en día.

Existen varias unidades absolutas, como se puede ver en el siguiente gráfico:

A continuación, podemos ver las diferentes unidades absolutas que pueden utilizarse en CSS son las siguientes ( de mayor a menor tamaño):

Consejo: El punto ( pt) podría ser una medida ideal para documentos CSS en los que se fija el tamaño de las fuentes en medios impresos.

La unidad px (píxel)

El uso de la unidad px está muy extendida en el desarrollo y diseño web, y es prácticamente una de las primeras unidades de CSS que se recomienda aprender. La razón, es que se trata de una unidad muy sencilla para el desarrollador: muy fácil de comprender, conocida y que nos permitirá afianzar conceptos a la vez que profundizamos en el diseño web.

No obstante, es conveniente saber que no es la única unidad, y que probablemente más adelante nos interese aprender otras unidades que pueden ser mucho más versátiles y útiles para situaciones concretas. ¡Empieza por los px pero una vez los domines no te quedes ahí!

Unidades relativas

Las unidades relativas son un tipo de medida mucho más potente y habitual en el CSS que creamos generalmente. Al contrario que las unidades absolutas, las unidades relativas dependen de algún otro factor ( resolución, tamaño de letra, etc...). Tienen una curva de aprendizaje más compleja, pero son ideales para trabajar en dispositivos con diferentes tamaños, ya que son muy flexibles y versátiles.

Las unidades relativas más conocidas son las siguientes:

La unidad em

La unidad em se utiliza para hacer referencia al tamaño actual de la fuente que ha sido establecida en el navegador, que habitualmente es un valor aproximado a 16px ( salvo que se modifique por el usuario). De esta forma, podemos trabajar simplificando las unidades a medidas en base a ese tamaño.

Por ejemplo, imaginemos que el tamaño de la fuente establecida en el navegador del usuario es exactamente 16px. Una cantidad 1em equivaldría a 16px, mientras que una cantidad de 2em sería justo el doble: 32px. Por otro lado, una cantidad de 0.5em sería justo la mitad: 8px.

Existen ciertas unidades menos utilizadas dentro de las unidades relativas, como por ejemplo las unidades ex o ch. Mientras que la unidad em es el tamaño de la fuente establecida por el navegador del usuario, la unidad ex es la mitad del tamaño de la fuente establecida por el navegador del usuario, por lo que se cumple que 1ex es igual a 0.5em.

Realmente, la medida ex está basada en la altura de la x minúscula, que es aproximadamente un poco más de la mitad de la fuente actual ( depende de la tipografía utilizada). La unidad ch por su parte, equivale al tamaño de ancho del 0 de la fuente actual, aunque como hemos dicho, en la práctica es un tipo de unidad que no se suele utilizar frecuentemente.

La unidad rem (root em)

Una unidad muy interesante y práctica para tipografías es la unidad rem ( root em). Esta unidad toma la idea de la unidad em, pero permitiendo establecer un tamaño base personalizado ( generalmente para el documento en general, utilizando html o la pseudoclase :root). De esta forma, podemos trabajar con múltiplos del tamaño base:

Como podemos ver, posteriormente podremos ir utilizando la unidad rem en ciertas partes del documento. Con esto, estamos indicando el factor de escala ( respecto al tamaño base). En el ejemplo anterior, los elementos <h1> tendrán 44 píxels de tamaño, ya que hemos establecido 2rem, que significa "el doble que el tamaño base". Por otro lado, los elementos <h2> tendrían el mismo tamaño: 22 píxels.

Esto nos da una ventaja principal considerable: Si queremos cambiar el tamaño del texto en general, sólo tenemos que cambiar el font-size de la pseudoclase :root, puesto que el resto de unidades son factores de escalado y se modificarán todas en consecuencia al cambio del :root. Algo, sin duda, muy práctico y fácil de mantener.

Consejo: Cuando se especifican valores de unidades iguales a 0, como por ejemplo 0px, 0em o 0%, podemos omitir las unidades y escribir simplemente 0, ya que en este caso particular las unidades son redundantes y no aportan valor.

Unidades flexibles (viewport)

Existen unas unidades de "nueva generación" que resultan muy útiles, porque dependen del viewport ( región visible de la página web en el navegador). Con estas unidades podemos hacer referencia a un porcentaje concreto del tamaño específico que tengamos en la ventana del navegador, independientemente de si es redimensionado o no.

Estas unidades son las siguientes:

La unidad vw hace referencia al ancho del viewport, mientras que vh hace referencia al alto. Por ejemplo, si utilizamos 100vw estaremos haciendo referencia al 100% del ancho del navegador, o sea, todo lo que se está viendo de ancho en pantalla, mientras que si indicamos 50vw estaremos haciendo referencia a la mitad del ancho del navegador.

Por último tenemos vmin y vmax, que simplemente se utilizan para hacer referencia al porcentaje de ancho o alto del viewport, dependiendo cual sea más pequeño o más grande de los dos, lo que puede ser útil en algunas situaciones donde quieres flexibilidad con diseños adaptables.

Es interesante tener en cuenta que existen una serie de funciones para hacer cálculos con unidades CSS. Son las funciones calc(), min(), max() o clamp(), entre otras. Las veremos más adelante, en el capítulo de funciones CSS.

# data[].attributes.attachment_link.description
Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width ( propiedad que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de unidades que pueden utilizarse en CSS para indicar un determinado tamaño .

# data[].attributes.body
Generador CSS

# data[].attributes.attachment_link.title
CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator

# data[].attributes.attachment_link.description
CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.

# data[].attributes.body
https://www.youtube.com/watch?v=edEG0CoM5gw

# data[].attributes.attachment_link.title
🟦 Aprende CSS Grid Layout en menos de 15 Minutos

# data[].attributes.headline
Mapa de conceptos CSS con ejemplos y demostraciones

# data[].attributes.subject
Mapa de conceptos CSS con ejemplos y demostraciones

# data[].attributes.attachment_link.description
An extensive CSS reference with all the important CSS properties and info to learn CSS from the basics.

# data[].attributes.body
Aprende Flexbox jugando al clasico juego de defensa de torrez, donde usando las propiedades que trae podes ayudar y pasar los niveles.

# data[].attributes.attachment_link.description
Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

# data[].attributes.attachment_link.description
Existen varias propiedades en CSS que permiten modificar los fondos, desde colores sólidos hasta imágenes con su tamaño o posición.

# data[].attributes.body
Trucos CSS

# data[].attributes.attachment_link.description
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px;

# data[].attributes.attachment_link.embed_code
transform

# data[].attributes.headline
Tutoriales y base de datos de W3 para CSS

# data[].attributes.subject
Tutoriales y base de datos de W3 para CSS

# data[].attributes.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Genera código CSS según parámetros de reglas

# data[].attributes.subject
Genera código CSS según parámetros de reglas

# data[].attributes.headline
Recursos adicionales para realizar wireframes y mockups

# data[].attributes.subject
Recursos adicionales para realizar wireframes y mockups

# data[].attributes.attachment_link.readable_text
Bring your interaction design to a superior level

Design full interactions of your web and mobile products, from the navigation to the last details of the user experience: advanced interactions, animations, transitions, interactive UI elements. Launch easy to use products and boost user adoption.

# data[].attributes.attachment_link.title
Free prototyping tool for web & mobile apps - Justinmind

# data[].attributes.attachment_link.description
Easily create web and mobile app prototypes and wireframes with Justinmind UI prototyping tool. It's FREE. Start prototyping now!

# data[].attributes.attachment_link.title
🔷 Aprende CSS Flexbox en MENOS de 15 MINUTOS

# data[].attributes.body
https://dev.to/bootstrap/bootstrap-5-templates-91p

# data[].attributes.attachment_link.readable_text
Bootstrap, the foremost popular front-end framework built to style professional websites, is currently undertaking a serious update, Bootstrap 5. Bootstrap 5 alpha was officially released on June 16, 2020, after several months of refining. With all of the key changes during this version, the Bootstrap 5 development team informed the users that the present version remains within the alpha version. To possess better control and maintenance over their code Bootstrap is not dependent on jquery instead the features should be through with pure or vanilla JavaScript code in Bootstrap 5 which can help with the file size or weight of the framework.

Bootstrap 5 will enable responsive font sizes by default which can automatically resize the typography element in line with the dimensions of the user's viewport through the RFS engine or Responsive Font Sizes. The Bootstrap 5 team decided to drop the support for Internet Explorer 10 and 11 which could be a pretty good move because it will enable web designers and developers to focus more on designing the net page. In keeping with the fixes made on Bootstrap 5's official Github project tracking board, the gutter width will now get on rem rather than px.

In Bootstrap 5, the Bootstrap team removed the cardboard decks since the new grid system offers more responsive control. By default, Bootstrap 4 uses inline-block on its display option but in Bootstrap 5, it has been removed. In Bootstrap 5, there's a spanking new SVG icon library crafted carefully by Mark Otto, co-founder of Bootstrap. Of course, Bootstrap 5 won't be interesting without the new Bootstrap CSS class. With all the new updates coming in Bootstrap 5, it's safe to mention that the Bootstrap team is making huge steps to create the framework lightweight, simple, useful, and faster for the developer's benefit.

If you are looking for a starting point of Bootstrap 5, templates are a great way to taste mighty Bootstrap 5, there are many templates available based on V5 on the web, and developers are literally started embracing the latest version.

Here are the best free bootstrap 5 templates from our collection to get started with -

PlainAdmin is a minimalistic and responsive admin dashboard template that is perfect for any company, big or small. You can use it to build dashboards for IOT, CRM, CMS, eCommerce sites and any other type of application. It's built on Bootstrap V5 and has a wide range of UI elements as well as charts and graphs.

Start your company website with Blink, a modern startup template that's perfect for any business. It's responsive, clean, and will make your brand shine. No coding necessary and comes with 10 built-in pages to make building your site a breeze.
The Blink website template is built with Bootstrap 5 and it's responsive too! It doesn't require any extra coding, and the business pages are built-in for you too!

ShopGrids is a Bootstrap 5 eCommerce UI Kit and HTML template. It comes with a clean and amazing design that can serve almost all kinds of E-commerce websites. It's an ultimate front-end solution, UI kit and template that takes care of the design, development, and deployment of your future online stores.
With ShopGrids, you can create an awesome and responsive eCommerce site in minutes. It's an ultimate front-end solution with a clean and amazing design that can serve almost all kinds of eCommerce websites.

Craft is a free and premium startup website landing page template. It comes with an amazing design, all essential business sections, and features a startup site need. Craft is a fully responsive template based on the Bootstrap 5 framework and vanilla JS.
We've built Craft with the essential building blocks for every startup company in mind. It has all that a startup needs - from marketing and sales to design and communications. Crafting a website shouldn't be hard, so be sure to try our free and premium template - it's nothing short of crafty!

# data[].attributes.attachment_link.description
Bootstrap, the foremost popular front-end framework built to style professional websites, is... Tagged with html, css, beginners, productivity.

# data[].attributes.body
https://www.w3schools.com/css/css3_animations.asp

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.title
Coolors - The super fast color palettes generator!

# data[].attributes.attachment_link.description
Generate or browse beautiful color combinations for your designs.

# data[].attributes.body
https://flukeout.github.io/

# data[].attributes.attachment_link.description
A fun game to help you learn and practice CSS selectors.

# data[].attributes.headline
Validar código según estándares del WWWC

# data[].attributes.subject
Validar código según estándares del WWWC

# data[].attributes.attachment_link.description
W3C’s easy-to-use markup validation service, based on SGML and XML parsers.

# data[].attributes.attachment_link.readable_text
Los elementos en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en línea" o elementos "en bloque". Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea. El siguiente ejemplo demuestra la influencia de los elementos en línea:

Formateo

De forma predeterminada, los elementos en línea no comienzan con la nueva línea.

Modelo de contenido

En general, los elementos en línea pueden contener únicamente los datos y otros elementos en línea.

Los siguientes elementos son "en línea":

# data[].attributes.attachment_link.title
Elementos en línea - HTML: Lenguaje de etiquetas de hipertexto | MDN

# data[].attributes.attachment_link.description
Los elementos en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en línea" o elementos "en bloque". Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea.

# data[].attributes.attachment_link.title
Conceptos Básicos de flexbox - CSS | MDN

# data[].attributes.attachment_link.description
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales característ…

# data[].attributes.attachment_link.readable_text
Los elementos, en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en bloque" o elementos "en línea". Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.

Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:

Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.

Los elementos de bloque sólo deben aparecer dentro del elemento .

Hay un par de diferencias clave entre los elementos en bloque y elementos en línea:

Formateo

De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden comenzar en cualquier parte de una línea.

Modelo de contenido

En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.

La distinción entre elementos en bloque frente a elementos en línea se utiliza en las especificaciones de HTML hasta la 4.01. En HTML5, esta distinción dual se sustituye por un conjunto más complejo de categorías de contenido. La categoría "en bloque" corresponde aproximadamente a la categoría de contenido dinámico en HTML 5, mientras que "en línea" se corresponde con contenido estático, pero hay categorías adicionales.

La siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque" no se define técnicamente para los elementos que son nuevos en HTML5).

# data[].attributes.attachment_link.title
Elementos en bloque - HTML: Lenguaje de etiquetas de hipertexto | MDN

# data[].attributes.attachment_link.description
Los elementos, en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en bloque" o elementos "en línea". Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.

# data[].attributes.attachment_link.readable_text
En el presente tutorial hablaremos sobre las diferencias entre el selector de Id y el selector de Clase y cuando debemos usar cada uno de estos correctamente.

Cuando nos iniciamos en la maquetación de sitios web, nos topamos con una duda que seguramente le ha pasado a más de uno, ¿Debemos usar el selector de "id" o el selector de "class" para brindar estilos a nuestros elementos y qué diferencia existe entre estos dos selectores? En este post te ayudaremos a entender cuándo y por qué utilizar uno u otro, para ello es importante tener clara la definición de ambos.

El valor del atributo "id" de un elemento es único; es decir, no debería haber otro elemento con el mismo nombre de identificador (id) dentro de tu documento HTML. Para declarar un selector de "id" lo podemos hacer de la siguiente manera.

Dentro de los selectores que tenemos en CSS (por tipo, por clase y por id), cada uno tiene un determinado peso, siendo el Selector de Id el que tiene más peso (1-0-0), seguido del selector de Clase (0-1-0) y finalmente el selector de tipo (0-0-1). Para que quede más claro lo anterior, si tenemos una etiqueta con un id = "rojo" y una class = "azul" a esta etiqueta se le aplicarán las propiedades establecidas a #rojo {} porque tiene un peso mayor.¿Es posible tener más de un elemento con el mismo identificador de Id?, ¿las propiedades sí se aplican?

Como vemos en el ejemplo, las propiedades sí se aplican, pero semánticamente esto no es correcto y no se debería usar de esa manera, ya que un elemento HTML debería tener un único valor del atributo "id" no repetible en otros elementos. Por otra parte, el valor del atributo "class", a diferencia del valor del atributo "id", puede ser utilizado en más de un elemento de tu documento HTML, esto nos es muy beneficioso cuando tenemos que aplicar los mismos estilos a diferentes elementos, dado que nos permite reducir las líneas de código en nuestro archivo .css, considerándose una buena práctica. Podemos utilizar un selector de clase de la siguiente manera:

Entonces si queremos aplicar las propiedades de un selector de clase a varios elementos, podemos hacerlo de la siguiente manera:

En el ejemplo estamos creamos el selector de clase "pkmn", el cual contiene propiedades generales que aplicamos a todos los elementos; luego, dejando un espacio agregamos otro selector de clase donde establecemos un determinado color para cada elemento, de esta forma modificamos el color de cada elemento sin tener que escribir todo el código para cada una. Ahora que ya conocemos las características de los atributos "id" y "class" podremos elegir mejor si trabajar con uno u otro, dependiendo de la necesidad que tengamos.

Recuerda que para interiorizar mejor lo aprendido en este tutorial, necesitarás practicar: crea un proyecto, aplica lo aprendido y cuéntanos qué tal te fue. Hasta aquí llegamos el día de hoy. Si deseas aprender mucho más, puedes ingresar al Curso gratuito de HTML y CSS que tenemos en la plataforma. No olvides compartir el tutorial con tus amigos y déjanos tus dudas u opiniones en la caja de comentarios. Este fue kusillus, ¡Hasta la próxima!

# data[].attributes.attachment_link.title
Diferencias entre el selector Class y el selector Id

# data[].attributes.attachment_link.description
En el presente tutorial hablaremos sobre las diferencias entre el selector de Id y el selector de Clase y cuando debemos usar cada uno de estos correctamente.

# data[].attributes.body
Referencias de transiciones CSS

# data[].attributes.attachment_link.description
For a quick reference to all the things CSS Transitions can do, look no further!

# data[].attributes.body
https://drive.google.com/file/d/1WqIw3tPS6gNhEnma7iHl-PEfByKSIYGK/view

# data[].attributes.body
Importante leer documentación, para poder ir entendiendo de que manera usar bootstrap, y poder ir modificándolo, no solo copiar y pegar.

# data[].attributes.body
Flexbox Froggy, un juego donde ayudarás a Froggy y a sus amigos escribiendo código CSS.

# data[].attributes.body
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout

# data[].attributes.attachment_link.readable_text
CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.

El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.

# data[].attributes.attachment_link.description
CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

# data[].attributes.attachment_link.readable_text
Get the poster!

Reference this guide a lot? Here's a high-res image you can print!

CSS Grid Layout (aka "Grid" or "CSS Grid"), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS has always been used to layout our web pages, but it's never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox is also a very great layout tool, but its one-directional flow has different use cases - and they actually work together quite well! Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.

The intention of this guide is to present the Grid concepts as they exist in the latest version of the specification. So I won't be covering the out-of-date Internet Explorer syntax (even though you can absolutely use Grid in IE 11) or other historical hacks.

As of March 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. Internet Explorer 10 and 11 on the other hand support it, but it's an old implementation with an outdated syntax. The time to build with grid is now!

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Similarly to flexbox, the source order of the grid items doesn't matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.

Desktop

Chrome

Firefox

IE

Edge

Safari

57

52

11*

16

10.1

Mobile / Tablet

Android Chrome

Android Firefox

Android

iOS Safari

100

98

99

10.3

Before diving into the concepts of Grid it's important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it's easy to confuse them with one another if you don't first memorize their meanings defined by the Grid specification. But don't worry, there aren't many of them.

Grid Container

The element on which display: grid is applied. It's the direct parent of all the grid items. In this example container is the grid container.

<div class="container"> <div class="item item-1"> </div> <div class="item item-2"> </div> <div class="item item-3"> </div> </div>

Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines") and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Grid Track

The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here's the grid track between the second and third-row grid lines.

Grid Area

The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here's the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn't.

<div class="container"> <div class="item"> </div> <div class="item"> <p class="sub-item"> </p> </div> <div class="item"> </div> </div>

Grid Cell

The space between two adjacent row and two adjacent column grid lines. It's a single "unit" of the grid. Here's the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Table of Contents of Grid Properties

Properties for the Grid container

Properties for Grid items

Properties for the Parent
(Grid Container)

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

grid - generates a block-level grid

inline-grid - generates an inline-level grid

.container { display: grid | inline-grid; }

The ability to pass grid parameters down through nested elements (aka subgrids) has been moved to level 2 of the CSS Grid specification. Here's a quick explanation.

grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

<track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

<line-name> - an arbitrary name of your choosing

.container { grid-template-columns: ... ...; /* e.g. 1fr 1fr minmax(10px, 1fr) 3fr repeat(5, 1fr) 50px auto 100px 1fr */ grid-template-rows: ... ...; /* e.g. min-content 1fr min-content 100px 1fr max-content */ }

Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

.container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

.container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; }

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.container { grid-template-columns: repeat(3, 20px [col-start]); }

Which is equivalent to this:

.container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; }

If multiple lines share the same name, they can be referenced by their line name and count.

.item { grid-column-start: col-start 2; }

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container { grid-template-columns: 1fr 1fr 1fr; }

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn't include the 50px:

.container { grid-template-columns: 1fr 50px 1fr 1fr; }

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Values:

<grid-area-name> - the name of a grid area specified with grid-area

. - a period signifies an empty grid cell

none - no grid areas are defined

.container { grid-template-areas: "<grid-area-name> | . | none | ..." "..."; }

Example:

.item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"; }

That'll create a grid that's four columns wide by three rows tall. The entire top row will be composed of the header area. The middle row will be composed of two main areas, one empty cell, and one sidebar area. The last row is all footer.

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces between them they represent a single cell.

Notice that you're not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area's starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.

A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Values:

.container { grid-template: none | <grid-template-rows> / <grid-template-columns>; }

It also accepts a more complex but quite handy syntax for specifying all three. Here's an example:

.container { grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; }

That's equivalent to this:

.container { grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; grid-template-areas: "header header header" "footer footer footer"; }

Since grid-template doesn't reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it's recommended to use the grid property instead of grid-template.

column-gap
row-gap
grid-column-gap
grid-row-gap

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Values:

.container { /* standard */ column-gap: <line-size>; row-gap: <line-size>; /* old */ grid-column-gap: <line-size>; grid-row-gap: <line-size>; }

Example:

.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; }

The gutters are only created between the columns/rows, not on the outer edges.

Note: The grid- prefix will be removed and grid-column-gap and grid-row-gap renamed to column-gap and row-gap. The unprefixed properties are already supported in Chrome 68+, Safari 11.2 Release 50+, and Opera 54+.

gap
grid-gap

A shorthand for row-gap and column-gap

Values:

.container { /* standard */ gap: <grid-row-gap> <grid-column-gap>; /* old */ grid-gap: <grid-row-gap> <grid-column-gap>; }

Example:

.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; gap: 15px 10px; }

If no row-gap is specified, it's set to the same value as column-gap

Note: The grid- prefix is deprecated (but who knows, may never actually be removed from browsers). Essentially grid-gap renamed to gap. The unprefixed property is already supported in Chrome 68+, Safari 11.2 Release 50+, and Opera 54+.

place-items sets both the align-items and justify-items properties in a single declaration.

Values:

For more details, see align-items and justify-items.

This can be very useful for super quick multi-directional centering:

.center { display: grid; place-items: center; }

place-content sets both the align-content and justify-content properties in a single declaration.

Values:

All major browsers except Edge support the place-content shorthand property.

For more details, see align-content and justify-content.

grid-auto-columns
grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid. (see The Difference Between Explicit and Implicit Grids)

Values:

<track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

.container { grid-auto-columns: <track-size> ...; grid-auto-rows: <track-size> ...; }

To illustrate how implicit grid tracks get created, think about this:

.container { grid-template-columns: 60px 60px; grid-template-rows: 90px 90px; }

This creates a 2 x 2 grid.

But now imagine you use grid-column and grid-row to position your grid items like this:

.item-a { grid-column: 1 / 2; grid-row: 2 / 3; } .item-b { grid-column: 5 / 6; grid-row: 2 / 3; }

We told .item-b to start on column line 5 and end at column line 6, but we never defined a column line 5 or 6. Because we referenced lines that don't exist, implicit tracks with widths of 0 are created to fill in the gaps. We can use grid-auto-columns and grid-auto-rows to specify the widths of these implicit tracks:

.container { grid-auto-columns: 60px; }

If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.

Values:

row - tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default)

column - tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary

dense - tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later

.container { grid-auto-flow: row | column | row dense | column dense; }

Note that dense only changes the visual order of your items and might cause them to appear out of order, which is bad for accessibility.

Examples:

Consider this HTML:

<section class="container"> <div class="item-a">item-a</div> <div class="item-b">item-b</div> <div class="item-c">item-c</div> <div class="item-d">item-d</div> <div class="item-e">item-e</div> </section>

You define a grid with five columns and two rows, and set grid-auto-flow to row (which is also the default):

.container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; }

When placing the items on the grid, you only specify spots for two of them:

.item-a { grid-column: 1; grid-row: 1 / 3; } .item-e { grid-column: 5; grid-row: 1 / 3; }

Because we set grid-auto-flow to row, our grid will look like this. Notice how the three items we didn't place ( item-b, item-c and item-d) flow across the available rows:

If we instead set grid-auto-flow to column, item-b, item-c and item-d flow down the columns:

.container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: column; }

A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow (Note: You can only specify the explicit or the implicit grid properties in a single grid declaration).

Values:

none - sets all sub-properties to their initial values.

<grid-template> - works the same as the grid-template shorthand.

<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? - sets grid-template-rows to the specified value. If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-columns is omitted, it is set to auto.

[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> - sets grid-template-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-rows is omitted, it is set to auto.

Examples:

The following two code blocks are equivalent:

.container { grid: 100px 300px / 3fr 1fr; } .container { grid-template-rows: 100px 300px; grid-template-columns: 3fr 1fr; }

The following two code blocks are equivalent:

.container { grid: auto-flow / 200px 1fr; } .container { grid-auto-flow: row; grid-template-columns: 200px 1fr; }

The following two code blocks are equivalent:

.container { grid: auto-flow dense 100px / 1fr 2fr; } .container { grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; }

And the following two code blocks are equivalent:

.container { grid: 100px 300px / auto-flow 200px; } .container { grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px; }

It also accepts a more complex but quite handy syntax for setting everything at once. You specify grid-template-areas, grid-template-rows and grid-template-columns, and all the other sub-properties are set to their initial values. What you're doing is specifying the line names and track sizes inline with their respective grid areas. This is easiest to describe with an example:

.container { grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; }

That's equivalent to this:

.container { grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; }

Properties for the Children
(Grid Items)

float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Determines a grid item's location within the grid by referring to specific grid lines. grid-column-start/ grid-row-start is the line where the item begins, and grid-column-end/ grid-row-end is the line where the item ends.

Values:

.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto; }

Examples:

.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; }

.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; }

If no grid-column-end/ grid-row-end is declared, the item will span 1 track by default.

Items can overlap each other. You can use z-index to control their stacking order.

grid-column
grid-row

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Values:

<start-line> / <end-line> - each one accepts all the same values as the longhand version, including span

.item { grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; }

Example:

.item-c { grid-column: 3 / span 2; grid-row: third-line / 4; }

If no end line value is declared, the item will span 1 track by default.

place-self sets both the align-self and justify-self properties in a single declaration.

Values:

auto - The "default" alignment for the layout mode.

Examples:

.item-a { place-self: center; }

.item-a { place-self: center stretch; }

All major browsers except Edge support the place-self shorthand property.

Special Units & Functions

You'll likely end up using a lot of fractional units in CSS Grid, like 1fr. They essentially mean "portion of the remaining space". So a declaration like:

grid-template-columns: 1fr 3fr;

Means, loosely, 25% 75%. Except that those percentage values are much more firm than fractional units are. For example, if you added padding to those percentage-based columns, now you've broken 100% width (assuming a content-box box model). Fractional units also much more friendly in combination with other units, as you can imagine:

grid-template-columns: 50px min-content 1fr;

When sizing rows and columns, you can use all the lengths you are used to, like px, rem, %, etc, but you also have keywords:

min-content: the minimum size of the content. Imagine a line of text like "E pluribus unum", the min-content is likely the width of the word "pluribus".

max-content: the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence.

auto: this keyword is a lot like fr units, except that they "lose" the fight in sizing against fr units when allocating the remaining space.

fit-content: use the space available, but never less than min-content and never more than max-content.

fractional units: see above

The minmax() function does exactly what it seems like: it sets a minimum and maximum value for what the length is able to be. This is useful for in combination with relative units. Like you may want a column to be only able to shrink so far. This is extremely useful and probably what you want:

grid-template-columns: minmax(100px, 1fr) 3fr;

The min() function.

The max() function.

The repeat() function can save some typing:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* easier: */ grid-template-columns: repeat(8, 1fr); /* especially when: */ grid-template-columns: repeat(8, minmax(10px, 1fr));

But repeat() can get extra fancy when combined with keywords:

auto-fill: Fit as many possible columns as possible on a row, even if they are empty.

auto-fit: Fit whatever columns there are into the space. Prefer expanding columns to fill space rather than empty columns.

This bears the most famous snippet in all of CSS Grid and one of the all-time great CSS tricks:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

The difference between the keywords is spelled out in detail here.

An experimental feature of CSS grid is masonry layout. Note that there are lots of approaches to CSS masonry, but mostly of them are trickery and either have major downsides or aren't what you quite expect.

The spec has an official way now, and this is behind a flag in Firefox:

.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: masonry; }

See Rachel's article for a deep dive.

Subgrid is an extremely useful feature of grids that allows grid items to have a grid of their own that inherits grid lines from the parent grid.

.parent-grid { display: grid; grid-template-columns: repeat(9, 1fr); } .grid-item { grid-column: 2 / 7; display: grid; grid-template-columns: subgrid; } .child-of-grid-item { /* gets to participate on parent grid! */ grid-column: 3 / 6; }

This is only supported in Firefox right now, but it really needs to get everywhere.

It's also useful to know about display: contents;. This is not the same as subgrid, but it can be a useful tool sometimes in a similar fashion.

<div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <ul style="display: contents;"> <!-- These grid-items get to participate on the same grid!--> <li class="grid-item"></li> <li class="grid-item"></li> </ul> </div>

Fluid width columns that break into more or less columns as space is available, with no media queries!

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* This is better for small screens, once min() is better supported */ /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */ gap: 1rem; }

According to the CSS Grid Layout Module Level 1 specification, there are 5 animatable grid properties:

grid-gap, grid-row-gap, grid-column-gap as length, percentage, or calc.

grid-template-columns, grid-template-rows as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list.

As of this writing, only the animation of (grid-)gap, (grid-)row-gap, (grid-)column-gap is implemented in any of the tested browsers.

Browser

(grid-)gap, (grid-)row-gap, (grid-)column-gap

grid-template-columns

grid-template-rows

Firefox

supported ✅ 53+

supported ✅ 66+

supported ✅ 66+

Safari 12.0

not supported ❌

not supported ❌

not supported ❌

Chrome

supported ✅ 66+

not supported ❌

not supported ❌

Chrome for Android 66+, Opera Mini 33+

supported ✅

not supported ❌

not supported ❌

Edge

supported ✅ 16+

not supported ❌

not supported ❌

# data[].attributes.attachment_link.description
Get the poster! Reference this guide a lot? Here's a high-res image you can print! CSS Grid Layout (aka "Grid" or "CSS Grid"), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces.

# data[].attributes.body
https://animate.style/
https://www.csswand.dev/
http://www.justinaguilar.com/animations/
https://www.kirupa.com/html5/css_animations_cheatsheet.htm

# data[].attributes.attachment_link.readable_text
Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Edit this on GitHub

Installation and Usage

Installing

Install with npm:

$ npm install animate.css --save

Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):

$ yarn add animate.css

Import it into your file:

import 'animate.css';

Or add it directly to your webpage using a CDN:

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>

Basic usage

After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

<h1 class="animate__animated animate__bounce">An animated element</h1>

That's it! You've got a CSS animated element. Super!

Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible.

Using @keyframes

Even though the library provides you a few helper classes like the animated class to get you up running quickly, you can directly use the provided animations keyframes. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.

Example:

.my-element { display: inline-block; margin: 0 0.5rem; animation: bounce; /* referring directly to the animation's @keyframe declaration */ animation-duration: 2s; /* don't forget to set a duration! */ }

Be aware that some animations are dependent on the animation-timing property set on the animation's class. Changing or not declaring it might lead to unexpected results.

CSS Custom Properties (CSS Variables)

Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally.

Example:

/* This only changes this particular animation duration */ .animate__animated.animate__bounce { --animate-duration: 2s; } /* This changes all the animations globally */ :root { --animate-duration: 800ms; --animate-delay: 0.9s; }

Custom properties also make it easy to change all your animation's time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:

// All animations will take twice the time to accomplish document.documentElement.style.setProperty('--animate-duration', '2s'); // All animations will take half the time to accomplish document.documentElement.style.setProperty('--animate-duration', '.5s');

Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.
Edit this on GitHub

Utility Classes

Animate.css comes packed with a few utility classes to simplify its use.

Delay classes

You can add delays directly on the element's class attribute, just like this:

Animate.css provides the following delays:

The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:

/* All delay classes will take 2x longer to start */ :root { --animate-delay: 2s; } /* All delay classes will take half the time to start */ :root { --animate-delay: 0.5s; }

Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globally or locally. This will affect both the animations and the utility classes. Example:

/* All animations will take twice as long to finish */ :root { --animate-duration: 2s; } /* Only this element will take half the time to finish */ .my-element { --animate-duration: 0.5s; }

Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration, all the animations will respond to that change!

Repeating classes

You can control the iteration count of the animation by adding these classes, like below:

As with the delay and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them by setting the --animate-repeat property to a longer or a shorter value:

/* The element will repeat the animation 2x It's better to set this property locally and not globally or you might end up with a messy situation */ .my-element { --animate-repeat: 2; }

Notice that animate__infinite doesn't use any custom property, and changes to --animate-repeat will have no effect. Don't forget to read the best practices section to make the best use of repeating animations.
Edit this on GitHub

Best Practices

Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

Meaningful animations

You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.

Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.

It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.

Don't animate large elements

Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.

Don't animate root elements

Animating the <html/> or <body/> tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:

Infinite animations should be avoided

Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!

Mind the initial and final state of your elements

All the Animate.css animations include a CSS property called animation-fill-mode, which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to animation-fill-mode: both, but you can change it to suit your needs.

Don't disable the prefers-reduced-motion media query

Since version 3.7.0 Animate.css supports the prefers-reduced-motion media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:

See the Pen Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) on CodePen.

Gotchas

You can't animate inline elements

Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to display: inline-block when animating an inline-level element.

Overflow

Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the overflow: hidden property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, this guide can help you understand it.

Intervals between repeats

Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.
Edit this on GitHub

Usage with Javascript

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft');

You can detect when an animation ends:

const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft'); element.addEventListener('animationend', () => { // do something });

or change its duration:

const element = document.querySelector('.my-element'); element.style.setProperty('--animate-duration', '0.5s');

You can also use a simple function to add the animations classes and remove them automatically:

const animateCSS = (element, animation, prefix = 'animate__') => // We create a Promise and return it new Promise((resolve, reject) => { const animationName = `${prefix}${animation}`; const node = document.querySelector(element); node.classList.add(`${prefix}animated`, animationName); // When the animation ends, we clean the classes and resolve the Promise function handleAnimationEnd(event) { event.stopPropagation(); node.classList.remove(`${prefix}animated`, animationName); resolve('Animation ended'); } node.addEventListener('animationend', handleAnimationEnd, {once: true}); });

And use it like this:

animateCSS('.my-element', 'bounce'); // or animateCSS('.my-element', 'bounce').then((message) => { // Do something after the animation });

If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.
Edit this on GitHub

Migration from v3.x and Under

Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is impossible.

But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

If you're using a bundler, update your import:

from:

import 'animate.min.css';

to

import 'animate.compat.css';

Notice that depending on your project's configuration, this might change a bit.

In case of using a CDN, update the link in your HTML:

from:

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" /> </head>

to

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" /> </head>

In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css file.
Edit this on GitHub

Custom Builds

Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.

Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.

First of all, you'll need Node and all other dependencies:

$ git clone https://github.com/animate-css/animate.css.git $ cd animate.css $ npm install

Next, run npm start to compile your custom build. Three files will be generated:

animate.css: raw build, easy to read and without any optimization

animate.min.css: minified build ready for production

animate.compat.css: minified build ready for production without class prefix. This should only be used as an easy path for migrations.

For example, if you'll only use some of the "attention seekers" animations, simply edit the ./source/animate.css file, delete every @import and the ones you want to use.

@import 'attention_seekers/bounce.css'; @import 'attention_seekers/flash.css'; @import 'attention_seekers/pulse.css'; @import 'attention_seekers/rubberBand.css'; @import 'attention_seekers/shake.css'; @import 'attention_seekers/headShake.css'; @import 'attention_seekers/swing.css'; @import 'attention_seekers/tada.css'; @import 'attention_seekers/wobble.css'; @import 'attention_seekers/jello.css'; @import 'attention_seekers/heartBeat.css';

Now, just run npm start and your highly optimized build will be generated at the root of the project.

Changing the default prefix

It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:

/* on Animate.css package.json */ "animateConfig": { "prefix": "myCustomPrefix__" },

then:

Easy peasy!
Edit this on GitHub

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences, and it will turn off CSS transitions for them without any further work required.
Edit this on GitHub

License and Contributing

Animate.css is licensed under the Hippocratic License.

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc.]) and let us see a demo of submitted animations in a pen. That last one is important.

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to animate@eltonmesquita.com.
Edit this on GitHub

# data[].attributes.attachment_link.title
Animate.css | A cross-browser library of CSS animations.

# data[].attributes.attachment_link.description
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

# data[].attributes.body
Video útil para iniciar en bootstrap

# data[].attributes.attachment_link.title
Curso completo de Bootstrap desde cero 1.- Introducción e Instalación

# data[].attributes.body
Conceptos básicos para transiciones

# data[].attributes.attachment_link.readable_text
Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

Nota: como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como -moz-transition, -webkit-transition y -o-transition.

Las transiciones CSS se controlan mediante la propiedad abreviada transition. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:

Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.

Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.

Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.

Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.

Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento transitionend ofrece dos propiedades:

propertyName

Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.

elapsedTime

Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de transition-delay.

Como es habitual, puedes usar el método element.addEventListener() para monitorizar este acontecimiento:

el.addEventListener("transitionend", updateTransition, true);

Nota: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.

Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

Nota: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.

Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

Se considera como si fuera:

De manera similar, si cualquier lista de valores de propiedades es más larga que la de transition-property, se trunca, de forma que si tienes la siguiente CSS:

Se interpreta como:

Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:

En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:

ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)

linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)

Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.

En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

<ul>
  <li id="long1">Transición larga, gradual...</li>
  <li id="fast1">Transición muy rápida...</li>
  <li id="delay1">Transición larga de un minuto de retraso...</li>
  <li id="easeout">Usar intervalos de alejamiento...</li>
  <li id="linear">Usar intervalos lineales...</li>
  <li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

Usar un retraso

Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Usar una función de intervalos de transición lineales

De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición linear, tal y como se muestra a continuación.

transition-timing-function: linear;

Existen distintas funciones de intervalos estándares disponibles; consulta transition-timing-function (en-US) para tener más detalles.

Especificar una función de intervalos cúbicos bézier

Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:

  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);

Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

Primero configuramos el menú usando HTML:

<div class="sidebar">
  <p><a class="menuButton" href="home">Inicio</a></p>
  <p><a class="menuButton" href="about">Acerca de</a></p>
  <p><a class="menuButton" href="contact">Contacto Us</a></p>
  <p><a class="menuButton" href="links">Vínculos</a></p>
</div>

Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  -moz-box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  background-color:white;
  color:black;
  -moz-box-shadow: 2px 2px 1px black;
}

Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado .

En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

El HTML

El HTML para este ejemplo es muy sencillo:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Transition Demo</title>
    <link rel="stylesheet" href="transitions.css" type="text/css">
    <script src="transitions.js" type="text/javascript"></script>
  </head>
  <body onload="runDemo()">
    <div class="slideRight">¡Esto es una caja!</div>
  </body>
</html>

Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función runDemo() del código JavaScript.

La CSS

Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuación se muestran sólo los trozos relevantes:

.slideRight {
  position: absolute;
  transition-property: background-color, color, left;
  transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  background-color: red;
  left: 0%;
  color: black;
}

Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.

La propiedad transition-property se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son background-color, y . La propiedad transition-duration indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.

Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.

Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.

.slideLeft {
  position: absolute;
  transition-property: background-color, color, left;
  transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  text-align: center;
  background-color: blue;
  left: 90%;
  color: white;
  width: 100px;
  height: 100px;
}

Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad está aquí al 90%.

El código JavaScript

Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.

En primer lugar, la función runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animación:

function runDemo() {
  var el = updateTransition();

  // Configurar un controlador de eventos para invertir la dirección
  // cuando finalice la transición.

  el.addEventListener("transitionend", updateTransition, true);
}

Es bastante sencillo: llama a la función updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.

La función updateTransition() tiene este aspecto:

function updateTransition() {
  var el = document.querySelector("div.slideLeft");

  if (el) {
    el.className = "slideRight";
  } else {
    el = document.querySelector("div.slideRight");
    el.className = "slideLeft";
  }

  return el;
}

Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.

# data[].attributes.attachment_link.description
Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo.

# data[].attributes.body
https://bootstrapcheat.com/class/

# data[].attributes.attachment_link.title
All Class List Bootstarp 5 - Bootstrap 5 Cheat Sheet

# data[].attributes.attachment_link.description
Bootstrap 5 Cheat Sheet - The Bootstrap 5 classes list helps you find documentation. Use the sortable table below to search specific classes.

# data[].attributes.attachment_link.readable_text
Site License

What's New

Support

Login

Diagrams

Templates

Features

Enterprise

Developers

Buy

Try it Now

Diagrams

Templates

Features

Enterprise

Developers

Buy

Site License

What's New

Support

Try it Now

# data[].attributes.attachment_link.readable_text
En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.

HTML (" Hypertext Markup Language") no es un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de elementos, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:

Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ():

Nota: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

Exploremos un poco el elemento párrafo:

Las principales partes de nuestro elemento son:

La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado entre paréntesis angulares de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.

El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.

La etiqueta de cierre: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.

El elemento lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.

Edita la siguiente línea en el área Entrada envolviéndola con las etiquetas <em> y </em>. Para abrir el elemento, coloca la etiqueta de apertura <em> al principio de la línea. Para cerrar el elemento, coloca la etiqueta de cierre </em> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de Salida.

Si te equivocas, siempre puedes volver al código anterior mediante el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

Se pueden poner elementos dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que nuestro gato es muy gruñón, podríamos encerrar la palabra muy en un elemento para que aparezca destacada.

Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento p, luego abrimos el elemento strong. Para un anidamiento adecuado, primero debemos cerrar el elemento strong, antes de cerrar el p.

El siguiente es un ejemplo de la forma incorrecta de anidar:

Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.

Hay dos categorías importantes de elementos en HTML - Estos son los elementos de bloque y los elementos en línea.

Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento a nivel de bloque.

Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es el caso de un elemento (hipervínculo) o elementos de énfasis como o .

Considera el siguiente ejemplo:

es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, es un elemento a nivel de bloque. Cada elemento p aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al estilo CSS predeterminado que el navegador aplica a los párrafos).

Nota: HTML5 redefinió las categorías de elementos: consulta Categorías de contenido de elementos. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que block e inline . Este artículo seguirá con estos dos términos.

Nota: Los términos "en bloque" (block) y "en línea" (inline), tal como se usan en este tema, no se deberían confundir con los tipos de casillas de CSS (en-US) que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento inserta una imagen en la página:

Este texto mostrará lo siguiente en tu página:

Nota: Los elementos vacíos en ocasiones también se llaman elementos nulos o vanos ( void elements).

Los elementos también pueden tener atributos. Los atributos tienen este aspecto:

Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo class asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.

Un atributo debería tener:

Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios).

El nombre del atributo, seguido por un signo igual.

Un valor del atributo, rodeado de comillas de apertura y cierre.

Otro ejemplo de un elemento es . Esto significa ancla. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:

: El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, href="https://www.mozilla.org/".

: El atributo title añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, title="La página de inicio de Mozilla". Esta información aparecerá cuando se le pase el ratón por encima.

: El atributo target especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, target="_blank" abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.

Edita la línea de abajo en el área de Entrada para convertirlo en un enlace a tu sitio web favorito.

1. Añade el elemento <a>.

2. Añade el atributo href y el atributo title.

3. Especifica el atributo target para abrir el enlace en una nueva pestaña.

Los cambios se actualizarán inmediatamente en la zona de Salida. Deberías ver un enlace que mostrará el contenido del atributo title cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo href cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo , que puedes asignar a los elementos de entrada del formulario. (Usa esto para deshabilitar los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:

De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):

Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo title:

En este punto el navegador interpretará mal el cambio y pensará que el atributo title corresponde a tres atributos: un atributo title con el valor The y dos atributos booleanos: Mozilla y homepage. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!

Incluye siempre las comillas de atributos. Evita tales problemas y da como resultado un código más legible.

En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:

<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

Así que tendrás que hacer esto:

Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:

Aquí tenemos:

1. <!DOCTYPE html>: El elemento doctype. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido. Eso es lo único que realmente necesitas saber.

2. <html></html>: El elemento <html>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.

3. <head></head>: El elemento (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.

4. <meta charset="utf-8">: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.

5. <title></title>: El elemento . Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.

6. <body></body>: El elemento <body>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.

Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:

1. Copiar el ejemplo de la página HTML del punto anterior.

2. Crear un archivo nuevo en un editor de texto.

3. Pegar el código en el nuevo archivo de texto.

4. Guardar el archivo como index.html.

Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:

En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento <body>, en este caso). Intenta reproducir los siguientes pasos:

Justo debajo de la etiqueta de apertura , añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura <h1> y una etiqueta de cierre </h1>.

Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.

Pon las palabras importantes dentro de etiquetas <strong> de apertura y </strong> de cierre para que destaquen en negrita.

Añade un enlace a tu párrafo, como se ha explicado anteriormente en este mismo artículo.

Agrega una imagen a tu documento. Colócala debajo del párrafo, como se explicó anteriormente en el artículo. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:

No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.

Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.

En HTML, los caracteres <, >,",' y & son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.

Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;).

El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&lt;' , cita para ' &quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta Anexo:Referencias a entidades de caracteres XML y HTML en (Wikipedia).

Considera los dos siguientes párrafos:

En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <p> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado < y > por sus referencias correspondientes.

En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.

Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <!-- y -->. Por ejemplo:

Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.

Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.
En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.

Nota: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada ( Cascading style sheets) o CSS. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.

# data[].attributes.attachment_link.title
Empezar con HTML - Aprende sobre desarrollo web | MDN

# data[].attributes.attachment_link.description
En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML.