HTML con CSS: Guía Completa para Estilizar Páginas Web
El lenguaje HTML, si bien es excelente para estructurar el contenido de una página web, por sí solo no nos permite controlar la apariencia visual. Es aquí donde entra en juego CSS (Cascading Style Sheets), un lenguaje que nos permite definir cómo se verá nuestra página web. Con CSS, podemos cambiar el color de fondo, agregar márgenes, definir el tamaño de la fuente, entre muchísimas otras opciones para crear una página web atractiva y profesional.
En este artículo, te guiaremos a través de los fundamentos de CSS in HTML para que puedas empezar a dar estilo a tus páginas web de forma sencilla y eficiente.
¿Qué es CSS?
CSS es un lenguaje de hojas de estilo que se utiliza para controlar la presentación de documentos HTML. Con CSS, podemos especificar la apariencia de elementos HTML, incluyendo su color, tamaño de fuente, posición en la página, etc. En otras palabras, CSS nos permite controlar la apariencia visual de nuestra página web sin necesidad de modificar el código HTML.
¿Cómo se usa CSS en HTML?
Existen tres formas principales de aplicar CSS a tu código HTML:
CSS en línea
El CSS en línea es la forma más simple de aplicar estilos, ya que se define directamente dentro del elemento HTML al que se desea aplicar. Se utiliza el atributo style para indicar el estilo que se quiere aplicar.
«`html
Este párrafo tiene un color azul y un tamaño de fuente de 16px.
«`
Esta forma de aplicar CSS in HTML es ideal para estilos específicos de un elemento único, pero no es la mejor opción para estilos generales o reutilizables.
CSS interno
El CSS interno se define dentro de la sección <head> del archivo HTML. Se utiliza la etiqueta <style> para incluir el código CSS.
html
<head>
<style>
p {
color: red;
font-size: 14px;
}
</style>
</head>
Esta forma de aplicar estilos es útil para estilos que se aplican a varios elementos dentro de la misma página HTML.
CSS externo
El CSS externo es la forma más recomendada de aplicar estilos, ya que nos permite separar el código HTML del código CSS. Se crea un archivo separado con extensión .css para definir los estilos y se incluye en el archivo HTML utilizando la etiqueta <link>.
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
El archivo styles.css contiene el código CSS:
css
p {
color: green;
font-size: 12px;
}
Esta forma de aplicar CSS in HTML es la más flexible y escalable, ya que permite reutilizar los estilos en diferentes páginas web y facilita la edición y el mantenimiento del código.
Propiedades CSS más comunes
Existen una gran cantidad de propiedades CSS, pero algunas de las más comunes son:
background-color
Esta propiedad define el color de fondo de un elemento.
css
body {
background-color: #f0f0f0;
}
color
Esta propiedad define el color del texto de un elemento.
css
h1 {
color: #333;
}
padding
Esta propiedad agrega espacio entre el contenido de un elemento y su borde.
css
div {
padding: 20px;
}
margin
Esta propiedad agrega espacio entre el borde de un elemento y los elementos adyacentes.
css
h2 {
margin-bottom: 30px;
}
font-family
Esta propiedad define la fuente del texto de un elemento.
css
p {
font-family: Arial, sans-serif;
}
font-size
Esta propiedad define el tamaño de fuente del texto de un elemento.
css
h1 {
font-size: 24px;
}
text-align
Esta propiedad define la alineación del texto de un elemento.
css
p {
text-align: center;
}
Ejemplo completo
«`html
Título principal
Este es un párrafo de texto.
Subtítulo
Este es otro párrafo de texto.
«`
«`css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
h2 {
color: #555;
font-size: 18px;
margin-bottom: 10px;
}
p {
color: #777;
margin-bottom: 15px;
}
div {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 30px;
}
«`
Conclusión
En este artículo, hemos aprendido los fundamentos de CSS in HTML y cómo utilizar este lenguaje para dar estilo a nuestras páginas web. Hemos aprendido las tres formas principales de aplicar CSS, las propiedades CSS más comunes y un ejemplo completo de cómo aplicar estilos a una página web.
Este es solo el comienzo de tu viaje en el mundo del estilo web. ¡Aprende más sobre CSS en nuestro tutorial específico y crea páginas web hermosas y funcionales!