Introducción a CSS
(Hojas de estilo en
cascada)
¿Qué es CSS?
• CSS (cascading style sheets) es un lenguaje de estilo
que define la presentación de los documentos HTML.
Por ejemplo, CSS abarca cuestiones relativas a fuentes,
colores, márgenes, líneas, altura, anchura, imágenes de
fondo, posicionamiento avanzado y muchos otros
temas.
• • Es posible usar HTML, o incluso abusar del mismo, para
añadir formato a los sitios web. Sin embargo, CSS ofrece
más opciones y es más preciso y sofisticado. CSS está
soportado por todos los navegadores hoy día.
• • El estándar CSS 2.1 define 115 propiedades, cada una
con su propia lista de valores permitidos. Por su parte, los
últimos borradores del estándar CSS 3 ya incluyen 239
propiedades
¿Qué diferencia hay entre CSS
y HTML?
• HTML se usa para estructurar el contenido; CSS se usa para
formatear el contenido previamente estructurado.
¿Qué beneficios me ofrece
CSS?
• Control de la presentación de muchos documentos desde una
única hoja de estilo;
• Control más preciso de la presentación;
• Aplicación de diferentes presentaciones a diferentes tipos de
medios (pantalla, impresión, etc.);
• Numerosas técnicas avanzadas y sofisticadas.
¿Cómo funciona CSS?
• Muchas de las propiedades que se usan en las hojas de estilo en
cascada (CSS) son parecidas a las de HTML. Así pues, si estás
acostumbrado a usar HTML para cuestiones de presentación, lo más
probable es que reconozcas gran parte del código usado.
Examinemos un ejemplo concreto.
• La sintaxis básica de CSS
Digamos que queremos un color rojo como fondo de nuestra página
web:
Usando HTML podríamos haberlo conseguido así:
<body bgcolor="#FF0000">
• Con CSS el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
• El código usado es más o menos idéntico para HTML y CSS.
• El ejemplo anterior te muestra además el modelo CSS fundamental
Aplicando CSS a un
documento HTML
Método 1: En línea (el atributo style)
Un modo de aplicar CSS a HTML es usando el atributo de HTML
style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo,
CSS se puede aplicar así:
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>
Método 2: Interno (la etiqueta style)
Otra forma es incluir el código CSS usando la etiqueta HTML
<style>. Por ejemplo, así:
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
Método 3: Externo (enlace a una hoja de estilo)
El método recomendado es enlazar con lo que se
Una hoja de estilo externa es sencillamente un fichero de texto
con la extensión .css. Como cualquier otro fichero, puedes
colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y
está localizada en una carpeta que se llama style.
El truco consiste en crear un vínculo desde el documento HTML
(por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho
vínculo se puede crear con una sencilla línea de código HTML:
<link rel="stylesheet" type="text/css"
href="style/style.css" />
Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por
medio del atributo href.
La línea de código debe insertarse en la sección de encabezado
del código HTML, es decir, entre la etiqueta <head> y </head>.
De esta manera:
<html>
<head>
<title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body> ...
Ejemplo
• Abre el Bloc de notas (o el editor de texto que utilices) y crea dos ficheros -
un fichero HTML y un fichero CSS - con el siguiente contenido:
Fichero default.htm
<html>
<head><title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mi primera hoja de estilo</h1>
</body>
</html>
………………………………………………………………………..
Fichero style.css
body { background-color: #FF0000; }
• Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los
ficheros con las extensiones correctas (".htm" y ".css", respectivamente).
• Abre el fichero default.htm con el navegador y observa que la página tiene
un color de fondo rojo.
Ejercicio.
• Crear una estructura HTML 5 y agrega una hoja de
estilo externa que aparece a continuacion. Cada
regla CSS incluye un comentario en el que se
explica los elementos a los que debe aplicarse:
header{
color: red;
font-size: %;}
footer{
color: blue;
font-size: %;}
section {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;}
notice{
color: #510A74;
font-weight: normal;
font-family: "Times New Roman", Times, serif;
}
nav {
color: # C160F1;
font-weigt: normal;
font-family: "Courier New", Courier, monospace;;
}
