Módulo 3: CSS Básico
Lección 3: Introducción a CSS
Objetivos:
· Entender qué es CSS y su importancia en el diseño web.
· Conocer la sintaxis básica de CSS.
1. ¿Qué es CSS?
CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de un documento HTML. CSS permite separar el contenido (HTML) de la presentación (CSS), lo que facilita el mantenimiento y la actualización de los estilos.
2. Sintaxis básica de CSS
Un archivo CSS consiste en reglas de estilo que se aplican a elementos HTML. Cada regla tiene un selector y un bloque de declaraciones. Aquí tienes un ejemplo básico:
selector {
propiedad: valor;
}
- Selector: El elemento HTML al que se aplican las reglas de estilo.
- Propiedad: La característica que se va a modificar (color, fuente, margen, etc.).
- Valor: El valor asignado a la propiedad.
3. Ejemplo de regla CSS
Aquí tienes un ejemplo de cómo aplicar estilos a un encabezado y a un párrafo:
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-family:
Arial, sans-serif;
}
El selector h1 aplica las reglas de estilo al elemento <h1>. En este caso, el color del texto será azul y el tamaño de la fuente será de 24 píxeles.
· El selector p aplica las reglas de estilo al elemento <p>. El color del texto será gris y la fuente será Arial (con un respaldo de sans-serif).
4. Incluir CSS en un documento HTML
Hay varias formas de incluir CSS en un documento HTML:
CSS en línea (inline): Se utiliza el atributo style dentro de un elemento HTML.
html
<h1 style="color: blue; font-size: 24px;">Título
en Azul</h1>
CSS interno (internal): Se coloca dentro de una etiqueta <style> en la sección <head> del documento HTML.
html
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
CSS externo (external): Se coloca en un archivo .css separado y se enlaza en el documento HTML utilizando la etiqueta <link>.
<head>
<link rel="stylesheet"
type="text/css" href="estilos.css">
</head>
5. Selectores en CSS
Los selectores en CSS se utilizan para aplicar reglas de estilo a elementos específicos en un documento HTML. Aquí tienes algunos de los selectores más comunes:
Selector de tipo: Aplica estilo a todos los elementos de un tipo específico.
css
p {
color: blue;
}
Selector de clase: Aplica estilo a todos los elementos con una clase específica. Las clases se definen con un punto (.) seguido del nombre de la clase.
css
.miClase {
color: red;
}
Selector de ID: Aplica estilo a un elemento con un ID específico. Los IDs se definen con un hash (#) seguido del nombre del ID.
css
#miID {
color: green;
}
Selector universal: Aplica estilo a todos los elementos del documento.
css
Copiar
* {
color: purple;
}
6. Propiedades básicas
Color: Cambia el color del texto.
css
p {
color: blue;
}
Fondo: Cambia el color de fondo de un elemento.
css
div {
background-color: yellow;
}
Fuente: Cambia la fuente del texto.
css
h1 {
font-family: Arial, sans-serif;
}
Tamaño de fuente: Cambia el tamaño de la fuente.
css
h2 {
font-size: 20px;
}
Margen: Define el espacio exterior de un elemento.
css
p {
margin: 10px;
}
Padding: Define el espacio interior de un elemento.
css
div {
padding: 10px;
}
3. Ejemplo práctico
Aquí tienes un ejemplo práctico que combina varios selectores y propiedades:
css
body {
background-color: lightgray;
}
h1 {
color: blue;
font-size: 24px;
}
.miClase {
color: red;
font-family: Arial, sans-serif;
}
#miID {
background-color: yellow;
padding: 10px;
}
En tu archivo HTML, puedes utilizar estas clases e IDs de la siguiente manera:
html
<!DOCTYPE html>
<html>
<head>
<title>Práctica de CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h1>Encabezado Azul</h1>
<p class="miClase">Este es un párrafo rojo con fuente Arial.</p>
<div id="miID">Este es un div con fondo amarillo y padding.</div>
</body>
</html>
Ejercicio práctico:
Crea un archivo HTML y un archivo CSS. Enlaza el archivo CSS al documento HTML y escribe las reglas de estilo mencionadas. Luego, ábrelo en tu navegador para ver el resultado.
Ejercicio práctico:
Crea un archivo HTML y un archivo CSS. Enlaza el archivo CSS al documento HTML y escribe las reglas de estilo mencionadas. Luego, ábrelo en tu navegador para ver el resultado.
