Manejo de Estilos en el Diseño de Páginas Web, CSS

Manejo de Estilos en el Diseño de Páginas Web, lenguaje CSS

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.

Manejo de Estilos en el Diseño de Páginas Web, lenguaje CSS
Manejo de Estilos en el Diseño de Páginas Web, lenguaje CSS

 

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.

 

Esto es parte del Curso: Desarrollo de Páginas Web (vea el curso completo aquí)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

− 1 = 1