1. La etiqueta <style>
Si un elemento HTML tiene demasiados estilos, puedes moverlos a un elemento especial:
la etiqueta style. Normalmente se encuentra en la etiqueta <head> y se ve
así:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo de CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Este es un ejemplo de cómo usar estilos en la etiqueta <style>.</p>
</body>
</html>
Ahora no necesitas escribir una línea larga de estilos para la etiqueta
<body> dentro de su atributo style, y puedes
moverlos a la etiqueta style. Es muy conveniente.
Lo mismo se aplica a la etiqueta <p> (párrafo). Además,
el estilo escrito en la etiqueta <style> en
<head> se aplicará a todos los párrafos en el
documento, incluso si hay miles de ellos. Todo esto es porque en la etiqueta
<style> los estilos están descritos dentro de
selectores.
5.2 Selectores
Los selectores son formas de elegir los elementos de HTML a los que se aplicarán las propiedades de CSS. Existen diferentes tipos de selectores:
Selector de etiqueta
Aplica un estilo a todos los elementos
de un tipo específico. Simplemente indicas el nombre de la etiqueta y las llaves
después de ella.
tagname {
// estilos
}
tagname puede ser cualquiera: body, image, a, p, … cualquiera
Selector de clase
También puedes vincular propiedades de CSS no a una etiqueta específica, sino darle un nombre
a un grupo de propiedades CSS. Dicho grupo en CSS se llama
clase. Tal estilo se aplica a todos
los elementos con una clase específica. Las clases se asignan usando el atributo
class en HTML.
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">Este es un texto importante.</p>
<p>Este es un texto normal.</p>
</body>
</html>
En el ejemplo anterior, el texto del primer párrafo será negrita porque se le aplicó el estilo/clase «important». El segundo párrafo no tiene ese estilo.
Al describir estilos en la etiqueta <style> puedes hacerlo de 3
maneras:
- tagname { …}
- tagname.classname { …}
- .classname { …}
Hablaremos más en detalle sobre el tema de los selectores cuando estudiemos CSS. Por ahora te lo cuento porque en los ejemplos de HTML aparecerá CSS, y a menudo lo moveré a la etiqueta style y usaré selectores para asignar estilo a un elemento HTML específico.
GO TO FULL VERSION