Vincular un archivo CSS y sintaxis de la CSS
Empezando con CSS
En esta unidad introducimos el uso de las hojas de estilo, aprenderemos a vincular una hoja de estilos, la sintaxis y el funcionamiento básico y los estilos tipográficos.
Vincular un archivo CSS y sintaxis de la CSS
Vamos a empezar con las hojas de estilo, que nos van a permitir cambiar el color, el tamaño de la tipografía, crear columnas o cambiar alineaciones. Y lo primero será vincular nuestra CSS en nuestro archivo HTML.
Introducción a las Hojas de Estilo CSS
Las hojas de estilo en cascada, conocidas como CSS (Cascading Style Sheets), son una herramienta fundamental para dar estilo y diseño a nuestras páginas web. Gracias a CSS, podemos cambiar colores, ajustar el tamaño de las tipografías, crear diseños en columnas, alinear elementos y mucho más.
Lo primero que debemos aprender es cómo vincular una hoja de estilo CSS a nuestro archivo HTML.
Vincular CSS a un Archivo HTML
Existen tres maneras principales de aplicar CSS a una página web:
- CSS en línea
- CSS interno
- CSS externo (recomendado para proyectos organizados)
1. CSS en línea
Se escribe directamente en la etiqueta HTML utilizando el atributo style. Esta opción es útil para aplicar estilos rápidos o puntuales.
Ejemplo:
<p style="color: blue; font-size: 16px;">Este es un texto azul con tamaño de 16px.</p>
2. CSS interno
Se escribe dentro de la página HTML, en una sección <style> ubicada en el <head>. Es útil para estilos específicos de una sola página.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Interno</title>
<style>
body {
background-color: #f4f4f4;
}
h1 {
color: red;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Hola, Mundo</h1>
<p>Este es un ejemplo de CSS interno.</p>
</body>
</html>
3. CSS externo (Recomendado)
Se utiliza un archivo CSS independiente para definir los estilos y luego se vincula al documento HTML mediante la etiqueta <link>.
Pasos para Vincular un Archivo CSS Externo:
- Crea un archivo con extensión
.css, por ejemplo,estilos.css. - En el archivo HTML, agrega la siguiente línea en la sección
<head>:
<link rel="stylesheet" href="estilos.css">
- Define los estilos en el archivo
estilos.css.
Ejemplo:
Archivo HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Externo</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Hola, Mundo</h1>
<p>Este es un ejemplo con una hoja de estilo externa.</p>
</body>
</html>
Archivo estilos.css:
body {
background-color: #e0f7fa;
font-family: Arial, sans-serif;
}
h1 {
color: #00796b;
text-align: center;
}
p {
color: #004d40;
font-size: 18px;
}
Beneficios del Uso de CSS Externo
- Separación de contenido y diseño: Facilita la organización del proyecto y hace que el código sea más legible.
- Reutilización: Puedes usar el mismo archivo CSS en múltiples páginas HTML.
- Mantenimiento: Es más fácil actualizar los estilos desde un único archivo.
Práctica
- Crea un archivo HTML y un archivo CSS independiente.
- Vincúla el archivo CSS externo al HTML.
- Experimenta cambiando colores, tamaños de tipografía y alineaciones.
Con estas bases, ya estarás listo para comenzar a dar estilo a tus páginas web de manera eficiente y profesional.
