CSS

> Temas > CSS
Editar

Categoría de CSS, con todo lo que necesitas para aprender las Hojas de Estilo en Cascada. Manuales, talleres, maquetación css, preguntas y respuestas y mucho más

CSS es el segundo lenguaje más básico y esencial para crear páginas web. El primero sería HTML, con el que se define el contenido de la página. El segundo CSS, con el que se define la parte de la presentación, es decir, cómo deben mostrarse los elementos de la página, su posición, forma, espaciados, colores y en resumen, toda la parte estética.

CSS es un lenguaje que consiste en una serie de elementos mediante los cuales se declaran los estilos, básicamente éstos son los más importantes:

  • Selectores, mediante los cuales podemos especificar qué elementos de la página nos estamos refiriendo
  • Atributos de estilo para definir qué cosas queremos estilizar sobre los selectores indicados
  • Una serie de valores, que indican qué estilo se debe aplicar a cada atributo sobre cada selector. Los valores se expresan con unidades CSS, que sirven para cuantificar los valores (píxeles, puntos...)

Aprender CSS no es difícil, pero cuando se usa profesionalmente se deben tener en cuenta muchos detalles y buenas prácticas, como la organización del código, la reutilización, la optimización, etc. que básicamente están tratados en los manuales y artículos que encontrarás en DesarrolloWeb.

Más información:

Separar el código CSS del código HTML

El enfoque de CSS es servir para definir la capa de presentación, es decir, la parte relacionada con el aspecto. Es algo que cualquier estudiante suele tener claro cuando está aprendiendo CSS, ya que al enseñar HTML probablemente se haya insistido, pero que siempre conviene reforzar.

En el código HTML colocamos el contenido, es decir, qué debe visualizarse, mientras que con CSS definimos la presentación, es decir, cómo debe visualizarse. Esto nos lleva a una serie de usos de CSS que debemos de respetar como buenas prácticas.

  • Lo adecuado cuando trabajamos con CSS es escribir el código en ficheros independientes, que tendrán extensión .css. Cada cosa en su lugar!
  • No conviene colocar código CSS por tanto dentro de archivos HTML. Debemos evitar colocar estilos en etiquetas <style> dentro del propio código HTML.
  • Por supuesto, mucho menos aconsejable es colocar estilos en los atributos "style" de las etiquetas HTML.

Editar

Evolución del lenguaje CSS

Las hojas de estilo en cascada llegaron al mundo de la web bastante más tarde que el lenguaje HTML. Aunque fue propuesto en 1994 el primer estándar no llegaría hasta prácticamente entrado 1997. Sería CSS 1.

Obviamente, CSS 1 supuso un gran avance para el mundo del desarrollo de páginas web, pero lo cierto es que para entonces los diseñadores se habían acostumbrado a mezclar el contenido con la presentación, por medio del uso de etiquetas HTML que estaban presentes y seguían funcionando en los navegadores. Además CSS 1 había sido presentado con bastantes carencias, lo que hizo que se tuviera que presentar un nuevo estándar rápidamente. Así fue como sería liberado como recomendación CSS 2 pasado apenas un año, en 1998.

A partir de este punto el mundo de los estándares abiertos para la web tuvo un parón generalizado. No solo CSS, sino HTML y otros lenguajes como Javascript. CSS 2 tuvo una revisión publicada como CSS 2.1 en la que añadieron algunos selectores nuevos, pero pasaron años antes de la presentación de una nueva versión. Con todo entramos en una etapa oscura en la que CSS no llegó a cubrir totalmente sus objetivos.

  • La compatibilidad de CSS no era la misma en todos los navegadores
  • Los navegadores se dedicaban a incorporar funcionalidades por medio de prefijos, que hacían más difícil y tedioso escribir el CSS.
  • El estándar no cubria todas las necesidades de los diseñadores

Con todo, los diseñadores y desarrolladores web tenían que usar los famosos "hacks de CSS", que no eran más que artimañas para conseguir los resultados deseados de maneras poco ortodoxas, que acababan en un código complejo y muy orientado a atender necesidades de navegadores determinados. Por poner un par de ejemplos, se tenía que usar capas anidadas a varios niveles para conseguir cosas como los bordes redondeados, Javascript para conseguir tamaños de fuentes adaptables, imágenes con transparencia en canal alfa (PNG) para conseguir sombras, etc. Al final conseguir un diseño medianamente atractivo y homogéneo a lo largo de los navegadores solo con CSS era muy complicado y se tenía que continuar variando el HTML o el Javascript para solucionar sus carencias.

La aparición de CSS 3 sólo se materializó en el año 2014 con el movimiento de HTML 5. Vendría a aportar soluciones a la mayoría de las necesidades de los diseñadores y a permitir finalmente cubrir el objetivo principal del lenguaje, la separación del contenido de la presentación. No obstante cabe decir que CSS 3 se presentó por medio de un nutrido grupo de especificaciones, que han ido mejorándose e incrementándose hasta la fecha, por lo que no es tanto un lanzamiento puntual, sino una continua mejora del estándar a diversos niveles.

Hoy podemos decir que CSS cubre las necesidades de los diseñadores, más aún después de la aparición de CSS Flexbox, que permite agregar una facilidad enorme a la hora de colocar los elementos en la página. Junto por supuesto del último aporte a las especificaciones de CSS Grid System, que por fin ha aportado un completo y versátil sistema de rejilla a la web, mediante el cual los diseñadores web disponen de herramientas verdaderamente potentes para posicionar los elementos en la página, de manera independiente a como estos aparezcan en el código HTML.

Editar

Preprocesadores CSS

