Html 5 – Capítulo 05 – CSS
CSS (Cascading Style Sheets) es esencial para dar estilo y diseño a las páginas web. En este manual, exploraremos selectores, propiedades y valores CSS básicos. Aprenderás cómo aplicar estilos a elementos HTML y mejorar la apariencia visual de tu contenido.
Selectores CSS
Los selectores CSS se utilizan para apuntar a elementos específicos en una página web y aplicarles estilos.
/* Selector de etiqueta */
h1 {
color: blue;
}
/* Selector de clase */
.mi-clase {
font-size: 16px;
}
/* Selector de ID */
#mi-id {
background-color: gray;
}- Los selectores de etiqueta apuntan a elementos específicos (por ejemplo,
<h1>). - Los selectores de clase comienzan con un punto y se aplican a elementos con esa clase.
- Los selectores de ID comienzan con un signo de numeral y se aplican a un elemento con un ID único.
Propiedades y Valores CSS
Las propiedades CSS definen qué aspecto tendrá un elemento, y los valores especifican cómo se verá.
/* Cambiar el color del texto */
color: red;
/* Cambiar el tamaño de la fuente */
font-size: 18px;
/* Alinear el texto al centro */
text-align: center;- Las propiedades controlan diferentes aspectos del diseño, como el color, tamaño de fuente, espaciado y más.
- Los valores establecen cómo se aplicará la propiedad. Pueden ser unidades (px, em, %), colores, valores booleanos, etc.
Ejercicios Resueltos
Ejercicio 1: Cambiar el Color de un Encabezado
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Encabezado de Color</h1>
</body>
</html>Ejercicio 2: Estilizar una Clase de Botón
<!DOCTYPE html>
<html>
<head>
<style>
.boton-estilizado {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="boton-estilizado">Haz clic</button>
</body>
</html>Ejercicio 3: Estilizar un ID de Contenedor
<!DOCTYPE html>
<html>
<head>
<style>
#contenedor {
border: 1px solid black;
padding: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<div id="contenedor">
<p>Contenido dentro del contenedor.</p>
</div>
</body>
</html>Conclusión
CSS desempeña un papel vital en la apariencia de las páginas web. Mediante la exploración de selectores, propiedades y valores CSS básicos, has adquirido las habilidades para personalizar la presentación visual de tu contenido.
