Las hojas de estilo son útiles para definir atributos visuales en documentos HTML (lenguaje de marcas hipertextual). Esto proporciona al autor métodos poderosos para definir el estilo visual del documento mientras separa la parte semántica (HTML) de la de presentación (hojas de estilo). En este tutorial aprenderás a implementar atributos de estilo en documentos HTML.
Las propiedades y sus valores son definidos utilizando una sintaxis simple de CSS (hojas de estilo en cascada). Estas definiciones no pertenecen al estándar HTML, pero están pensados para reemplazar los atributos de presentación que HTML ha adquirido en sus primeros tiempos.
nombre-propiedad: valor-propiedad;
De esta forma, puedes definir múltiples valores para múltiples propiedades en un mismo bloque dado que una definición básica es separada de la siguiente por el punto y coma. Un grupo de propiedades y valores puede ser aplicado a un elemento, el cual establecerá el estilo visual de dicho elemento en todo el documento. En este ejemplo un conjunto de propiedades visuales son definidas para el tag HTML p. Para lograr esto, el nombre de este elemento aparece ante las declaraciones de propiedades que se encuentran encerradas entre corchetes ("{" y "}").
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
Declarar este código en tu documento HTML hará que todos los párrafos tomen estas propiedades. En algunos casos necesitas establecer propiedades solo para algunos párrafos en lugar de para todos. Si ese es el caso puedes usar el atributo "style" o clases.
Para encontrar más propiedades, por favor refiérete a este índice de propiedades para CSS 2.
Puedes definir propiedades de estilo de tres formas: dentro del tag de apertura de un elemento específico (usando el atributo "style"), dentro de un bloque en el encabezado del documento (usando el tag HTML style) o en archivos externos (usando eltag HTML link).
El atributo "style" provee una forma de declarar propiedades de estilo en una línea como valor de un atributo. Es útil cuando el autor necesita declarar un grupo único de atributos para un elemento específico. La sintaxis para las propiedades CSS es la misma y deben ser declaradas de esta forma:
Código
<p style="padding: 10px; border-style: solid; border-color: blue; border-width: 2px; background-color: #9EC7EB; color: white; font-family: arial,helvetica; font-size: 11px; font-weight: bold;">Contenido del párrafo</p>
Visualización
Contenido del párrafo
Como puedes ver, el estilo declarado en este ejemplo es el mismo declarado en el ejemplo anterior, la diferencia es que este último afecta solo al objeto contenedor y el primero afecta implícitamente a todos los párrafos.
El tag HTML style define un bloque donde las declaraciones de hojas de estilo pueden ser contenidas. El bloque "style" debe ubicarse en algún lugar del encabezado del documento (tag HTML head) y definirá estilos y clases para el documento actual.
<style type="text/css">
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
a {
font-size: 12px;
font-weight: bold;
}
</style>
Nota que estas dos definiciones afectarán a todos los elementos "a" y "p" presentes en el documento actual.
Los archivos externos también pueden ser utilizados para definir propiedades de estilo para uno o más documentos. El archivo, usualmente lleva una extensión "css" (por ejemplo, basico.css) y un conjunto de propiedades que puede ser definido en la misma forma que el contenido del tag HTML style. Esta práctica separa completamente la semántica de la presentación en un documento, mientras ayuda a los autores a compartir definiciones de estilo entre todas las páginas de un sitio.
Para referirse a este archivo CSS desde un documento HTML, puedes usar el tag HTML link. Esto especifica al agente procesador dónde pueden encontrarse las declaraciones de estilo para este documento.
<link type="text/css" href="basico.css" />
Como puedes ver, puedes utilizar este método para referirte a un solo archivo CSS desde múltiples documentos HTML. Esto te ayudará a definir atributos comunes en todo el sitio, mientras facilitará el trabajo de cambiar y actualizar las definiciones de estilo.
Una clase en CSS es una forma de agrupar propiedades que pueden posteriormente ser aplicadas a un elemento específico usando su atributo "class". Estos grupos reciben nombres y pueden ser definidos para elementos específicos o para todos ellos. Para definir una clase los autores deben escribir el elemento para el cual es declarada, seguido de un punto y del nombre de la clase. El bloque de propiedades es encerrado por corchetes como en los ejemplos anteriores.
En el siguiente ejemplo definiremos tres clases: la primera llamada "importante" para el elemento "p", la segunda llamada "chica" para todos los elementos y la tercera llamada "grande" para todos los elementos también.
p.importante {
color: red;
}
*.chica {
font-size: 8px;
}
.grande {
font-size: 12px;
}
Nota que el uso del asterisco como elemento indica que esta clase puede ser aplicada a cualquier tipo de elemento (es igual a no usar nada). También toma en cuenta que la primera declaración no especifica que la clase debe ser automáticamente aplicada a todo elemento "p" en el documento a menos que tengan el nombre de la clase como valor del atributo "class".
Usemos el ejemplo anterior para mostrar como aplicar las propiedades agrupadas en clases a los elementos en un documento HTML. En el ejemplo siguiente, aplicaremos las tres clases a tres párrafos respectivamente.
<p class="importante">Importante</p>
<p class="chica">Chica</p>
<p class="grande">Grande</p>
Recuerda que la clase "importante" ha sido solo definida para el elemento "p" de modo que ha funcionado correctamente en el ejemplo anterior, pero no funcionaría si la aplicáramos a otro tipo de elemento.
<a class="important" href="eg.html">Vínculo importante</a>
En este caso, el agente procesador intentará encontrar una clase con el nombre "importante" que haya sido definida para el elemento "a" (a.importante {...) o para todos los elementos (.importante {...), y como no existe una clase con dichas características, ninguna propiedad será aplicada al elemento.
El atributo "class" también soporta una lista de clases separada por espacios como valor, lo que puede ser útil para aplicar múltiples propiedades de diferentes clases a un solo elemento y de una sola vez.
<p class="importante grande">Importante y grande</p>
Este párrafo no solo tendrá un color rojo (de la clase "importante") sino que además tendrá un tamaño de fuente de "12px" (de la clase "grande").
Los selectores ID trabajan en una forma muy similar a las clases con algunas excepciones. En primer lugar, en la definición de un selector ID el nombre del elemento es seguido por un símbolo "#" y un identificador (valor "id").
p#ayuda {
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
*#amarco {
border-style: solid;
border-color: blue;
border-width: 2px;
}
#acolor {
background-color: #9EC7EB;
color: white;
}
Con la excepción del símbolo "#" y el nombre (que debe ser un identificador), el resto funciona exactamente como las clases.
La forma de aplicar este tipo de propiedades CSS a elementos HTML es mediante el atributo "id". Como ya debes saber el atributo "id" está diseñado para actuar como identificador para elemento (por lo que debe ser único), lo que significa que las propiedades definidas usando este método serán únicamente aplicables a un solo elemento por documento.
En este caso podríamos decir que las propiedades son agrupadas y se refieren a un elemento específico en lugar de las clases que son diseñadas para que los elementos se refieran a ellas. En este ejemplo, un párrafo tiene un valor "id" que concuerda con una de las declaraciones previas.
<p id="amarco">Párrafo</p>
Herencia y cascada son las dos características que dan forma al lenguaje CSS y lo hacen poderoso. Estos dos conceptos darán a los autores completo control sobre la aplicación de propiedades a los elementos del documento.
La jerarquía de la estructura CSS es una de sus más importantes características, de donde obtiene su denominación "Cascada". La idea de cascada viene del efecto causado por el orden en que las propiedades son aplicadas a un solo elemento desde diferentes definiciones de estilo. Esto ayuda a los autores a mezclar propiedades de diferentes clases y declaraciones de estilo y aplicarlas a elementos en diferentes etapas.
Para ilustrar esto, miremos este documento ejemplo:
<html>
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="importante" style="font-weight: normal;">Algún texto</p>
</body>
</html>
Puedes analizar la aplicación de propiedades en dos formas: desde la más específica hacia la más global o viceversa. La declaración de estilo más específica en este ejemplo es aquella hecha con el atributo "style" y la menos específica es aquella hecha para el elemento "p" en el bloque "style". Sin importar la forma en que quieras verlo, la declaración con mayor nivel de especificidad suprime al resto.
En el ejemplo anterior, el párrafo recibirá un estilo de fuente "arial,helvetica" y un valor de color "black" de las propiedades definidas para el elemento "p", pero no tendrá un tamaño de fuente de "10px" ya que este será suprimido por la propiedad definida en la clase "importante" que es aplicada al elemento. Asimismo, el elemento recibirá de la clase "importante" un tamaño de fuente de "12px" pero el estilo de fuente "bold" será suprimido por la propiedad definida en el atributo "style".
La siguiente lista muestra el orden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el más específico al más global.
Atributo "style" (ej., <p style="...">).
Selector ID (ej., p#help {...}).
Definición específica de clase (ej., p.second {...}).
Definición global de clase (ej., *.second {...}).
Definición de elemento (ej., p {...}).
Definición global (ej., * {...}).
El mismo análisis puede ser utilizado para propiedades heredadas de otros elementos. En el próximo ejemplo, Las propiedades definidas para el párrafo suprimirán a aquellas definidas para el cuerpo (tag HTML body). Las propiedades del cuerpo que no son suprimidas, son heredadas por el párrafo (debido a que está contenido por el cuerpo).
<html>
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body class="importante">
<p>Algún texto</p>
</body>
</html>
Este documento se verá exactamente igual al anterior, con la excepción del tamaño de la fuente que no será heredada por el párrafo desde el cuerpo debido a que la declaración de estilo para el elemento "p" lo suprimirá, y el tipo de fuente "bold" que sí será heredado de las propiedades del cuerpo.