Los preprocesadores son herramientas indispensables para el desarrollo frontend actual. Permiten desarrollar CSS de una manera más ágil pero sobretodo crear un código más mantenible.

Para ello los preprocesadores extienden las características del lenguaje CSS, permitiendo uso de variables, funciones (mixins) diversas otras formas de acortar la escritura del código.

Los preprocesadores no se ejecutan en el entorno del navegador. En lugar de ello se procesan, compilando su código en código CSS estándar que si es capaz de entenderlo cualquier navegador. En ese proceso de compilación a menudo se incluye además una serie de mejoras en el código CSS como la minimización.

los preprocesadores más comunes son Less y Sass. Siendo Sass el más extendido en la comunidad frontend con diferencia.

Editar

Selectores CSS

Los selectores en CSS nos permiten acceder a cualquier elemento o grupo de elementos, para aplicar estilos sobre el/ellos en una única declaración. Como su nombre indica, permiten seleccionar aquellos elementos sobre los que se van a aplicar las reglas de estilo.

Dentro del código CSS podemos usar selectores y aplicarles un conjunto de estilos determinado. Para ello escribimos el selector y colocamos los atributos de estilos encerrados entre llaves:

selector {
  color: red;
  width: auto;
}

Existen selectores de lo más variado, que permiten ajustar de una manera.muy precisa qué elementos se desea seleccionar. Los más importantes son los siguientes:

  • Etiqueta: sirven para seleccionar todos los elementos de una misma etiqueta o tag HTML.
h1 {
  font-size: 26px;
}
  • Clase: selecciona todos los elementos de una clase determinada. (Class de CSS).
.destacado {
  font-weight: bold;
  color: orange;	
}
  • Identificador: permiten seleccionar etiquetas individuales por el atributo Id de la etiqueta.
#fomularioAlta {
 border: 1px solid #99c; 
}
  • Atributo: permiten seleccionar todas las etiquetas que tengan un atributo dado, o bien un atributo con un valor determinado.
[title] {
  text-decoration: none;
}

[align="center"] {
  border: 1px solid red;
}

Además, los selectores se pueden combinar entre sí para conseguir selectores mucho más precisos:

Estos selectores obtienen las imágenes que tengan el atributo alt y los párrafos que tengan la clase "desactivado".

img[alt] {
	border: none;
}

p.desactivado {
	color: #ddd;
}

También podemos relacionar los selectores con un espacio y entonces el significado cambia totalmente, ya que se estaría indicando que un elemento tiene que estar dentro de otro.

Este selector aplicaría estilos a todos los elementos <h2> que estén dentro de contenedores que tienen la clase "nota".

.nota h2 {
  font-weight: normal;
}

También podemos combinar los selectores de CSS usando una coma. Entonces estamos indicando que los atributos de estilo deben aplicarse a los dos selectores por separado.

Así estaríamos indicando que queremos aplicar estilos sobre todos los párrafos y todas las divisiones con la clase "bloque".

p, div.bloque {
	margin-bottom: 25px;  
}

Editar

¿Quieres añadir algo sobre CSS?

Crea artículos, recursos o comparte información sobre CSS

Crear un bloque

CSS

Manuales

Tutorial de CSS básico
Tutorial de CSS completo, teórico y práctico. Aprende los fundamentos de las hojas de estilo en cascada (CSS, acrónimo de Cascading Style Sheets).
Manual de CSS 3
Conoce una infinidad de nuevas posibilidades de las hojas de estilo en cascada, que fueron agregadas en CSS 3.
Manual de Maquetación CSS
Manual en el que enseñaremos a maquetar páginas web utilizando únicamente CSS, en lugar de tablas, lo que también se...
Manual de Responsive Web Design
El manual de Responsive Web Design te enseña las técnicas más importantes para realizar diseño web moderno, que requiere ser adaptable a las condiciones del navegador del usuario.
Taller de CSS
Aplicaciones prácticas realizadas con hojas de estilo en cascada. Desde aplicación de estilo enlaces a maquetación realizada únicamente con CSS.
Manual de Flexbox CSS
En este manual de Flexbox vamos a tratar con detalle una de las herramientas clave de CSS para poder realizar...
Manual de Sass
Este manual nos introduce en Sass, ofreciendo una guía completa para aprender a trabajar con este preprocesador de CSS. El...
Manual de CSS Grid Layout
Este manual aborda la especificación de CSS Grid Layout, con numerosos ejemplos para poder maquetar páginas o diagramas con la rejilla estándar que nos proporciona CSS.
Videotutorial de CSS
Videotutorial de CSS, en el que aprenderás los aspectos más importantes de las Hojas de Estilo en Cascada de una...

Más manuales

Tenemos 5 manuales más sobre CSS

Curso gratuito 5 días de HTML5
Grabaciones de las clases del Curso Gratuito de HTML5 impartidas por EscuelaIT en marzo de 2014. En este curso se...
Taller de HTML5
Artículos prácticos sobre la creación de páginas web con el estándar HTML5. Aplicación práctica de las diversas tecnologías relacionadas con...
Botones con estilo
Informe sobre cómo crear botones de envío de formulario variados. Botones básicos, con estilos y con características dinámicas.
Maquetación CSS con 960 Grid System
Explicaciones y ejemplos de uso del Framework CSS 960 Grid System, con el que veremos como maquetar una página con...
Manual de Blueprint CSS
Manual del framework CSS Blueprint, con explicaciones y ejemplos de la rejilla que permite maquetar páginas web de una manera...

Colecciones

Editores de CSS

Programas para la edición de código CSS

4 ítems

Temas relacionados

Preguntas y respuestas

Se han recibido 90 faqs en CSS

Hacer una pregunta