¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets),
es un mecanismo simple que describe cómo se va a mostrar un documento
en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser
pronunciada la información presente en ese documento a través de un
dispositivo de lectura. Esta forma de descripción de estilos ofrece a
los desarrolladores el control total sobre estilo y formato de sus
documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos
HTML y
XML, separando el contenido de la presentación. Los
Estilos
definen la forma de mostrar los elementos HTML y XML. CSS permite a los
desarrolladores Web controlar el estilo y el formato de múltiples
páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para
un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS
en las que aparezca ese elemento.
¿Cómo funciona?
CSS funciona a base de reglas, es decir, declaraciones sobre el
estilo de uno o más elementos. Las hojas de estilo están compuestas por
una o más de esas reglas aplicadas a un documento HTML o XML. La regla
tiene dos partes: un selector y la declaración. A su vez la declaración
está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector funciona como enlace entre el documento y el estilo,
especificando los elementos que se van a ver afectados por esa
declaración. La declaración es la parte de la regla que establece cuál
será el efecto. En el ejemplo anterior, el selector
h1 indica que todos los elementos
h1 se verán afectados por la declaración donde se establece que la propiedad
color va a tener el valor
red (rojo) para todos los elementos
h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Las tres formas más conocidas de dar estilo a un documento son las siguientes:
- Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento
<link>, el cual debe ir situado en la sección <head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
.
.
</body>
</html>
- Utilizando el elemento
<style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>hoja de estilo interna</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Aquí se aplicará el estilo de letra para el Título</h1>
</body>
</html>
| CSS | Investigar qué es, para qué sirve, en dónde se emplea y qué beneficios tiene el uso de los CSS en la programación del HTML. |
