CSS acrónimo de "Hoja estilo cascada"Es un lenguaje de diseño que define cómo diseñar una página web llamativa. Describe la apariencia y el formato de un sitio que se crea en un lenguaje de marcado. Por lo general, el CSS se usa junto con HTML para establecer los estilos de sitios web e interfaces de usuario.

Hoja estilo cascada

En cascada significa mirar, Estilo significa diseño en el elemento HTML/ Agregar estilo a los documentos web y Hoja Medios de la página E.gramo. documento de la página web.

Tipos de CSS

CSS se puede usar de tres maneras:

• CSS en línea: El CSS en línea implementa el estilo en una línea.
• CSS interno: El CSS interno Aplicar un estilo específico en una sola página.
• CSS externo: El CSS externo es un archivo separado y puede ser utilizado por múltiples documentos/páginas HTML.

Para este propósito, simplemente importe el enlace externo del archivo CSS dentro de la sección principal.

Sintaxis CSS

Echemos un vistazo al siguiente estilo CSS para tener una mejor comprensión de la sintaxis CSS:

En el fragmento dados anteriormente, P es un selector que apunta a un elemento HTML que desea diseñar. Mientras que "Background-Color" es una propiedad, y "Gold" es su valor.

De manera similar, el "tamaño de la fuente" y el "alineado de texto" son propiedades, mientras que "medio" y "correcto" son valores de estas propiedades.

Ejemplo 1: Este ejemplo le proporcionará una visión en profundidad de cómo funciona CSS en línea:

Bienvenido a Linuxhint.comunicarse

El mejor sitio para leer artículos de alta calidad

El script anterior implementó algún estilo en el primero

elemento usando CSS en línea. Mostrará la siguiente salida:

En este ejemplo, solo tenemos dos

elementos y tenemos que implementar el estilo en un solo elemento, por lo que utilizamos el CSS en línea. Entonces, siempre que tengamos que diseñar algunos elementos HTML, podemos usar CSS en línea para cada elemento.

Pero, ¿qué pasa si tenemos cientos de elementos HTML en una página E.gramo. Tenemos cien

Por lo tanto, cuando tengamos que implementar un estilo único en toda la página, utilizaremos el CSS interno.

Ejemplo-2: El siguiente ejemplo implementará el mismo color de fondo, color de texto en todo el cuerpo del documento HTML:

Bienvenido a Linuxhint.comunicarse

El mejor sitio para leer artículos de alta calidad

El fragmento anterior proporcionará la siguiente salida:

Ahora, ¿qué pasa si tenemos que diseñar más de una página?? En tales casos, se implementará el CSS externo. Solo un solo archivo puede modificar el aspecto completo del sitio web. Por lo tanto, se recomienda que siempre use CSS externo.

Si está trabajando con CSS externo, debe determinar el en el sección.

Ejemplo-3: Este ejemplo creará un archivo CSS para definir el estilo. El enlace a este archivo se proporcionará en la sección principal. Tanto los archivos HTML como los CSS son dados-Below:

Externo.html

Bienvenido a Linuxhint.comunicarse

El mejor sitio para leer artículos de alta calidad

Externo.CSS

cuerpo
Color de fondo: marrón;
Color: Goldenrod;
estilo de fuente: cursiva;

H1
de color negro;
Text-Align: Center;

La salida verificará que el archivo CSS externo esté vinculado con el archivo HTML correctamente:

Pedido de estilo cascade

Ahora podrías tener una pregunta? ¿Qué pasa si usamos estilos CSS en línea, internos y externos en una página web?? Entonces cuál de ellos se implementará? ¿Qué estilo tiene la máxima precedencia??

Bien! Si hay un conflicto en la declaración de estilo CSS, entonces CSS en línea anulará CSS interno que a su vez anulará el CSS externo. Esto significa que el CSS en línea tiene mayor precedencia que el CSS interno y externo. Los estilos predeterminados del navegador tienen la precedencia más baja.

Si los diversos estilos CSS se determinan en el mismo nivel de precedencia, entonces el estilo que está más cerca del elemento objetivo tendrá una precedencia más alta.

Ejemplo-4: Consideremos el siguiente ejemplo que determina los estilos múltiples:

Externo.Archivo CSS

cuerpo
Color de fondo: marrón;
Color: Goldenrod;
estilo de fuente: cursiva;

Precedencia.Archivo html

Bienvenido a Linuxhint.comunicarse

El mejor sitio para leer artículos de alta calidad

El código anterior determina tres estilos que la salida verificará que el CSS en línea tiene la mayor precedencia:

Ventajas

1. Ahorra mucho tiempo al desarrollar cualquier página web porque podemos usar un archivo CSS dentro de varios archivos HTML. Por ejemplo, tenemos múltiples archivos HTML, entonces tenemos que lidiar con su aspecto, estilo, etc. En lugar de implementar el estilo en cada archivo HTML por separado, es mejor importar el archivo CSS en cualquier documento HTML que desee diseñar.
2. Las páginas web se cargan rápidamente porque CSS no utiliza los atributos HTML una y otra vez, en su lugar, crea solo una regla CSS para una etiqueta y la implementa a todas sus ocurrencias en el archivo HTML.
3. CSS proporciona un mantenimiento fácil, ya que podemos manejarlo en un solo archivo. Supongamos que tenemos diez párrafos en un documento y queremos cambiar su estilo. En lugar de hacerlo diez veces, podemos hacerlo una vez en el archivo CSS y se aplicará a los diez ocurrencias del

   elemento.

4. CSS proporciona compatibilidad. Esto significa que es compatible con múltiples dispositivos.

Conclusión

CSS es un lenguaje de diseño que construye páginas web atractivas. Se utiliza para crear estilos y personalizar elementos HTML disponibles en una página web. Mejora la velocidad del sitio y proporciona una fácil personalización de cualquier página web.

En esta publicación, llegará a saber qué es CSS, cómo usar CSS y cuáles son las ventajas clave de CSS. Además, aprenderá sobre el orden de precedencia de estilos en cascada.