Estilos en HTML – con CSS
Dando estilo con CSS en HTML
CSS significa Hojas de Estilo en Cascada.
CSS describe como se deben mostrar los elementos HTML en la pantalla, en el papel, o en otro medio.
CSS nos ahorra un montón de trabajo. Con este puedes controlar el diseño visual de varias páginas web con una sola instancia de este lenguaje de diseño grafico.
El código CSS puede ser añadido a los elementos HTML de 3 maneras:
- En línea – al usar el atributo style en los elementos HTML
- Interna – al usar un elemento <style> en la sección <head>
- Externa – al usar un archivo CSS externo
Lo manera más común de añadir el código CSS, es desde archivos CSS independientes que contienen el código CSS o en otras palabras, los estilos para la pagina o páginas web. Sin embargo, acá usaremos la estilización interna y en línea, porque para una demostración resulta más fácil, y es más sencillo como para que lo intentes en esta guía de HTML (HTML5).
Aviso: podrás aprender mucho más sobre CSS en nuestra futura guía de CSS.
CSS en línea
Un código CSS en línea se usa para aplicar un estilo único a un elemento HTML individual.
Un código CSS en línea emplea el atributo style de un elemento HTML.
Este ejemplo establece el color del texto del elemento <h1> como azul:
<h1 style="color:blue;"> Este es un encabezado azul </h1>
CSS interno
Un código CSS interno se usa para definir un estilo para una pagina HTML individual.
Un código CSS interno se define en la sección <head> de una pagina HTML, dentro de un elemento <style>:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>
Este es un encabezado
</h1>
<p>
Este es un parrafo.
</p>
</body>
</html>
CSS externo
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.
Al usar una hoja de estilo externa, tú puedes cambiar la apariencia de todo un sitio web ¡con solo cambiar un archivo!
Para usar una hoja de estilo externa, añade un enlace hacia ella en la sección <head> de una página HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1> Este es un encabezado </h1> <p> Este es un parrafo. </p> </body> </html>
Una hoja de estilo externa puede ser escrita en cualquier editor de texto. El archivo no debe contener ningún código HTML, y debe ser guardado con la extensión “.css”.
Abajo se muestra como luce el archivo CSS de arriba, “estilos.css”:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tipos de letra CSS
Estas 3 propiedades te permitiran estilizar tus fuentes (tipos de letra):
- La propiedad CSS color define el color de texto que se usara.
- La propiedad CSS font-family define el tipo de letra que se usara.
- La propiedad CSS font-size define el tamaño de texto que se usara.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un parrafo.</p>
</body>
</html>
PARTE 2, a continuación...
No hay comentarios.:
Publicar un comentario