HTML - de Cero a Profesional

Estilos con CSS

Introducción a CSS (Cascading Style Sheets)

CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje de diseño utilizado para controlar el aspecto y la presentación de las páginas web HTML. Con CSS, puedes cambiar el color, la fuente, el tamaño y la disposición de los elementos HTML para crear un diseño visualmente atractivo y coherente en tu sitio web.

Aquí hay algunos conceptos básicos de CSS que te ayudarán a empezar:

  1. Selección de elementos:

    • CSS utiliza selecciones para aplicar estilos a elementos HTML específicos. Puedes seleccionar elementos por su tipo, clase o ID.
    • Por ejemplo, para seleccionar todos los párrafos en tu página, usarías p. Para seleccionar elementos con una clase específica, usarías .nombre-clase. Y para seleccionar un elemento con un ID específico, usarías #nombre-id.

  2. Propiedades y valores:

    • Las propiedades CSS son atributos que controlan el aspecto de un elemento, como el color o el tamaño de la fuente.
    • Los valores son los ajustes específicos que se aplican a las propiedades. Por ejemplo, para la propiedad color, el valor podría ser un nombre de color como rojo, un valor hexadecimal como #ff0000, o un valor RGB como rgb(255, 0, 0).

  3. Reglas CSS:

    • Las reglas CSS se componen de un selector y un bloque de declaración.
    • Por ejemplo, la regla p { color: blue; } aplicará el color azul a todos los párrafos en la página.

  4. Cascada y especificidad:

    • La «Cascada» en CSS se refiere a la manera en que se aplican los estilos a los elementos. Las reglas CSS se aplican en orden, y las reglas más específicas tienen prioridad sobre las reglas menos específicas.
    • La «Especificidad» se refiere a la prioridad de una regla CSS sobre otra. Las reglas con mayor especificidad tienen mayor prioridad.

  5. Añadir CSS a una página HTML:

    • Puedes incluir CSS en una página HTML utilizando la etiqueta <style> dentro de la sección <head>, o mediante un archivo externo de CSS vinculado a la página utilizando la etiqueta <link>.

Aquí tienes un ejemplo básico de cómo se vería una regla CSS para cambiar el color de los párrafos en una página web:

				
					p {
    color: blue;
}

Selección de elementos y aplicaciones de estilos

  1. Selección de elementos:

    • En CSS, puedes seleccionar elementos HTML específicos utilizando diferentes tipos de selectores.
    • El selector más básico es el selector de tipo, que selecciona todos los elementos de un tipo específico. Por ejemplo, p seleccionará todos los párrafos en la página.
    • También puedes utilizar selectores de clase para seleccionar elementos que tengan una clase específica. Por ejemplo, .clase seleccionará todos los elementos que tengan la clase «clase».
    • Otro tipo de selector es el selector de ID, que selecciona un elemento con un ID específico. Por ejemplo, #id seleccionará el elemento con el ID «id».

  2. Aplicación de estilos:

    • Una vez que has seleccionado los elementos que deseas estilizar, puedes aplicar diferentes propiedades de estilo para cambiar su aspecto.
    • Por ejemplo, puedes cambiar el color del texto utilizando la propiedad color, el tamaño de la fuente utilizando la propiedad font-size, o el fondo utilizando la propiedad background-color.
    • También puedes controlar la alineación, el espaciado, el borde y muchas otras propiedades para personalizar completamente el aspecto de tus elementos.

  3. Ejemplo práctico:

    Supongamos que queremos cambiar el color de fondo de todos los párrafos en nuestra página a azul y el color del texto a blanco. Podríamos escribir el siguiente código CSS:

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

Este código aplicará un fondo azul y texto blanco a todos los párrafos en nuestra página.

    1. Aplicaciones de estilos:

      • CSS se utiliza ampliamente en la web para dar estilo a páginas HTML y crear diseños visualmente atractivos.
      • Se puede utilizar para crear diseños responsivos que se adapten a diferentes tamaños de pantalla, mejorar la legibilidad del texto, añadir efectos visuales como sombras y animaciones, y mucho más.
      • Además de las páginas web, CSS también se utiliza en aplicaciones móviles, juegos, documentos electrónicos y otros medios digitales para controlar la presentación y el aspecto visual.

Creación de reglas CSS internas y externas

Reglas CSS internas:

  • Las reglas CSS internas se definen dentro de la etiqueta <style> en la sección <head> de un documento HTML.
  • Estas reglas se aplican específicamente a ese documento HTML en particular.
  • Son útiles cuando quieres aplicar estilos a una única página web sin afectar a otras páginas.
				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ejemplo de reglas CSS internas">
    <title>Reglas CSS Internas</title>
    <style>
        /* Reglas CSS internas */
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Este es un párrafo con estilos aplicados mediante reglas CSS internas.</p>
</body>
</html>

Reglas CSS externas:

  • Las reglas CSS externas se definen en un archivo de estilo separado con extensión .css.
  • Este archivo se enlaza a través de la etiqueta <link> en la sección <head> del documento HTML.
  • Estas reglas se pueden aplicar a múltiples páginas HTML, lo que facilita la consistencia del diseño en todo el sitio web.
				
					<!-- En el documento HTML -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ejemplo de reglas CSS externas">
    <title>Reglas CSS Externas</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <p>Este es un párrafo con estilos aplicados mediante reglas CSS externas.</p>
</body>
</html>

				
			
				
					/* En el archivo estilos.css */
/* Reglas CSS externas */
p {
    color: red;
    font-size: 18px;
}

Diferencias:

  • Las reglas CSS internas se definen directamente en el documento HTML y se aplican solo a ese documento, mientras que las reglas CSS externas se almacenan en un archivo separado y se pueden aplicar a múltiples documentos HTML.
  • Usar reglas CSS externas facilita la organización del código y la mantenibilidad del sitio web, ya que los estilos se pueden modificar y actualizar en un solo lugar.

Recursos