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 más).
Usar CSS
CSS se puede agregar a documentos HTML de 3 maneras:
- En línea: mediante el uso del atributo style dentro de los elementos HTML.
- Interno: mediante el uso de un elemento <style> en la sección <head>.
- Externo: mediante el uso de 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.
Estilos en línea
Se utiliza un CSS en línea para aplicar un estilo único a un único elemento HTML. CSS en línea usa 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> en rojo:
Ejm
<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 sección <head> de una página HTML, dentro de un elemento <style>. 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> en rojo. Además, la página se mostrará con un color de fondo «powderblue».
Ejm
<!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 esterno
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML. Para usar una hoja de estilo externa, agrega un enlace en la sección <head> de cada página HTML.
Ejm
<!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:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}Sugerencia: con una hoja de estilo externa, puedes cambiar la apariencia de un sitio web completo, ¡cambiando un archivo!
Tamaños, fuentes y colores con 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á.
Ejm
<!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>La propiedad CSS border
La propiedad CSS border define un borde alrededor de un elemento HTML.
Sugerencia: puedes definir un borde para casi todos los elementos HTML.
Ejm
p {
border: 2px solid powderblue;
}La propiedad CSS padding
La propiedad de CSS padding define un relleno (espacio) entre el texto y el borde.
p {
border: 2px solid powderblue;
padding: 30px;
}La propiedad CSS margin
La propiedad de CSS margin define un margen (espacio) fuera del borde.
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.
Ejm con ruta absoluta en URL
<link rel="stylesheet" href="https://www.sutilweb.eu/html/styles.css">
Ejm con ruta relativa en URL en distinta carpeta
<link rel="stylesheet" href="/html/styles.css">
Ejm con ruta relativa en URL en la misma carpeta
<link rel="stylesheet" href="styles.css">