CAPÍTULO XVII. EL ESTILO CSS.
CSS significa "Cascading Style Sheets" (hojas de estilo en cascada). Describe cómo se van a mostrar los elementos HTML en pantalla. Se puede implementar de tres maneras:
Inline; mediante el atributo de estilo en los elementos HTML (style).
Interna; mediante el uso de un elemento <style> en la sección <head>.
Externa; mediante el uso de un archivo CSS externo (más común).
CSS INTERNA
Se utiliza para definir el estilo de una sola página HTML.
Ejemplo:
CSS EXTERNA
Se utiliza para definir el estilo de muchas páginas HTML. Con una hoja de estilos externa se puede cambiar el aspecto del sitio web completo, cambiando un archivo.
Para utilizar una hoja de stilos externa, se debe añadir un enlace a ella en la sección <head> de la página HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Esto es un encabezado</h1>
<p>Esto es un párrafo</p>
</body>
</html>
Una hoja de estilos externa puede estar escrita en cualquier editor de texto. El archivo no debe contener ningún código HTML y debe ser guardado con una extensión .css.
Ejemplo:
body {
background-color:powderblue;
}
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
El atributo id
Permite aplicar un estilo diferente a un elemento en especial.
Ejemplo:
<p id="p01">Soy diferente</p>
#p01 {
color: blue;
}
El atributo class
Este atributo especifica un nombre (o varios) de clase para un determinado elemento HTML. El nombre de la clase puede ser utilizado por CSS para aplicar estilos a los elementos.
Ejemplo:
Otros casos:
NOTA: PARA PROFUNDIZAR EN LA SINTAXIS DE LAS DIFERENTES PROPIEDADES EN CSS, DESCÁRGATE LA GUÍA DE REFERENCIA RÁPIDA CSS.