22 mayo, 2024

Todo Programación

Cursos, código fuente y ejemplos.

Html 5 – Capítulo 05 – CSS

2 minutos de lectura
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.


Copyright © Todos los derechos reservados. | Newsphere por AF themes.