¿Qué es CSS?
CSS significa hojas de estilo en cascada _
CSS describe cómo se deben mostrar los elementos HTML
Ejemplo de CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Haga clic en el botón "Pruébelo usted mismo" para ver cómo funciona.
Sintaxis CSS
Una regla CSS consta de un selector y un bloque de declaración :
El selector apunta al elemento HTML a diseñar (h1).
El bloque de declaración (entre llaves) contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
En el siguiente ejemplo, todos los elementos <p> estarán alineados al centro, en rojo y tendrán un tamaño de fuente de 32 píxeles:
Ejemplo
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
El mismo ejemplo también se puede escribir así:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Hoja de estilo externa
Una hoja de estilo CSS se puede almacenar en un archivo externo :
miestilo.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Las hojas de estilo externas están vinculadas a páginas HTML con etiquetas <link> :
Ejemplo
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Estilo en línea
Ejemplo
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Orden en cascada
Si se especifican diferentes estilos para los elementos HTML, los estilos se convertirán en nuevos estilos con la siguiente prioridad:
- Prioridad 1: estilos en línea
- Prioridad 2: hojas de estilo externas e internas
- Prioridad 3: predeterminado del navegador
- Si se definen diferentes estilos en el mismo nivel de prioridad, el último tiene la prioridad más alta.
Ejemplo
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
Demostración de CSS - Una página HTML - ¡Estilos múltiples!
Aquí mostraremos una página HTML con 4 hojas de estilo diferentes.
Haga clic en los botones de la hoja de estilo (1-4) para ver la página que se muestra con diferentes estilos.
Tutorial completo de CSS
Esta ha sido una breve descripción de CSS.
Para obtener un tutorial completo de CSS, vaya a W3Schools CSS Tutorial .
Para obtener una referencia completa de CSS, vaya a W3Schools CSS Reference .