FORMAS DE APLICAR UN ESTILO CSS EN UNA PAGINA HTML
Estilo aplicado a una etiqueta en concreto: Si queremos modificar
solo el estilo de unas determinadas etiquetas de nuestra página
HTML debemos incluir el atributo style en ellas tomando como valor
las propiedades CSS deseadas seguidas de ":" y su valor,
reparándolas unas de otras con ";" .De esta forma podemos aplicar
diferentes estilos a varias etiquetas. En el siguiente ejemplo se
ve como se aplica a un párrafo el color verde para el texto y
tamaño 20, mientras que a otro se le asigna el rojo y tamaño 15:
solo el estilo de unas determinadas etiquetas de nuestra página
HTML debemos incluir el atributo style en ellas tomando como valor
las propiedades CSS deseadas seguidas de ":" y su valor,
reparándolas unas de otras con ";" .De esta forma podemos aplicar
diferentes estilos a varias etiquetas. En el siguiente ejemplo se
ve como se aplica a un párrafo el color verde para el texto y
tamaño 20, mientras que a otro se le asigna el rojo y tamaño 15:
Vídeo en la parte final pincha aqui para ir al video tutorial
<html>
<body>
<p style="color:green;font-size:20px">Este es el primer párrafo</P>
<p style="color:red;font-size:15px">Este es el segundo párrafo
con otro estilo</p>
<p style="color:red;font-size:15px">Este es el segundo párrafo
con otro estilo</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo
Este es el primer párrafo
Este es el segundo párrafo con otro estilo
Se puede utilizar la etiqueta <div> y su cierre </div> para englobar aquella una sección de la página con un estilo determinado:
<div> style=”color:green;font-size:14px”> Esta sección de la web tendrá el estilo definido en div
</div>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Esta sección de la web tendrá el estilo definido en div
Estilo aplicado de forma global a una página HTML: La definición de estilos vista anteriormente es solamente útil cuando queremós hacer algún cambio puntual en nuestra web, pero sin embargo sigue haciendo que la página sea difícil de mantener en caso de necesitar realizar cambios en ella. Para resolver este problema podemos hacer uso de la etiqueta <style> y su cierre </style> definida dentro de la etiqueta <head> de la página. Dentro de <style> definiremos el estilo que queramos modificar para cada una de las etiquetas (o también llamados selectores): <style> etiqueta1 { propiedad1:valor1; propiedad2: valor2; …. ; propiedadN:valorN } etiqueta2 { propiedad1:valor1 ; propiedad2: valor2 ;…. ; propiedadM:valorM } … </style> Supongamos que queremos definir un estilo para todos los párrafos de una web escribiéndolos todos en cursiva y de color rojo y además queremos redefinir el estilo de las cabeceras de nivel 1 siendo todas ellas de color azul:
<html>
<head>
<style type=”text/css”>
p {font-style:italic; color:red; }
h1 { color:yellow; }
</style>
</head>
<body>
<h1>Canción del Pirata</h1>
<p> Con cien cañones por banda</p>
<p> Viento en popa a toda vela</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Canción del Pirata
Con cien cañones por banda
Viento en popa a toda vela
Algunos navegadores antiguos que no soporten hojas de estilo pueden hacer que tengamos problemas para mostrar la página. Por ello se han de tomar ciertas precauciones como encerrar el código CSS entre comentarios HTML de esta manera hará que los navegadores modernós ignoren los símbolos <!– y –> ya que saben que el códigó encerrado en la etiqueta <style> es CSS gracias a la inclusión del atributo type=”text/css” .Al mismo tiempo los navegadores antiguos interpretarán el código CSS como un comentario y no mostrarán nada.
<html>
<head>
<style type=”text/css”>
p { font-size:25; color:red;}
</style>
</head>
<body>
<P>texto rojo</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
texto rojo
Estilo aplicado a una etiqueta en particular mediante clases: Hasta ahora hemos visto como redefinir el estilo para una etiqueta determinada pero en muchas ocasiones nos puede interesar definir más de un estilo para una misma etiqueta y usar uno u otro cuando nos interese. Para solucionarlo se introducen las clases que son variantes del estilo para una misma etiqueta. Las clases se definen con la siguiente sintaxis: <style> etiqueta1.clase1 { propiedad1:valor1 ; propiedad2: valor2; …. ; propiedadN:valorN } etiqueta1.clase2 { propiedad1:valor1 ; propiedad2: valor2 ;…. ; propiedadM:valorM } … </style> En el momento que queramos usar cada una de ellas, bastará con incluir el atributo class dándole como valor el nombre asignado a la clase. Veámoslo más claramente con el siguiente ejemplo: Imagina que quieres definir dos estilos diferentes para la etiqueta <p> uno de color verde y tamaño 10 y otro de color gris y tamaño 15. En ese caso crearemos dos clases diferentes llamadas “parrafo_verde” y “parrafo_gris”:
<html>
<head>
<style type=”text/css”> p.parrafo_verde { font-size:15; color:green; } p.parrafo_gris { font-size:20; color:gray; }
</style>
</head>
<body>
<p class=”parrafo_verde”> Párrafo con el primer estilo </p>
<p class=”parrafo_gris”> Párrafo con el segundo estilo</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Párrafo con el primer estilo
Párrafo con el segundo estilo
Mismo estilo para varias etiquetas determinadas: Cuando queremos aplicar un estilo a etiquetas HTML diferentes basta con separar con “,” dichas etiquetas y posteriormente definir el estilo:
<html>
<head> <style type=”text/css”>
h1, h2, p { color:orange;}
</style>
</head>
<body>
<h1>Título</h1>
<h2>Subtítulo</h2>
<p> Párrafo </p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Título
Subtítulo
Párrafo
Estilo aplicado a cualquier etiqueta: Podemos crear un estilo y aplicarlo a cualquier etiqueta que lo acepte. La sintaxis es la siguiente: style> #estilo1 { propiedad1:valor1 ; propiedad2: valor2; …. ; propiedadN:valorN } #estilo2 { propiedad1:valor1 ; propiedad2: valor2 ;…. ; propiedadM:valorM } … </style> Cuando queramos usarlo debemos añadir el atributo id a la etiqueta escribiendo como valor el nombre dado al estilo. En el siguiente ejemplo se muestra como dos etiquetas diferentes como <p> y <h1> utilizan el mismo estilo.
<html>
<head>
<style type=”text/css”>
#estilo_azul { color:blue;}
</style>
</head>
<body>
<h1 id=”estilo_azul”>Título del párrafo</h1>
<p id=”estilo_azul”>Este es el contenido del párrafo </p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Título del párrafo
Este es el contenido del párrafo
Estilo aplicado según el contexto : Muchas veces nos puede interesar aplicar un estilo a una etiqueta solamente si se encuentra dentro de otra etiqueta en concreto. Por ejemplo imaginemos que queremos mostrar los enlaces en rojo únicamente cuando éstos aparezcan dentro de un párrafo, en ese caso definiremos el estilo separando las etiquetas con espacios de izquierda a derecha según el anidamiento:
<html>
<head>
<style type=”text/css”>
p { color:red; }
a { color:green; }
</style>
</head>
<body>
<a href=”http://www.google.es”><P>Este enlace aparece en rojo</P></a>
<a href=”http://www.google.es”>Este enlace aparece en azul</a> </body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Este enlace aparece en rojo google
Este enlace aparece en verde google
Estilo aplicado mediante una hoja de estilo aparte: Se puede definir el estilo de una web en un fichero CSS aparte para luego incluirlo en nuestro archivo HTML. Esto es sobre todo conveniente cuando tenemos varias web que hacen uso del mismo estilo, de manera que si queremos cambiar su aspecto bastará con cambiar solamente el archivo CSS donde está definido. El código que antes incluíamos en la etiqueta <style> lo salvamos en un fichero aparte, por ejemplo en uno llamado “miestilo.css”: p,h1.miestilo { color:red; font-size:25; } h2 { color:gray; } Ahora bastará con enlazar en nuestro archivo HTML el fichero CSS creado mediante la etiqueta <link/> incluida dentro del <head>.Esta etiqueta acepta el atributo hre en el que le indicaremos la URL del archivo CSS, el aributo rel que indica la relación entre los dos documentos (en nuestro caso le daremos el valor “stylesheet” ya que el documento será la hoja de estilo del fichero HTML) y el atributo type que indica el tipo de contenido al que se enlaza (en nuestro caso asignamos el valor “text/css”). En el siguiente ejemplo usaremos el estilo creado anteriormente en el fichero HTML:
<html>
<head>
<link href=”miestilo.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<h1>Título del párrafo</h1>
<p>Este es el contenido del párrafo </p>
</body>
</html>
Este es documento de CSS del archivo “miestilo.css”.
@charset “utf-8”;
p,h1.miestilo
{
color:blue;
p,h1.miestilo
{
color:blue;
font-size:25;
}
h1
{
color:gray;
}
}
h1
{
color:gray;
}
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Título del párrafo
Este es el contenido del párrafo
Estilo aplicado en caso de ambigüedad : En el caso que tengamos definido un estilo para una misma etiqueta en varios lugares, se aplicará el estilo que tenga más prioridad, siendo éste el orden:
1º) Estilos definidos con el atributo “style” en la propia etiqueta.
2º) Estilos definidos con la etiqueta <style> en la cabecera de la página.
3º) Estilos definidos en un archivo CSS.
video tutorial
