Tutorial de CSS – Lección 1 – Conectando estilos CSS
No voy a explicar para qué sirve CSS. Si abriste este tutorial es porque deseas aprenderlo. Solo diré que las posibilidades de CSS son muy amplias y permiten maquetar diseños de cualquier complejidad. A su vez, usar CSS implica renunciar al uso de atributos de etiquetas como size, color, bgcolor, align y otros que interfieren con CSS.
Existen al menos tres formas de incluir CSS en tu archivo HTML. Veamos primero la más sencilla, luego la segunda y finalmente la forma correcta.
CSS dentro de la etiqueta
CSS se puede añadir usando el atributo style:
<div style="width: 200px; height: 100px;"> Bloque </div>
Así definimos un bloque de 200×100 píxeles. Veamos la sintaxis: primero va el atributo style="" y dentro de las comillas escribimos las reglas CSS:
style="propiedad:valor;propiedad:valor;propiedad:valor"
Escribe cada declaración separada por punto y coma. Ahora pasemos al segundo método.
CSS al inicio del documento HTML
Para esto usamos la etiqueta <style></style> dentro del <head>:
<html>
<head>
<title>Tutorial de CSS</title>
<style type="text/css">
/* aquí escribimos código CSS */
</style>
</head>
<body>
<p>Aprende CSS con drupalbook.org</p>
</body>
</html>
La etiqueta <style> va en el <head>, justo después de <title>. Probemos con algo de CSS:
<html>
<head>
<title>Tutorial de CSS</title>
<style type="text/css">
body {
background: #eeeeee; /* fondo de la página */
font-size: 14px; /* tamaño de fuente */
}
p {
color: #ff0000; /* color del texto */
}
</style>
</head>
<body>
<p>Aprende CSS con drupalbook.org</p>
<p>Segunda línea: Aprende CSS con drupalbook.org</p>
</body>
</html>
Cuando escribimos CSS, primero indicamos el selector (etiqueta, clase o id), luego entre llaves escribimos las reglas, igual que en el atributo style:
selector {
propiedad:valor;
propiedad:valor;
}
Puedes poner punto y coma al final de cada declaración; tras la última no es obligatorio, pero es buena práctica.
CSS en un archivo aparte
Este es el método óptimo, que separa completamente el CSS del HTML. Aunque a veces quieras incrustar CSS en el HTML, ¡mejor resístete y usa un archivo externo! ¿Por qué?
Primero, CSS permite separar estructura y presentación: HTML define el contenido y CSS el estilo (tamaño, colores, bordes, márgenes, etc.).
Segundo, cuando HTML y CSS están juntos, el código se vuelve difícil de leer y mantener.
Tercero, los archivos CSS se guardan en caché en el navegador, así que al separar el CSS externo, la página cargará más rápido, ya que el CSS se descarga solo una vez.
¡Procura siempre usar un archivo CSS externo! Para ello usamos la etiqueta <link>:
<html> <head> <title>Tutorial de CSS</title> <link type="text/css" rel="stylesheet" media="all" href="styles.css" /> </head> <body> <p>Aprende CSS con drupalbook.org</p> <p>Segunda línea: Aprende CSS con drupalbook.org</p> </body> </html>
Los atributos de <link> son:
type="text/css"– indica que es CSSrel="stylesheet"– especifica que es hoja de estilomedia="all"– se aplica en todos los dispositivoshref="styles.css"– ruta al archivo CSS (relativa)
Ahora crea el archivo styles.css en la misma carpeta que tu HTML y pega en él tus reglas CSS:
body {
background: #eeeeee; /* fondo de la página */
font-size: 14px; /* tamaño de fuente */
}
p {
color: #ff0000; /* color del texto */
}
Guarda el archivo y abre tu HTML en el navegador. Ahora el CSS está correctamente enlazado desde un archivo externo. En la siguiente lección comenzaremos a profundizar en cómo escribir estilos en un archivo aparte.