CSS son las siglas con las que se conoce a las hojas de estilo en cascada, pero... ¿Qué es CSS realmente?
easyQuiero añadir o modificar estilos CSS a una página web... ¿Cómo lo hago? ¿Qué ficheros debo modificar?
easy¿Cuál es la estructura de un archivo CSS? ¿Qué sintaxis tiene? Selectores, propiedades, valores. Veamos todo desde el principio.
easyLa 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.
easyLos 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.
easyLos prefijos CSS indican a los navegadores que realicen acciones que aún no están implementadas por completo. Se recomienda usar Autoprefixer.
easyEn CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.
easyLa 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).
mediumLas CSS Custom Properties son un concepto muy similar (pero no igual) a las variables de programación. ¡Aprende a utilizarlas!
mediumLa 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.
easyPara dominar CSS primero hay que comprender a la perfección el modelo de cajas de CSS. Bordes (border), relleno (padding) y márgenes (margin).
easy¿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.
easyCon 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.
easy¿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.
easyExiste un sistema para crear bordes con imágenes, expandibles a partir de una imagen de base. En este artículo te explicamos como.
mediumEn CSS existen expresiones como calc(), min(), max() o clamp() que permiten realizan operaciones interesantes con unidades de forma muy cómoda.
mediumPropiedades relacionadas con los colores y los fondos que se pueden aplicar en una página web.
easyExisten varias propiedades en CSS que permiten modificar los fondos, desde colores sólidos hasta imágenes con su tamaño o posición.
easyCon CSS se pueden crear fondos con degradados (o gradientes de color) partiendo de un color a otro (u otros).
easyCSS 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.
easyLos selectores CSS avanzados (combinadores CSS) permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.
mediumLas pseudoclases CSS permiten seleccionar elementos dependiendo de su comportamiento en el navegador. La más conocida es :hover.
easyCSS permite utilizar pseudoclases avanzadas para seleccionar elementos dependiendo de su estructura o posición, llegando a contabilizarlos.
mediumLos pseudoelementos CSS permiten aplicar estilos que añaden elementos (o estilos) que realmente no existen originalmente en el documento HTML.
mediumMediante los atributos CSS se permite aplicar estilos a elementos HTML dependiendo del contenido de sus atributos HTML.
mediumDesde 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...)
easyEn CSS es posible descargar tipografías no instaladas en el dispositivo del usuario de forma transparente, utilizando la regla @font-face o Google Fonts.
easyCSS incorpora gran cantidad de propiedades para modificar el comportamiento de los textos de una página web.
easyAlgunas propiedades avanzadas para gestionar el aspecto de una tipografía o el modo de aparición de la misma.
mediumEs posible activar o desactivar aspectos avanzados relacionados con la tipografía, como ligaduras, variaciones... directamente desde CSS.
advancedAl margen de las propiedades de CSS comunes, también existen algunas propiedades orientadas a tablas HTML.
easyCon CSS se puede cambiar el comportamiento de las listas HTML para que muestren otra numeración, o un espacio de separación diferente.
easyTodos los elementos HTML tienen un tipo de representación. Con display en CSS podemos cambiarlos por otros tipos (inline, block...).
easyUno 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.
mediumMediante la propiedad float de CSS se pueden desplazar elementos hacia una dirección u otra.
easyFlexbox 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.
mediumGrid 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.
mediumCSS permite modificar ciertos detalles de interacción del usuario como contornos de elementos o el cursor del ratón.
easyEs posible modificar ciertos detalles del ratón del usuario y su interacción con una página web mediante CSS.
easyCon 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.
easyCon 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...
easyLos modos de fusión (o blend modes) nos permiten establecer combinaciones de colores entre varios elementos y fusionarlos.
easyLas 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.
easyExisten una serie de bases que hay que conocer antes de comenzar a trabajar en diseños responsive. Aquí te las cuento.
easyCSS 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.
mediumEs posible crear documentos de impresión CSS para aplicarlos a documentos de formato físico o páginas que van a ser impresas.
easyCSS permite aplicar estilos a documentos destinados a impresión, permitiendo administrar su método de paginación.
mediumDentro del apartado de media queries, podemos especificar ciertas preferencias de usuario, para adaptarnos a las elecciones particulares que han elegido.
easyMediante las transiciones CSS podemos suavizar cambios repentinos de estilo para que se realicen de forma gradual y suave.
easyCon CSS podemos realizar animaciones de forma muy sencilla, ofreciéndonos grandes posibilidades y la flexibilidad de utilizar propiedades para cambiar su comportamiento.
mediumCSS ofrece un conjunto de propiedades para realizar transformaciones 2D y 3D, permitiendo trabajar gráficos y combinarlo con animaciones o transiciones.
medium