CSS
Introducción a CSS
¿Qué es CSS?
El CSS, Cascading Style Sheets, u Hojas de Estilo en Cascada, es un lenguaje utilizado para describir la presentación de un documento escrito en HTML o XML. Básicamente, CSS se encarga de la apariencia visual de las páginas web. Permite controlar aspectos como el diseño, los colores, las fuentes, los márgenes, el espaciado, la disposición de los elementos y más, separando el contenido de la estructura visual.
CSS es una de las grandes movidas de la W3C (The World Wide Web Consortium), separar la presentación de la estructura. En sus inicios, HTML llevaba toda la carga del "cómo se ve" un sitio, los colores, los tamaños se ponían como atributos en la etiqueta. No existía una manera de definir un estilo de manera general para el documento o peor, para un sitio.
El tema de la presentación incluida en la estructura, llevó al diseño de los sitios a utilizar elementos estructurales como tablas para poder controlar el espacio y la diagramación, desmereciendo los datos tabulados y amarrando los sitios a estructura rígidas de filas y columnas, en muchos casos, anidadas una dentro de otra tabla, tan mala práctica que llegó a tener verbo propio: "saber tablear".
Por otro lado, aunque en sus inicios no era un problema, se veía venir la multi plataforma o multiple dispositivos con diferentes tamaños y se necesitaba una manera de poder modificar y controlar la presentación para esos diferentes tamaños de pantalla que se especulaba que venían.
Por último, y como gran ventaja de este proceso de separación de la estructura y la presentación, es que ahora se podia generar equipos especializados y trabajar a 2 manos en un sito, allanando el camino para la mal llamada web 3 o páginas dinámicas.
Así es como con el HTML 4 se incorpora las hojas de estilo o Style Sheets en inglés, y se le quita la responsabilidad de la presentación a la estructura. Una forma general de aplicar estilos a diferentes elementos del documento pero como titiritero a distancia.
¿Cómo funciona CSS con HTML?
Hay 3 maneras de aplicar estilos en un documento. La más básica y fundamental es en la misma etiqueta, o sea "in-line", afectando directamente al elemento en sus estilos.
Para esto se ocupa el atributo styles y se pasan los parámetros a afectar y su valor, separados con punto y coma.
<p style="color: blue; font-size: 20px; text-align: center;">Este es un párrafo con estilo en línea.</p>En este ejemplo se aplica al párrafo el color azul, con la letra de 20 píxeles y alineado al centro.
Nota:
Pero esto, por otro lado, si bien, válido, contradice el espíritu de CSS, por lo que no se recomienda su uso.
La segunda manera es en la cabecera del documento, afectando a toda la página, lo cual permite aplicar a multiples elementos y centralizar los cambios en un solo punto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Sencilla</title>
<!-- Estilos CSS internos -->
<style>
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Estilo para el encabezado */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}
/* Estilo para la navegación */
nav ul {
list-style: none;
padding: 0;
text-align: center;
background-color: #333;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Estilo para las secciones */
section {
padding: 20px;
margin: 10px;
background-color: white;
border-radius: 5px;
}
/* Estilo para el pie de página */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Bienvenido a mi página sencilla</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<section id="inicio">
<h2>Sobre nosotros</h2>
<p>Somos una pequeña empresa dedicada al diseño web.</p>
</section>
<section id="servicios">
<h2>Nuestros servicios</h2>
<p>Ofrecemos una variedad de servicios de desarrollo web y diseño gráfico.</p>
</section>
<footer>
<p>Contacto: ejemplo@correo.com</p>
</footer>
</body>
</html>En este ejemplo, se define en la cabecera del documento los estilos para toda la pagina a partir de sus etiquetas footer, section nav, header.
La tercera manera es que el documento HTML vincule a una hoja externa de CSS, y comparta esta hoja para todas las paginas de un sitio, lo que permite cambios y controles generales más rápidos de nuestros sitios.
Por un lado, creamos un archivo con las ordenes CSS con la extención .css. Por ejemplo style.css
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Estilo para el encabezado */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px 0;
}
/* Estilo para la navegación */
nav ul {
list-style: none;
padding: 0;
text-align: center;
background-color: #333;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Estilo para las secciones */
section {
padding: 20px;
margin: 10px;
background-color: white;
border-radius: 5px;
}
/* Estilo para el pie de página */
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}Y en el documento HTML vinculamos la hoja de estilo en la cabecera del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Sencilla</title>
<!-- Vinculamos el archivo CSS externo -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenido a mi página sencilla</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<section id="inicio">
<h2>Sobre nosotros</h2>
<p>Somos una pequeña empresa dedicada al diseño web.</p>
</section>
<section id="servicios">
<h2>Nuestros servicios</h2>
<p>Ofrecemos una variedad de servicios de desarrollo web y diseño gráfico.</p>
</section>
<footer>
<p>Contacto: ejemplo@correo.com</p>
</footer>
</body>
</html>En este ejemplo se utiliza la etiqueta <link> para vincular un documento externo "styles.css" que tiene las instrucciones de como debe afectar las etiquetas HTML. Si se vincula en todas las páginas, todas tienen el mismo estilo para los mismo elementos.
Y estas 3 posibilidades son las que definen la parte en "cascada" de Cascading Style Sheets. Se va aplicando el estilo de lo general, hoja externa, local, en la cabecera de una página y en el objeto. Y a medida que está más cerca del objeto, tiene mayor importancia y hace la modificación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo con CSS Externo e Inline</title>
<!-- Vinculamos el archivo CSS externo -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenido a la página con CSS Externo e Inline</h1>
</header>
<section id="contenido">
<h2>Estilos en acción</h2>
<!-- Párrafo con estilo en línea -->
<p style="color: red; font-size: 18px; text-align: right;">
Este es un párrafo con estilo en línea (inline), que cambia el color a rojo, el tamaño de fuente a 18px y alinea el texto a la derecha.
</p>
<p>
Este párrafo no tiene estilos en línea, pero sigue el diseño general aplicado desde el archivo CSS externo.
</p>
</section>
</body>
</html>/* Estilo para la cabecera */
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
/* Estilo para las secciones */
section {
padding: 20px;
margin: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
/* Estilo para los párrafos generales */
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}En este ejemplo, se define en "styles.css" el comportamiento del los párrafos, pero en el mismo documento, en un párrafo, se define que va a ser rojo, de 18px y alineado a la derecha.
Hojas de estilos en cascada es la manera mas cómoda de definir los parámetros generales de la presentación del sitio y se puede ir modificando a medida que un objeto tenga diferencias.