¿Qué es CSS y para qué sirve?
Qué es CSS, en qué se difiere de HTML y de qué elementos consiste, te lo contamos en este artículo.
¿Qué es CSS y para qué sirve?
CSS (Cascading Style Sheets) es un estándar que define cómo se presentan los datos en el navegador. Mientras que el HTML proporciona información sobre la estructura de un documento, el CSS indica el aspecto que debe tener: la fuente, el fondo, el texto, los colores de los links, los márgenes y la disposición de los objetos en la página.
El objetivo principal del desarrollo de CSS es separar el contenido, ya sea escrito en HTML u otro lenguaje de marcado, del diseño de un documento. Esta separación puede aumentar la accesibilidad de los documentos, proporcionar mayor flexibilidad y control sobre su presentación, así como reducir la complejidad y la repetición de los contenidos estructurados. Además, CSS permite presentar el mismo documento en diferentes estilos o métodos de salida, como puede ser en una pantalla, una impresión, la lectura por voz, o cuando se emite mediante dispositivos que usan Braille.
Fuente: Unsplash
Ventajas de CSS
- CSS ahorra tiempo: Tras crear un estilo CSS para un elemento HTML, podrás utilizarlo con muchas páginas web.
- Las páginas se cargan más rápido: No necesitas repetir los atributos de estilo HTML todo el tiempo. Basta con crear una regla de estilo CSS para una etiqueta, y está se utilizará en todo el documento HTML. Menos código significa una carga más rápida de la página.
- Cambiar el diseño de las páginas web es más fácil: Para hacer cambios globales, solo cambia el estilo, y se actualizarán automáticamente los elementos en todas las páginas web.
- Hay más margen para la creatividad y la participación del usuario: CSS tiene mucho más atributos de estilo que HTML, por lo que puedes usarlo para crear un diseño más llamativo que el HTML y atraer a un público más amplio.
- Es compatible con diferentes dispositivos: Las hojas de estilo te permiten optimizar la apariencia del contenido de la página para cualquier tipo de dispositivo. Utilizando el mismo documento HTML puedes ofrecer diferentes versiones del diseño del sitio web para varios dispositivos como PDA (asistente digital personal), smartphones, tabletas, etc.
- Las páginas pueden verse sin conexión: Las aplicaciones web pueden almacenar CSS mediante un caché offline, lo que te permite ver los sitios sin conexión. El caché también proporciona tiempos de carga más rápidos y un mejor rendimiento del sitio web.
- CSS es usado por los estándares web reconocidos: Hoy en día los atributos de estilo de HTML se consideran obsoletos, y se recomienda utilizar CSS. Es necesario empezar a usar CSS en todas las páginas web, para que sean compatibles con las futuras versiones de los navegadores.
Fuente: Unsplash
Tipos de estilos CSS
Estilos inline
Los estilos internos te ofrecen el máximo control sobre todos los elementos de una página web. Este se aplica a cualquier etiqueta HTML con el atributo style de la siguiente manera:
<p style="font: 12pt Courier">Este es un texto con un tamaño de 12 puntos y un estilo de fuente Courier</p>
Los estilos internos son útiles cuando necesitas ajustar la visualización de algún elemento de una página o un sitio web pequeño.
Estilos internos
Los estilos inline van con la etiqueta <style>, la cual suele colocarse en el encabezado del documento HTML
(<head>...</head>): <html> <head> ... <style> reglas CSS </style> ... </head> <body> ...
Estilos externos
Las hojas de estilo externo (external) son la solución más conveniente cuando buscas diseñar bajo un estilo todo un sitio web. La descripción de las reglas se encuentra en un archivo separado. Usa la etiqueta <link> para vincular esta hoja de estilo a cada página en la que deba aplicarse, por ejemplo:
<link rel=stylesheet href="sample.css" type="text/css">
Cualquier página que contenga un vínculo de este tipo será estilizada para que coincida con los estilos del archivo sample.css. Ten en cuenta que la hoja de estilo puede quedarse físicamente en otro servidor web, y debes proporcionar una ruta a la misma en el href.
¿Cómo usar CSS?
CSS tiene una sintaxis relativamente sencilla. Primero especifica un selector, este selecciona un elemento concreto de la página (una etiqueta HTML, clase o identidad). Después de poner corchetes, especifica la declaración: las propiedades con sus valores, separadas por dos puntos. Las declaraciones en sí están separadas por un punto y coma.
Fuente: Unsplash
Ejemplo de una regla CSS:
selector {propiedad: valor;}
Selector CSS
Un selector en CSS es una estructura que permite seleccionar elementos individuales o similares en una página para atribuirles un estilo. Cada bloque de declaración en CSS empieza con un selector como el siguiente:
my-class {
background-color: #999;
}
En el ejemplo se pone my-class en calidad de selector. Todos los elementos con esta clase tendrán el mismo color de fondo, gris #999.
Los estilos se organizan en un solo esquema mediante una cascada. Ve este ejemplo simple, que también te ayudará a entender qué es el código CSS y cómo se ve:
p {
color: green;
font-size: 20px;
}
p {
color: red;
}
Siguiendo el modelo, al elemento p se le asigna el color rojo. Debido a que el color verde está declarado antes que el rojo, este no se tomará en cuenta. Para evitar conflictos, siempre se usarán los valores de los parámetros que se declaren últimos. El tamaño de la fuente de 20 píxeles no cambia. Si se simplifica lo anterior, resulta:
p {
color: red;
font-size: 20px;
}
Además, se puede hacer que un solo elemento dependa de varios selectores de diferentes tipos. Por ejemplo:
p {
color: red;
}
p.important {
font-size: 20px;
}
#intro {
font-style: italic;
}
Para usar todos los parámetros, en HTML debes declarar:
<p class="important" id="intro"> CSS simplifica el formato de los documentos. </p>
Aquí se asignaron al elemento las siguientes propiedades: color rojo, tamaño de 20 píxeles y cursiva. En este caso, los diferentes selectores tienen diferentes prioridades. Su orden de relevancia es:
- Selector de tipo de elemento (p).
- Selector de clase (.important).
- Selector ID (#intro).
1 es de baja prioridad, mientras que 3 es alta.
Prioridades en CSS
La jerarquía de prioridades funciona de la siguiente manera:
- Se da la máxima prioridad a las propiedades con !important al final de su declaración.
- Luego vienen los estilos inline, que se definen en el atributo style de la etiqueta.
- Aún más baja es la prioridad de los estilos especificados en la etiqueta style en el propio documento.
- Luego se encuentran los estilos adjuntos al documento como un archivo CSS externo mediante la etiqueta <link>.
CSS es una herramienta útil, práctica y eficaz para el diseño de páginas web y el formato de textos, enlaces, imágenes y otros elementos. Además, está en constante evolución: ahora se está desarrollando activamente la tercera generación de este estándar. En él se divide la especificación en módulos, y el desarrollo de cada módulo es independiente. Los desarrolladores de los navegadores modernos están ampliando gradualmente el soporte con CSS3. Hace unos años, la cuarta generación del estándar CSS empezó a tomar forma, pero las especificaciones aún están en el borrador.
Desarrollo Front End de cero a pro
Aprende a desarrollar proyectos en HTML, diseñar con CSS, interactuar con JavaScript y agregar dinamismo con jQuery y React. Conviértete en desarrollador front end y experto en diseñar sitios que cautiven al usuario. Al finalizar el curso estarás preparado para comenzar tu carrera en IT.
