Cómo agregar CSS
Hay varias formas de aplicar CSS en su documento HTML y se definen a continuación:
- En línea: Permite agregar CSS dentro de una etiqueta HTML específica
- Interno: Se escribe un código CSS dentro de la etiqueta de cabeza (recomendada pero no necesaria) de una página HTML
- Externo: Un archivo CSS se realiza externamente definiendo todas las propiedades. Se agrega a la página HTML usando el <enlace> elemento
Hemos compilado esta guía para demostrar todas las formas posibles de agregar CSS a una página HTML.
Cómo agregar CSS a una página web
Esta sección describe brevemente los enfoques disponibles para agregar CSS a una página HTML.
Cómo agregar CSS en línea
Como sugiere el nombre de la técnica, le permite agregar CSS a un solo elemento HTML. El estilo Se ejerce el atributo de un elemento para hacerlo. Practicemos el ejemplo de subsidio para obtener una imagen más clara de CSS en línea:
Ejemplo
El código escrito a continuación agrega los estilos a una etiqueta HTML Pista de Linux
:
Pista de Linux
- El color de texto se establece en verde: para esto, el color propiedad del estilo Se utiliza el atributo
- El texto de
está centrado alineado: el texto alineado Se utiliza la propiedad
- El texto de encabezado se subrayará: para hacerlo, el decoración de texto La propiedad del atributo de estilo está establecida en subrayar.
La interfaz web de la página HTML declarada anteriormente se muestra a continuación:
Además de las propiedades indicadas anteriormente, pocos editores HTML muestran la lista desplegable de propiedades disponibles. Por lo tanto, se recomienda elegir su editor HTML sabiamente, ya que la mejor selección aliviará la forma de agregar CSS a la página HTML.
Cómo agregar CSS interno
El CSS interno se agrega utilizando el etiqueta dentro del Elemento de una página HTML. Digamos que queremos agregar varios estilos a cuerpo, párrafos, y divisiones utilizado en una página HTML.
La imagen que se muestra a continuación muestra las diversas propiedades que se agregan a varias secciones de la página HTML y todas estas propiedades se asignan utilizando el <estilo> elemento.
- El color de fondo del cuerpo será negro
- Los párrafos tendrán texto rojo, tamaño de fuente de 1em y texto alineado con la izquierda
- El color de las divisiones es la antigüedad y el ancho de las divisiones depende del ancho del texto que se utiliza:
La interfaz web utilizando las propiedades anteriores se muestra a continuación:
Cómo agregar CSS externo
El CSS se puede agregar a las páginas web haciendo un archivo CSS dedicado y luego llamándolo dentro de una página. El CSS externo es bastante útil cuando tiene que aplicar el mismo estilo a varias páginas HTML. Esta sección proporciona una publicación de procedimiento para crear y usar un archivo CSS externo:
Paso 1: crear un .archivo CSS
En primer lugar, abra su editor de código y haga un archivo con .CSS Extensión (o el editor puede ofrecer la opción de guardar como un archivo CSS). El archivo que estamos usando aquí se nombra como Linuxhintstyles hous y se crea de la siguiente manera:
Abrió un nuevo archivo en el editor:
Después de eso, haga clic en Guardar como:
Nombrado ese archivo con .Extensión CSS y CSS seleccionado como un tipo de archivo:
Paso 2: Agregue estilos al archivo CSS
Hemos agregado las siguientes propiedades de estilo:
- El color de fondo del cuerpo es cielo azul
- El H1 estará teniendo el blanco color
- Los párrafos tienen la familia de fuentes establecidas en serif y la decoración del texto contiene sobreline (línea sobre el texto) propiedad:
La siguiente imagen muestra el código que contiene los estilos establecidos anteriormente:
Paso 3: Agregue el archivo CSS al documento HTML
Después de crear y agregar estilos a un archivo CSS, ahora debe agregar el archivo a la página donde desea aplicar estos estilos. Queremos agregar Linuxhintstyles hous a Linuxhint Documento HTML:
El El elemento de HTML se utiliza para importar CSS archivo. Además, el rey y href La propiedad del elemento de enlace se ejerce para incrustar el archivo CSS. El rey El atributo define la relación entre el documento HTML y el archivo CSS. Mientras que el href La propiedad del elemento contiene el enlace al archivo CSS.
Una vez que los pasos anteriores se realicen correctamente, podrá cargar su página HTML con las propiedades declaradas anteriormente.
Conclusión
CSS es un idioma para hacer las páginas web (HTML/XML) presentables. CSS se puede agregar a las páginas web adoptando uno de los métodos mencionados en este artículo. El primer método utiliza el atributo de estilo de un elemento para agregar varias propiedades relacionadas con CSS. El método interno practica el lenguaje CSS utilizando el elemento en la etiqueta de la cabeza. Y el último método importa un archivo CSS externo a una página web específica. Todos estos métodos se utilizan para agregar CSS a una página web y la selección de un método depende del desarrollador de cómo tiene la intención de agregar estilos.