Los mejores tutoriales de CSS y CSS3

Hojas de estilo en cascada (CSS)

CSS es un acrónimo de Cascading Style Sheets. Se inventó por primera vez en 1996 y ahora es una característica estándar de todos los principales navegadores web.

CSS permite a los desarrolladores controlar el aspecto de las páginas web mediante el "estilo" de la estructura HTML de esa página.

Las especificaciones CSS las mantiene el World Wide Web Consortium (W3C).

Puedes construir algunas cosas asombrosas solo en CSS, como este juego de Buscaminas de CSS puro (que no usa JavaScript).

Un buen comienzo es el plan de estudios freeCodeCamp Introducción al CSS básico.

Otra sugerencia para principiantes es W3C's Begin with HTML + CSS, que enseña cómo crear una hoja de estilo.

El sitio CSS Zen Garden es un gran ejemplo de cómo se puede diseñar el mismo HTML para que parezca totalmente único.

Para obtener una demostración del poder de CSS, consulte Species In Pieces.

Tutoriales para comenzar con CSS y CSS3

El mejor lugar para comenzar a aprender CSS es con la introducción de 2 horas al tutorial de CSS de freeCodeCamp.

Luego, si se siente más aventurero, tenemos un curso completo de 12 horas que cubre HTML, HTML5 y CSS en detalle.

Flexbox

Flexbox es una nueva forma de estructurar contenido en CSS3. Proporciona una manera maravillosa de crear sitios web receptivos que funcionan bien en diferentes tamaños de pantalla y ordenan contenido.

Hay 3 sencillos pasos para usar Flexbox:

  1. Convierta el contenedor principal en un contenedor flexible usando display: flex;
  2. Ajuste el diseño de diferentes contenedores usando flex-direction
  3. Ajuste el diseño de elementos dentro de un recipiente mediante el uso de propiedades como justify-content, align-items, etc.

Flexbox le permite diseñar, alinear y ajustar de manera eficiente el espacio entre los diferentes elementos de la página, incluso si no conoce su tamaño exacto. En cambio, los artículos y contenedores son dinámicos y se "flexionarán" para llenar mejor el espacio disponible.

  • eje principal : El eje principal de un contenedor flexible a lo largo del cual se colocan los elementos flexibles. Tenga en cuenta que esta puede ser horizontal o vertical según laflex-directionpropiedad.
  • inicio principal | extremo principal :Los artículos flexibles se colocan en un recipiente desde main-starthasta main-end.
  • tamaño principal : la dimensión principal de un elemento flexible, que puede ser su ancho o alto, actúa como el tamaño principal del elemento.
  • eje transversal : El eje que es perpendicular al eje principal. La dirección del eje transversal depende de la dirección del eje principal.
  • inicio cruzado | cross-end : Las líneas flexibles y los artículos se colocan en un contenedor flexible comenzando desdecross-startelcross-endlado.
  • tamaño cruzado : la dimensión cruzada del artículo (ancho o alto) actúa como el tamaño cruzado del artículo.

Diseño de cuadrícula

CSS Grid Layout, simplemente conocido como Grid, es un esquema de diseño que es el más nuevo y más poderoso de CSS. Es compatible con todos los navegadores principales y proporciona una forma de colocar elementos en la página y moverlos.

Puede asignar elementos automáticamente a áreas , dimensionarlos y redimensionarlos, encargarse de crear columnas y filas según un patrón que defina, y hace todos los cálculos utilizando la frunidad recién introducida .

¿Por qué Grid?

  • Puede tener fácilmente una cuadrícula de 12 columnas con una línea de CSS. grid-template-columns: repeat(12, 1fr)
  • Grid te permite mover cosas en cualquier dirección. A diferencia de Flex, donde puede mover elementos horizontalmente ( flex-direction: row) o verticalmente ( flex-direction: column), y no ambos al mismo tiempo, Grid le permite mover cualquier elemento de cuadrícula a cualquier área de cuadrícula predefinida en la página. Los elementos que mueva no tienen que ser adyacentes.
  • Con CSS Grid, puede cambiar el orden de los elementos HTML utilizando solo CSS . Mueva algo de arriba a la derecha, mueva los elementos que estaban en el pie de página a la barra lateral, etc. En lugar de mover de a en el HTML, puede simplemente cambiar su ubicación grid-areaen la hoja de estilo CSS.

