CSS son las siglas con las que se conoce a las hojas de estilo en cascada, pero... ¿Qué es CSS realmente?
Quiero añadir o modificar estilos CSS a una página web... ¿Cómo lo hago? ¿Qué ficheros debo modificar?
¿Cuál es la estructura de un archivo CSS? ¿Qué sintaxis tiene? Selectores, propiedades, valores. Veamos todo desde el principio.
La minificación (minify o uglify) de un archivo CSS es una buena práctica para conseguir reducir su tamaño, eliminando los carácteres superfluos.
Los navegadores son un factor clave muy importante en el diseño web. No sólo por ser necesarios, sino porque hay que entender su ecosistema y como funcionan.
Los prefijos CSS indican a los navegadores que realicen acciones que aún no están implementadas por completo. Se recomienda usar Autoprefixer.
En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.
La cascada CSS, junto a la herencia, son dos de las características más importantes de CSS (y más frustrantes si no se sabe como funcionan).
La gran guía «telefónica» de propiedades de CSS. ¿A quién vas a llamar si necesitas utilizar una propiedad de CSS?
¿Qué unidades existen en CSS? ¿Cuántas hay? Las más comunes son los píxels, aunque también existen porcentajes y otros tipos de unidades.
Para dominar CSS primero hay que comprender a la perfección el modelo de cajas de CSS. Bordes (border), relleno (padding) y márgenes (margin).
¿Cuáles son las diferencias entre los márgenes (margin) y el relleno (padding) en CSS? Hay que comprender el modelo de cajas de CSS.
Con CSS podemos modificar los bordes de los elementos de un documento HTML. Desde su color o tamaño hasta redondearlos o usar imágenes expandibles.
¿Quieres redondear las esquinas de un elemento con CSS? Para ello puedes usar la propiedad border-radius, la cuál explicamos en este artículo.
Existe un sistema para crear bordes con imágenes, expandibles a partir de una imagen de base. En este artículo te explicamos como.
Propiedades relacionadas con los colores y los fondos que se pueden aplicar en una página web.
Existen varias propiedades en CSS que permiten modificar los fondos, desde colores sólidos hasta imágenes con su tamaño o posición.
Con CSS se pueden crear fondos con degradados (o gradientes de color) partiendo de un color a otro (u otros).
CSS es muy potente porque permite seleccionar elementos HTML de una forma muy práctica. Los IDs y las clases son el método más utilizado.
Los selectores CSS avanzados (combinadores CSS) permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.
Las pseudoclases CSS permiten seleccionar elementos dependiendo de su comportamiento en el navegador. La más conocida es :hover.
CSS permite utilizar pseudoclases avanzadas para seleccionar elementos dependiendo de su estructura o posición, llegando a contabilizarlos.
Los pseudoelementos CSS permiten aplicar estilos que añaden elementos (o estilos) que realmente no existen originalmente en el documento HTML.
Mediante los atributos CSS se permite aplicar estilos a elementos HTML dependiendo del contenido de sus atributos HTML.
Desde CSS se pueden controlar las fuentes (tipografías) que se van a utilizar en una página web y sus características (estilo, interlineado, interletraje...)
En CSS es posible descargar tipografías no instaladas en el dispositivo del usuario de forma transparente, utilizando la regla @font-face o Google Fonts.
CSS incorpora gran cantidad de propiedades para modificar el comportamiento de los textos de una página web.
Algunas propiedades avanzadas para gestionar el aspecto de una tipografía o el modo de aparición de la misma.
Es posible activar o desactivar aspectos avanzados relacionados con la tipografía, como ligaduras, variaciones... directamente desde CSS.
Al margen de las propiedades de CSS comunes, también existen algunas propiedades orientadas a tablas HTML.
Con CSS se puede cambiar el comportamiento de las listas HTML para que muestren otra numeración, o un espacio de separación diferente.
Todos los elementos HTML tienen un tipo de representación. Con display en CSS podemos cambiarlos por otros tipos (inline, block...).
Uno de los temas más complejos de CSS es aprender a posicionar elementos. El posicionamiento relativo o absoluto es un buen punto de partida para aprender.
Mediante la propiedad float de CSS se pueden desplazar elementos hacia una dirección u otra.
Flexbox es un módulo de CSS para crear diseños flexibles con un mecanismo novedoso que deja atrás los antiguos y problemáticos sistemas tradicionales de CSS.
Grid CSS permite dejar atrás la problemática forma de crear diseños en CSS, aportando un modelo de cuadrículas o rejillas muy personalizable y flexible.
CSS permite modificar ciertos detalles de interacción del usuario como contornos de elementos o el cursor del ratón.
Es posible modificar ciertos detalles del ratón del usuario y su interacción con una página web mediante CSS.
Con CSS se pueden aplicar dos tipos de sombras: sombras a elementos HTML y sombras a textos. Con ellas podemos conseguir un efecto visual más elegante a nuestras páginas.
Con CSS podemos aplicar filtros simples en elementos HTML, imágenes o videos para cambiar el aspecto como lo hacemos con filtros de Photoshop: sepia, blanco y negro, contraste, brillo...
Los modos de fusión (o blend modes) nos permiten establecer combinaciones de colores entre varios elementos y fusionarlos.
Las siglas RWD significan Responsive Web Design y es un tipo de diseño que tiene en cuenta la adaptación a dispositivos móviles o tablets.
Existen una serie de bases que hay que conocer antes de comenzar a trabajar en diseños responsive. Aquí te las cuento.
CSS dispone de un sistema de media queries para aplicar estilos dependiendo de si estamos en móvil, tablet o en un dispositivo de escritorio. Aprende como funciona.
Es posible crear documentos de impresión CSS para aplicarlos a documentos de formato físico o páginas que van a ser impresas.
CSS permite aplicar estilos a documentos destinados a impresión, permitiendo administrar su método de paginación.
Dentro del apartado de media queries, podemos especificar ciertas preferencias de usuario, para adaptarnos a las elecciones particulares que han elegido.
Mediante las transiciones CSS podemos suavizar cambios repentinos de estilo para que se realicen de forma gradual y suave.
Con CSS podemos realizar animaciones de forma muy sencilla, ofreciéndonos grandes posibilidades y la flexibilidad de utilizar propiedades para cambiar su comportamiento.
CSS ofrece un conjunto de propiedades para realizar transformaciones 2D y 3D, permitiendo trabajar gráficos y combinarlo con animaciones o transiciones.