Manejo de Estilos en el Diseño de Páginas Web, CSS
Introducción al lenguaje CSS
- Ejemplo de Estilo con CSS: Supongamos que tienes un documento HTML con un párrafo y deseas darle estilo utilizando CSS. Aquí está el código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de CSS</title>
<link rel=»stylesheet» type=»text/css» href=»estilos.css»>
</head>
<body>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
Luego, en un archivo llamado «estilos.css», puedes definir un estilo para ese párrafo:
p {
color: blue;
font-size: 18px;
}
En este ejemplo, hemos cambiado el color del texto del párrafo a azul y hemos aumentado el tamaño de la fuente a 18 píxeles.
Definición de estilos a nivel página y marcas
- Cambiar el Color de Fondo de un Encabezado h1: Si deseas cambiar el color de fondo de un encabezado h1, puedes hacerlo con CSS. Por ejemplo:
h1 {
background-color: yellow;
}
Con esta regla CSS, el fondo de todos los encabezados h1 en tu página se volverá amarillo.
Ajustar el Tamaño de un Párrafo: Si deseas ajustar el tamaño del texto en un párrafo, puedes hacerlo de la siguiente manera:
p {
font-size: 20px;
}
Con esta regla CSS, el tamaño del texto en todos los párrafos (elementos <p>) se establecerá en 20 píxeles.
Estos ejemplos muestran cómo se utiliza CSS para dar estilo a elementos específicos en una página web, desde cambiar colores de fondo hasta ajustar tamaños de texto. CSS permite separar la presentación del contenido, lo que facilita el diseño y la personalización de las páginas web.
