CÓMO COLOCAR UN TITULO CENTRADO CON CSS
Nuestro Punto de
Partida (El HTML):
El objetivo es aprender a integrar el archivo de estilo (style) al archivo .html, tome como base el siguiente codigo html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titulo con imagen</title>
</head>
<body>
</body>
</html>
Instrucciones iniciales: vaya a Visual Studio Code, Barra lateral izquierda, Primera opcion (Explorador), haga clic en el primer icono (Nuevo Archivo), ingrese: titulo.html copie y pegue en Visual Sudio Code (VSCode) el anterior codigo.
¿Cómo integramos el titulo? Tenemos este pedacito de código HTML:
<!-- 1.
Contenedor para el Título -->
<div class="titulo-contenedor">
<h1>Título Centrado Sobre la Imagen</h1>
</div>
- <div>: Imaginen que es una caja transparente. Le hemos puesto una etiqueta (class="titulo-contenedor") para poder identificarla fácilmente desde nuestro CSS (estilos.css)
- <h1>: Es nuestro título principal. Queremos
que este texto quede justo en el centro dentro de la
caja div.
Objetivo especifico:
Queremos que el texto
"Título Centrado Sobre la Imagen" aparezca perfectamente centrado
horizontalmente dentro de su caja (div). Además, le daremos un fondo azul
celeste a esa caja para que se vea mejor.
La Herramienta: CSS
(Hojas de Estilo en Cascada)
CSS le dice al
navegador cómo deben verse los elementos HTML.
¡Manos a la Obra!
Paso a Paso:
Paso 1: Preparar
nuestro archivo CSS
Asegúrense de tener un
archivo CSS (por ejemplo, estilos.css) y que esté correctamente vinculado
en la sección <head> de su archivo HTML, así:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titulo con imagen</title>
<link rel="stylesheet" href="estilos.css">
<!-- ¡Esta línea es clave! -->
</head>
Paso 2: Seleccionar
el elemento CORRECTO en CSS
Queremos darle
instrucciones a la caja (div) para que centre su contenido (h1).
¿Cómo identificamos esa caja en CSS? ¡Usando su class! En CSS, las clases
se seleccionan poniendo un punto (.) delante del nombre.
Entonces, en nuestro
archivo estilos.css, escribimos:
.titulo-contenedor
{
/* Aquí irán las instrucciones para esta
caja */
}
Paso 3: Aplicar la
propiedad para centrar texto
Para centrar texto (y
otros elementos que se comportan como texto, como imágenes pequeñas o
enlaces) dentro de un contenedor, usamos la propiedad text-align.
Añadimos esta
línea dentro de las llaves {} de nuestro selector:
.titulo-contenedor
{
text-align: center; /* ¡Esta es la
instrucción clave! */
}
- text-align: Le dice a la caja cómo alinear el texto
(y contenido similar) en su interior.
- center: Es el valor que le indica que lo alinee al centro.
Paso 4: Añadir el
fondo de color (¡Extra!)
El ejercicio también
pedía un fondo azul celeste para la caja del título. Usamos la propiedad background-color:
.titulo-contenedor
{
text-align: center;
background-color: lightblue; /* Añade el
color de fondo */
}
- background-color: Establece el color de fondo del
elemento.
- lightblue: Es un nombre de color predefinido en CSS
(podríamos usar otros como #add8e6 que es el código hexadecimal
para el mismo color).
Paso 5: (Opcional
pero Recomendado) Añadir un poco de espacio interior (Padding)
A veces, el texto
queda muy pegado a los bordes superior e inferior de la caja. Podemos añadir
espacio dentro de la caja con la propiedad padding.
.titulo-contenedor
{
text-align: center;
background-color: lightblue;
padding: 15px 0; /* Añade 15px de espacio
arriba/abajo, 0px a los lados */
}
- padding: Espacio entre el contenido y el borde interior del elemento.
- 15px 0: Es una forma corta. El primer valor (15px) se aplica arriba y abajo. El segundo valor (0) se aplica a izquierda y derecha. (Si pusiéramos solo padding: 15px; se aplicaría a los cuatro lados).
¡Listo! El
Resultado Final en CSS:
Nuestro archivo estilos.css ahora
tendrá esta regla:
.titulo-contenedor
{
background-color: lightblue; /* Fondo azul
celeste */
text-align: center; /* Centra el TEXTO (el h1) DENTRO de
este div */
padding: 15px 0; /* Añade espacio arriba y abajo para
que no se vea apretado */
/* (Podríamos añadir más estilos aquí si
quisiéramos) */
}
Ejercicio: Cob todo lo explciado proceda a crear una
pagina web en Visual Studio Code donde ponga en practica lo aprendido y
presente el resultado al profesor, debe aprender en detalle lo que acaba de
hacer y ser capaz de dar razón de ello cuando se le pregunte.
No hay comentarios:
Publicar un comentario