Aplicar Estilos a una Página Web con CSS

1. Crear el Archivo CSS

Para comenzar a aplicar estilos en tu página HTML, el primer paso es crear un archivo de hojas de estilo en cascada (CSS). Sigue estos pasos:

  1. En tu proyecto, crea una nueva carpeta llamada css.
  2. Dentro de esa carpeta, crea un archivo llamado styles.css.

Este archivo contendrá todos los estilos que se aplicarán a tu página.

2. Aplicar el Archivo CSS al HTML

Una vez creado el archivo CSS, necesitas vincularlo a tu archivo HTML. Esto se hace añadiendo una etiqueta <link> en la sección <head> del documento HTML:

<head>
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

Esta línea asegura que el archivo CSS se aplique a todo el documento.

3. Aplicar Estilos Básicos

El siguiente paso es empezar a agregar estilos a los diferentes elementos de la página. El primer estilo que puedes aplicar es cambiar el fondo de la página con la propiedad background-color. Para hacerlo:

body {
    background-color: blue;
}

Esto aplicará un fondo azul a todo el contenido de la página. Además, puedes cambiar el color del texto con la propiedad color:

body {
    background-color: blue;
    color: white;
}

Esto cambiará todo el texto a color blanco, excepto los enlaces que tienen estilos propios.

4. Aplicar Estilos a las Etiquetas HTML

Ahora puedes aplicar estilos específicos a las etiquetas HTML como los encabezados (h1, h2, h3, etc.). Por ejemplo:

h1 {
    color: red;
    background-color: green;
    text-align: center;
}

Este código cambia el color del texto de los encabezados <h1> a rojo, el fondo a verde, y alinea el texto al centro.

También puedes cambiar los estilos de los encabezados más pequeños:

h2 {
    color: blue;
}

h3 {
    color: orange;
}

5. Otros Estilos Comunes

  • Alinear el Texto: Puedes utilizar la propiedad text-align para alinear el texto. Los valores posibles son left, right, center y justify.
  h1 {
      text-align: center;
  }
  • Colores RGB y Hexadecimales: Los colores se pueden definir en formatos RGB o hexadecimal. Ejemplo en RGB:
  h1 {
      background-color: rgb(0, 128, 255);
  }

O en formato hexadecimal:

  h1 {
      background-color: #00ff00;
  }

6. Reutilizar el Archivo CSS

Para asegurarte de que todos tus archivos HTML utilicen los mismos estilos, simplemente copia la línea de enlace del archivo CSS en la sección <head> de cada archivo HTML que crees. Esto hará que los mismos estilos se apliquen en todas las páginas.

<link rel="stylesheet" href="css/styles.css">

7. CSS Completo para el Proyecto

Aquí tienes un ejemplo completo del archivo styles.css:

body {
    background-color: blue;
    color: white;
}

h1 {
    color: red;
    background-color: green;
    text-align: center;
}

h2 {
    color: blue;
}

h3 {
    color: orange;
}

Conclusión

Ahora tienes una página básica con estilos aplicados. Puedes modificar el archivo CSS para cambiar los colores, alineaciones y otros aspectos de la presentación de tu web. Es recomendable mantener el CSS en un archivo separado para que los estilos sean reutilizables en todas tus páginas.

Comentarios

No comments found.