HTML Estilos — CSS
La moda pasa de moda, pero el estilo, ¡nunca! ¡Y es verdad!..
Coco Chanel
CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada).
CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.
CSS = Styles and Colors
¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para dar formato al diseño de una página web.
Con CSS, puedes controlar el color, la fuente, el tamaño del texto, el espacio entre elementos, cómo se colocan y distribuyen los elementos, qué imágenes o colores de fondo se usarán, diferentes visualizaciones para diferentes dispositivos y pantallas. ¡Tallas y mucho más!
Consejo: 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 títulos, párrafos y otros elementos de texto dentro del cuerpo también obtendrán el mismo color (a menos que especifique algo más).
Usando CSS
Se puede agregar CSS a documentos HTML de tres maneras:
- Inline - utilizando el atributo
styledentro de los elementos HTML - Internal - utilizando un elemento
<style>en la sección<head> - External - utilizando un elemento
<link>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 internos y en línea, porque es más fácil de demostrar y más fácil para usted probarlo usted mismo.
Inline CSS
Se utiliza un CSS en línea para aplicar un estilo único a un único elemento HTML.
Un CSS en línea utiliza el atributo style de un elemento HTML.
El siguiente ejemplo establece el color del texto del elemento <h1> en azul y el color del texto del elemento <p> a rojo:
Ejemplo
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Inténtalo tú mismo »
Internal CSS
Se utiliza un CSS interno 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 <style> elemento.
El siguiente ejemplo establece el color del texto de TODOS los elementos <h1> (en esa página) en azul, y el color del texto de TODOS los elementos <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>
Inténtalo tú mismo »
External CSS
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.
Para utilizar una hoja de estilo externa, agréguele un enlace en la sección <head> 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>
Inténtalo tú mismo »
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":
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Consejo: ¡Con una hoja de estilo externa, puedes cambiar el aspecto de un sitio web completo, cambiando un archivo!
CSS Colores, fuentes y tamaños
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 propiedades CSS de color, familia de fuentes y tamaño de fuente:
<!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>
Inténtalo tú mismo »
CSS Border
La propiedad CSS border define un borde alrededor de un elemento HTML.
Consejo: Puede definir un borde para casi todos los elementos HTML.
CSS Padding
La propiedad CSS padding define un relleno (espacio) entre el texto y el borde.
Ejemplo
Uso de propiedades de relleno y borde CSS:
p {
border: 2px solid powderblue;
padding: 30px;
}
Inténtalo tú mismo »
CSS Margin
La propiedad CSS margin define un margen (espacio) fuera del borde.
Ejemplo
Uso de propiedades de borde y margen CSS:
p {
border: 2px solid powderblue;
margin: 50px;
}
Inténtalo tú mismo »
Enlace a CSS externo
Se puede hacer referencia a las hojas de estilo externas 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">
Inténtalo tú mismo »
Ejemplo
Este ejemplo enlaza a una hoja de estilo ubicada en la carpeta html del sitio web actual:
<link rel="stylesheet" href="/html/styles.css">
Inténtalo tú mismo »
Ejemplo
Este ejemplo enlaza a una hoja de estilo ubicada en la misma carpeta que la página actual:
<link rel="stylesheet" href="styles.css">
Inténtalo tú mismo »
Puede leer más sobre rutas de archivos en el capítulo HTML Rutas de archivos.
Resumen del capítulo
- Usa el HTML
styleatributo para el estilo en línea - Usa el HTML
<style>elemento para definir CSS interno - Usa el HTML
<link>elemento para hacer referencia a un archivo CSS externo - Usa el HTML
<head>elemento para almacenar elementos <style> y <link> - Usa el CSS
colorpropiedad para colores de texto - Usa el CSS
font-familypropiedad para fuentes de texto - Usa el CSS
font-sizepropiedad para tamaños de texto - Usa el CSS
borderpropiedad para las fronteras - Usa el CSS
paddingpropiedad para espacio dentro de la frontera - Usa el CSS
marginpropiedad para espacio fuera de la frontera
Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial de CSS.
HTML Ejercicios
Tags de estilo HTML
| Tags | Descripción |
|---|---|
| <style> | Define información de estilo para un documento HTML |
| <link> | Definir un vínculo entre un documento y un recurso externo |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