Grid vs Flex

  • Flex es unidimensional, ya sea horizontal o vertical, mientras que Grid es bidimensional, lo que significa que puede mover elementos en planos horizontales y verticales
  • En Grid, aplicamos estilos de diseño al contenedor principal y no a los elementos. Flex, por el contrario, se dirige al tema de la flexión de las propiedades establecidas como flex-basis, flex-growyflex-shrink
  • Grid y Flex no se excluyen mutuamente. Puede usar ambos en el mismo proyecto.

Comprobando la compatibilidad del navegador con @supports

Idealmente, cuando construyes un sitio, lo diseñarías con Grid y usarías Flex como respaldo. Puede averiguar si su navegador admite la cuadrícula con la @supportregla CSS (también conocida como consulta de características). He aquí un ejemplo:

.container { display: grid; /* display grid by default */ } @supports not (display: grid) { /* if grid is not supported by the browser */ .container { display: flex; /* display flex instead of grid */ } }

Empezando

Para convertir cualquier elemento en una cuadrícula, debe asignar su displaypropiedad a grid, así:

.conatiner { display: grid; }

Y eso es. Acabas de hacer tu .containercuadrícula. Cada elemento dentro del .containerse convierte automáticamente en un elemento de cuadrícula.

Definición de plantillas

Filas y columnas

grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 300px;

Areas

grid-template-areas: "a a a a" "b c d e" "b c d e" "f f f f";

o

grid-template-areas: "header header header header" "nav main main sidebar";

Áreas de cuadrícula

Aquí hay un código de muestra sobre cómo definir y asignar áreas de cuadrícula:

.site { display: grid; grid-template-areas: /* applied to grid container */ "head head" /* you're assigning cells to areas by giving the cells an area name */ "nav main" /* how many values kind of depends on how many cells you have in the grid */ "nav foot"; } .site > header { grid-area: head; } .site > nav { grid-area: nav; } .site > main { grid-area: main; } .site > footer { grid-area: foot; }

La frunidad

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly. Plus there will be no bleeding gaps at the end either.

Examples

Changing the order of elements based on screen size

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "main header" "main sidebar" } @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer" } }

More Information:

  • CSS Grid Palyground by Mozilla: Great starting point if you’re new to CSS Grids. It has visuals to help you understand the terminology easily
  • YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts): This presentation will convince you in less than an hour why CSS Grids are cool and why/how you should use them.
  • Videos: Learn Grid Layout Video Series by Rachel Andrew: Rachel Andrew is an expert on the subject. The video titles may look strange and overwhelming, but the content is short and to the point
  • Book: Get Ready for CSS Grid Layout by Rachel Andrew

Selectors

Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, ids, and attributes are some of the hooks used as selectors.

Selector Syntax

Selectors arranged in a specific sequence build up to a rule to target elements. An example:

/* selects anchor tags */ a { color: orange; } /* selects elements with hero class */ .hero { text-align: center; }

Type of Selectors

  • TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
  • Universal Selectors apply to all elements.
  • div * matches all elements within div elements.
  • Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
  • h1[title] selects h1 elements with title attribute.
  • Class Selectors are Selectors that target elements using their class names.
  • ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

  • Official CSS3 Selectors specification
  • Selectors page on Mozilla Developer Network
  • CSS Selectors Cheat Sheet on FreeCodeCamp Guides

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

As an example:

 p { color: blue; } p .red { color: red; }

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

Note:

  • Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  • Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  • Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

 .none {display: none} .block {display: block} .inline-block {display: inline-block} .inline {display: inline} .flex {display: flex} .inline-flex {display: inline-flex} .inline-table {display: inline-table} .table {display: table} .inherit {display: inherit} .initial {display: initial}

The display:none property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. display: none will not only hide the element, but all other elements on the page will behave as if that element does not exist.

This is the biggest difference between this property and the visibility: hidden property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible.

These keyword values are grouped into six categories: