Aplicar estilos a los elementos CSS
Existen dos formas de aplicar estilo a un elemento, vamos a repasarlas con ejemplos.
Método directo: Básico, colocas el estilo directamente en la etiqueta del elemento mediante el parámetro style. Por ejemplo:
<span style="color: white">Texto de ejemplo</span> |
En caso de querer agregar más de un atributo se separa por un caracter punto y coma:
<span style="color white; font-weight: bold">Texto de ejemplo</span> |
Este método es bueno solo cuando quieres aplicar estilo a uno o varios (no muchos) elemento en concreto.
Método indirecto: En el head del documento defines el estilo de cada elemento mediante la etiqueta ‘style’. Se identifica el elemento por clases, por el identificador del mismo, por el nombre de la etiqueta o por alguno de los anteriores (elemento padre) seguido por un símbolo mayor que (>) y el nombre del elemento hijo al que le deseamos aplicar estilo CSS.
Ejemplo 1:
<head>
<style>
#logo{
font-family: Arial;
}
</style>
</head>
<body>
<header>
<h1 id="logo">Logo</h1>
</header>
<body>
</pre >
Ejemplo 2:
<pre lang="HTML">
<head>
<style>
h1{
font-family: Arial;
}
</style>
</head>
<body>
<header>
<h1>Titulo de la web</h1>
</header>
</body> |
Ejemplo 3:
<head>
<style>
.header > h1{
font-family: Arial;
}
</style>
<head>
<body>
<header class="header">
<h1>Titulo de la web</h1>
</header>
</body> |
Dentro del método indirecto existen dos formas de aplicar estilos la primera fue la que antes hemos visto y la segunda consiste en crear una hoja de estilos con cualquier nombre y colocarle de extensión .css, luego incluirlo en el head de nuestro documento mediante esta forma.
Dentro de la hoja de estilos colocamos lo mismo que lo anteriormente pusimos dentro de las etiquetas
<style></style> |
.
Por ejemplo.
<head>
<link rel="stylesheet" href="estilo.css" />
</head>
<header>
<h1>Logo</h1>
</header> |
Y en la misma carpeta que se encuentra el documento creo la hoja de estilos ‘estilo.css’ y colocamos el siguiente código en el contenido de la misma.
header > h1{
font-family: Arial;
} |