Exploración de los conceptos de CSS

  • 4 minutos

Estructura CSS

Si quiere que la página HTML muestre todo el texto entre las h1 etiquetas con el color naranja, puede usar el código CSS siguiente.

h1 {
    color: orange;
}

El código CSS anterior comienza por (h1) que selecciona el código HTML al que quiere aplicar estilo. El h1 en el ejemplo se denomina selector.

Observe que el código dentro de las llaves, color: orange;t declara cómo se debe aplicar estilo a la etiqueta h1 seleccionada. El código CSS en las llaves { }, como color: orange; se denomina declaración.

La declaración de ejemplo contiene una propiedad, color, que está separada de un valor, orange, con dos puntos (:) y el final de la configuración está marcado por un punto y coma (;).

Nota

No es necesario memorizar todas las propiedades y valores disponibles en CSS. Hay muchos sitios web a los que puedes hacer referencia. Además, herramientas como vscode.dev o Visual Studio Code ofrecen opciones de autocompletar que pueden ayudarte a crear un CSS.

Inserción de un archivo CSS

Una manera rápida de agregar información de estilo es colocarla dentro de las etiquetas head de la página HTML mediante un atributo style. Este método no se considera el procedimiento recomendado, pero es correcto usarlo para el aprendizaje y las pruebas.

En el ejemplo siguiente se agrega la <style> etiqueta con información de estilo para cualquier h1 para mostrar gris. Puesto que es el único estilo, el resto del HTML se muestra con el estilo predeterminado del explorador.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Cuando se ve en un explorador, el texto "Bienvenido" de la etiqueta <h1> se muestra en gris.

Captura de pantalla de la página HTML representada que muestra el encabezado 1 en gris.

Aplicación de estilos a HTML mediante CSS

Al agregar estilos al lenguaje de marcado de hipertexto (HTML), es mejor preparar el estilo en un archivo CSS independiente. Cuando varios archivos HTML usan el mismo CSS, tienen una apariencia consistente. Además, actualizar un archivo CSS es más fácil que tener que actualizar cada archivo HTML individual.

Para hacer referencia al archivo CSS, use el elemento link.

link tiene dos atributos, rel y href. rel se usa para identificar el tipo de recurso al que hace referencia, hoja de estilos para hojas de estilos. href se usa para identificar la ruta de acceso al archivo CSS. Si el archivo CSS estaba en la misma carpeta que el archivo HTML y tenía el nombre style.css, podría usar lo siguiente para hacer referencia a él desde la página:

<link rel="stylesheet" href="style.css">

Ahora tiene al menos dos archivos, un .html archivo y un .css archivo. El ejemplo anterior tendría un archivo HTML que se vincula a la hoja de estilo CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>