HTML5: Estilos HTML - CSS
Estilo HTML con CSS
CSS significa Hojas de Estilo en Cascada.CSS describe cómo los elementos HTML se mostrarán en la pantalla, papel o en otros medios.
CSS ahorra mucho trabajo. Puede controlar el diseño de múltiples páginas web a la vez.
CSS se puede agregar a los elementos HTML de 3 maneras:
- En línea: utilizando el atributo de estilo en elementos HTML.
- Interno: utilizando un elemento <style> en la sección <head>
- Externo: utilizando un archivo CSS externo.
Aprenderemos mucho más sobre CSS en un futuro tutorial más adelante.
CSS en línea
Un CSS en línea se usa para aplicar un estilo único a un solo elemento HTML.Un CSS en línea usa el atributo de estilo de un elemento HTML.
Este ejemplo establece el color del texto del elemento <h1> en azul:
<h1 style="color:blue;">This is a Blue Heading</h1>
 |
| Vista en navegador del ejemplo anterior |
CSS interno
Un CSS interno se usa para definir un estilo para una sola página HTML.Un CSS interno se define en la sección <head> de una página 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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS externo
Una hoja de estilo externa se utiliza para definir el estilo de muchas páginas HTML.Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo, cambiando un solo archivo.
Para usar una hoja de estilo externa, agregue un enlace a ella en la sección <head> de la página HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Se puede escribir una hoja de estilo externa con cualquier editor de texto. El archivo no debe contener ningún código HTML, y debe guardarse con una extensión .css.
Así es como se ve el "styles.css":
body {
background-color: powderblue; }
h1 {
color: blue; }
p {
color: red; }
Fuentes CSS
La propiedad color CSS define el color del texto que se utilizará.La propiedad font-family CSS define la fuente que se utilizará.
La propiedad font-size CSS define el tamaño de texto que se utilizará.
<!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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 |
| Vista en navegador del ejemplo anterior |
Borde de CSS
La propiedad border de CSS define un borde alrededor de un elemento HTML:p {
border: 1px solid powderblue; }
Donde el primer valor (1px) es el ancho en pixeles del borde, el segundo valor (solid) es el tipo de borde, y último valor (powderblue) es el color del borde.
 |
| Vista en navegador del ejemplo anterior |
Relleno de CSS
La propiedad padding de CSS define un relleno (espacio) entre el texto y el borde:p {
border: 1px solid powderblue;
padding: 30px;
}
 |
| Vista en navegador del ejemplo anterior |
Margen de CSS
La propiedad margin de CSS define un margen (espacio) fuera del borde:p {
border: 1px solid powderblue;
margin: 50px;
}
 |
| Vista en navegador del ejemplo anterior |
El atributo id.
Para definir un estilo específico para un elemento especial, agregue un atributo de identificación (id) al elemento:<p id="p01">I am different</p>
luego define un estilo para el elemento con la identificación específica:
#p01 {
color: blue; }
Nota: ¡La identificación de un elemento debe ser única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!
La atributo class
Para definir un estilo para un tipo especial de elementos, agregue un atributo class al elemento:<p class="error">I am different</p>
luego defina un estilo para los elementos con la clase específica:
p.error {
color: red; }
Nota: La clase de un elemento no tiene porque ser única, es decir, varios elementos diferentes pueden tener la misma clase para aplicarles a todos ellos los mismos estilos.
Referencias externas
Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.Este ejemplo usa una URL completa para vincular a una hoja de estilos:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Este ejemplo enlaza con una hoja de estilo ubicada en la carpeta html en el sitio web actual:
<link rel="stylesheet" href="/html/styles.css">
Este ejemplo vincula a una hoja de estilo ubicada en la misma carpeta que la página actual:
<link rel="stylesheet" href="styles.css">
Resumen del capítulo
- Use el atributo style HTML para el estilo en línea.
- Utilice el elemento HTML <style> para definir CSS interno.
- Use el elemento HTML <link> para referirse a un archivo CSS externo.
- Utilice el elemento HTML <head> para almacenar elementos <style> y <link>.
- Use la propiedad color CSS para colores de texto.
- Utilice la propiedad font-family CSS para fuentes de texto.
- Use la propiedad font-size CSS para tamaños de texto.
- Use la propiedad border CSS para bordes.
- Use la propiedad border CSS para espacio dentro del borde.
- Use la propiedad margin CSS para espacio fuera del borde.
Comentarios
Publicar un comentario