Estilos HTML - CSS
CSS significa hojas de estilo en cascada.
CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.
CSS = Estilos y colores
¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para formatear el diseño de una página web.
Con CSS, puede controlar el color, la fuente, el tamaño del texto, el espaciado entre elementos, cómo se colocan y distribuyen los elementos, qué imágenes de fondo o colores de fondo se utilizarán, diferentes pantallas para diferentes dispositivos y tamaños de pantalla, y ¡mucho más!
Sugerencia: La palabra en cascada significa que un estilo aplicado a un elemento principal también se aplicará a todos los elementos secundarios dentro del elemento principal. Por lo tanto, si establece el color del cuerpo del texto en "azul", todos los encabezados, párrafos y otros elementos de texto dentro del cuerpo también obtendrán el mismo color (a menos que especifique algo diferente).
Usando CSS
CSS se puede agregar a documentos HTML de 3 maneras:
- En línea : mediante el uso del
style
atributo dentro de los elementos HTML - Interno - mediante el uso de un
<style>
elemento en la<head>
sección - Externo : mediante el uso de un
<link>
elemento para vincular a un archivo CSS externo
La forma más común de agregar CSS es mantener los estilos en archivos CSS externos. Sin embargo, en este tutorial usaremos estilos en línea e internos, porque esto es más fácil de demostrar y más fácil para que usted mismo lo pruebe.
CSS en línea
Se utiliza un CSS en línea para aplicar un estilo único a un único elemento HTML.
Un CSS en línea usa el style
atributo de un elemento HTML.
El siguiente ejemplo establece el color del texto del <h1>
elemento en azul y el color del texto del <p>
elemento en rojo:
Ejemplo
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS interno
Se utiliza un CSS interno para definir un estilo para una sola página HTML.
Un CSS interno se define en la <head>
sección de una página HTML, dentro de un <style>
elemento.
El siguiente ejemplo establece el color del texto de TODOS los <h1>
elementos (en esa página) en azul y el color del texto de TODOS los <p>
elementos en rojo. Además, la página se mostrará con un color de fondo "powderblue":
Ejemplo
<!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
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.
Para usar una hoja de estilo externa, agregue un enlace en la <head>
sección de cada página HTML:
Ejemplo
<!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>
La hoja de estilo externa se puede escribir en 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 archivo "styles.css":
"estilos.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Sugerencia: con una hoja de estilo externa, puede cambiar la apariencia de un sitio web completo, ¡cambiando un archivo!
Colores, fuentes y tamaños CSS
Aquí, demostraremos algunas propiedades CSS de uso común. Aprenderás más sobre ellos más adelante.
La propiedad CSS color
define el color del texto que se utilizará.
La propiedad CSS font-family
define la fuente que se utilizará.
La propiedad CSS font-size
define el tamaño del texto que se utilizará.
Ejemplo
Uso de las propiedades CSS color, font-family y font-size:
<!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>
Borde CSS
La propiedad CSS border
define un borde alrededor de un elemento HTML.
Sugerencia: puede definir un borde para casi todos los elementos HTML.
Ejemplo
Uso de la propiedad de borde CSS:
p {
border: 2px
solid powderblue;
}
Relleno CSS
La propiedad CSS padding
define un relleno (espacio) entre el texto y el borde.
Ejemplo
Uso de borde CSS y propiedades de relleno:
p {
border: 2px
solid powderblue;
padding: 30px;
}
Margen CSS
La propiedad CSS margin
define un margen (espacio) fuera del borde.
Ejemplo
Uso de las propiedades de borde y margen CSS:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Enlace a CSS externo
Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.
Ejemplo
Este ejemplo utiliza una URL completa para vincular a una hoja de estilo:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Ejemplo
Este ejemplo enlaza con una hoja de estilo ubicada en la carpeta html del sitio web actual:
<link rel="stylesheet" href="/html/styles.css">
Ejemplo
Este ejemplo vincula a una hoja de estilo ubicada en la misma carpeta que la página actual:
<link rel="stylesheet" href="styles.css">
Puede leer más sobre rutas de archivos en el capítulo Rutas de archivos HTML .
Resumen del capítulo
style
Use el atributo HTML para el estilo en línea- Use el elemento HTML
<style>
para definir CSS interno - Use el elemento HTML
<link>
para hacer referencia a un archivo CSS externo - Use el elemento HTML
<head>
para almacenar elementos <style> y <link> - Use la propiedad CSS
color
para colores de texto - Use la propiedad CSS
font-family
para fuentes de texto - Use la propiedad CSS
font-size
para tamaños de texto - Usa la propiedad CSS
border
para los bordes - Use la propiedad CSS
padding
para el espacio dentro del borde - Use la propiedad CSS
margin
para el espacio fuera del borde
Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial de CSS .
Ejercicios HTML
Etiquetas de estilo HTML
Tag | Description |
---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .