HTML (lenguaje de marcado de hipertexto) es el lenguaje estándar para estructurar páginas web. Mientras que la hoja de estilo en cascada se utiliza para proporcionar varias propiedades de estilo a los elementos HTML. Más específicamente, puede acceder a los elementos de HTML en CSS por nombre de elemento, por selectores de clase o por selectores de ID.

Tres métodos para agregar una hoja de estilo CSS a un archivo HTML son CSS internos, CSS en línea y CSS externo. Sin embargo, este artículo guiará cómo agregar una hoja de estilo externa en HTML.

¿Qué es una hoja de estilo CSS externa??

La hoja de estilo externa es útil de una manera que podemos cambiar el aspecto de nuestro sitio web modificando solo un archivo. El archivo HTML debe tener un enlace a la hoja de estilo dentro del "El elemento "que se mencionará dentro del componente de la cabeza de la página HTML.

El siguiente ejemplo demuestra varios elementos HTML que se diseñarán con propiedades CSS utilizando la hoja de estilo externo.

Ejemplo: cómo crear y vincular la hoja de estilo externa al archivo HTML?

En el archivo HTML, primero, agregue un elemento div que tenga un nombre de clase "principal". Dentro de esto, agregar

elemento que tiene nombre de clase como "título"Proporcionar encabezado. El

Elemento con ID como "paracaLuego se agrega para proporcionar contenido de texto.

Paso 1: Crear archivo HTML

A continuación se muestra el código HTML para el escenario discutido:

Este es el elemento de encabezado

Este es el principal Div

Como no hemos proporcionado a ninguno de los elementos HTML con propiedades de estilo, la pantalla de salida se verá así:

En la siguiente sección, crearemos una hoja de estilo que contenga las propiedades de estilo de los elementos que hemos creado en el archivo HTML.

Paso 2: Crear hoja de estilo externo

Cree un archivo nuevo y nombre con una extensión ".CSS". Ábrelo y escriba el código como se indica en el siguiente bloque de código.

Estilo principal Div

.principal
Ancho: 500px;
Altura: 200px;
Color de fondo:#001253;
Text-Align: Center;
Top-top: 20px;
Margen: 0px Auto;
borde: 5px sólido RGB (194, 194, 189);
Font-Family: cursiva;

Las propiedades aplicadas a los elementos HTML en la hoja de estilo externo se describen a continuación:

• ".principal"Se usa para acceder a la clase del elemento div, donde el"."Seguido del nombre de clase se conoce como el selector de clases.
• "anchoLa propiedad se utiliza para la configuración del ancho del elemento.
• "alturaLa propiedad se utiliza para la configuración de la altura del elemento.
• "color de fondoLa propiedad se utiliza para establecer el color de fondo.
• "texto alineado"¿Es la propiedad utilizada para la alineación del texto?.
• "acolchado superior"¿Se utiliza la propiedad para agregar espacio por encima del contenido del Div.
• "margen"Con el valor 0px Auto representa el espacio 0px desde arriba e inferior y el espacio igual en la izquierda y la derecha del elemento.
• "bordeLa propiedad se establece con el valor 5px sólido RGB (194, 194, 189), donde 5px se refiere al ancho del borde, el sólido es el tipo de línea, y RGB (194, 194, 189) es el código de color del borde.
• "Familia tipográfica"Con el valor cursivo hace que el estilo de fuente parezca que fueron escritos a mano.

Estilo ID para para

#paraca
tamaño de fuente: 25px;
Font-Weight: Bold;
Color: #FFB9B9;

El elemento de identificación con nombre para del

ID de elemento diseñada con las propiedades que se explican a continuación:

• "#paraca"Se utiliza para acceder al elemento de identificación de HTML. El "#"Se conoce como el selector de identificación.
• "tamaño de fuenteLa propiedad se utiliza para la configuración del tamaño de la fuente.
• "pescado"Con el valor establecido como en negrita, la fuente en negrita.
• "colorLa propiedad se utiliza para la configuración del color de fuente.

Encabezado de estilo

.título
Color: Whitesmoke;

El color de fuente del encabezado se establece como "humo blanco"Al utilizar la propiedad"color".

Paso 3: Enlace Hoja de estilo externo a HTML

Ahora, en la sección principal del archivo HTML, especificaremos el enlace a la hoja de estilo externo:

Se pueden utilizar varios atributos en la etiqueta de enlace HTML. Los atributos especificados en el elemento de enlace se describen a continuación:

• "reyEl atributo se utiliza para informar al navegador sobre el archivo importado, como la hoja de estilo.
• "href"El atributo especifica la ruta del archivo.
• "tipoEl atributo se utiliza para indicar el contenido del archivo importado.

Como se muestra en la imagen a continuación, las propiedades de estilo que se proporcionan en la hoja de estilo externo se aplican correctamente:

Hemos aprendido con éxito a vincular el archivo CSS al archivo HTML.

Conclusión

CSS es la hoja de estilo en cascada que proporciona diferentes propiedades de estilo a los elementos HTML. Hay tres formas de conectar el CSS al HTML: CSS en línea, CSS externo y CSS interno. En HTML, dentro de la sección del cabezal, el enlace a la hoja de estilo externo se especificará utilizando el elemento. Este artículo ha demostrado el procedimiento para crear y vincular hojas de estilo externo a HTML.