CSS es un lenguaje de estilo utilizado para modificar la apariencia de las páginas web. Es una de las tecnologías más notables que se utilizan para crear una página web. Ahora debe preguntarse cómo gobierna CSS el estilo? Bien! El CSS hace esto asegurándose de cómo aparecerán los elementos en una página web como su color de texto, color de fondo, estilo de fuente, etc. Por lo tanto, se debe seguir una estructura apropiada para escribir un código CSS efectivo.

Esta redacción presentará una guía paso a paso para comprender cómo se estructura CSS?

• la sintaxis básica del CSS.
• Cómo implementar CSS en un documento HTML.
• Cómo trabajar con selectores CSS seguido de la especificidad del selector.
• Espacios blancos en CSS.
• Comentarios en CSS.

Comencemos con la sintaxis de CSS.

Sintaxis de CSS

La sintaxis básica del CSS incluye un selector junto con su bloque de declaración. El bloque de la declaración consta de dos cosas que.mi. una propiedad CSS con su valor.

En la figura anterior, P es un selector que apunta a un párrafo de elementos HTML, el color es una propiedad CSS y el verde es el valor asignado a la propiedad de color.

Cómo aplicar CSS al documento HTML

CSS se puede aplicar a cualquier documento HTML de tres maneras.mi. Usar estilos en línea, usar una hoja de estilo interna o hojas de estilo externo. Este artículo explicará el funcionamiento de los tres métodos de estilo con la ayuda de ejemplos.

CSS en línea

El método de estilo en línea se utiliza más comúnmente para implementar un estilo único en un solo elemento. Por lo tanto, tenemos que usar el atributo de "estilo" en un elemento HTML para implementar cualquier propiedad CSS en el elemento especificado.

Ejemplo

El siguiente ejemplo implementa el estilo en línea en el

elemento:

CSS en línea

El código anterior establece el color del texto como rojo, el color de fondo como azul y alinea el texto en el centro:

CSS interno

El método de estilo CSS interno especifica el estilo en la etiqueta y dentro de la sección principal. Se utiliza para implementar algún estilo específico en toda la página.

Ejemplo Este ejemplo describe una hoja de estilo interno para todos los

elementos

CSS interno

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

La salida muestra que el estilo especificado en el elemento de estilo implementado en todos los

elementos:

CSS externo

Como su nombre en sí mismo sugiere, una hoja de estilo externa es un archivo CSS separado que se puede utilizar para diseñar todo el sitio web. En este caso, la referencia del archivo CSS externo se agregará al archivo HTML.

Ejemplo Este ejemplo define diferentes estilos para varios elementos HTML y estos estilos se implementarán utilizando una hoja de estilo externo.

Html

El archivo HTML incluye un enlace a un archivo CSS externo:

CSS externo

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

CSS

H2
Color: oro;
Color de fondo: negro;

pags
Color naranja;
Color de fondo: Seagreen;
Text-Align: Center;

El código anterior producirá la siguiente salida:

Concluyamos lo que hemos aprendido en esta sección, use CSS en línea solo si tiene que diseñar solo unos pocos elementos HTML, en línea no se considera un buen enfoque porque en caso de mantenimiento tal vez tenga que editar varias cosas para un estilo. Use estilo interno para sitios web de una página, sin embargo, cuando trabaja en un sitio web amplio que tiene más de una página, use una hoja de estilo externo.

Selectores CSS

Los selectores se utilizan objetivo de los elementos HTML que desea peinar y hay múltiples tipos de selectores CSS como:

• CSS selector de elementos Se dirige a los elementos HTML en función de su nombre.
• CSS Selector de identificación Se dirige a los elementos HTML en función de su identificación.
• CSS selector de clases Se dirige al elemento HTML basado en un atributo de clase.
• CSS selector universal Se dirige a todos los elementos presentes en la página.

Ejemplo El estilo de código dado a continuación diferentes elementos HTML I.mi. H2 y P utilizando el selector de elementos, el selector de clases y el selector de ID respectivamente.

Html

H2 usando el selector de elementos

párrafo usando el selector de clases

Párrafo usando el selector de identificación

CSS

H2
Color de fondo: negro;
Color: Goldenrod;
Text-Align: Center;

.estilo
Color de fondo: negro;
color verde;
Text-Align: Center;

#style1
Color de fondo: negro;
color rojo;
Text-Align: Center;

Obtendremos la siguiente salida:

Especificidad

A veces ocurre un choque yo.mi. Dos selectores/estilos dirigidos al mismo elemento HTML lo que sucederá en tal caso y qué selector obtendrá la preferencia. Bien! Tenemos una regla general de especificidad

• !importante tiene una mayor especificidad, por lo que anulará todo
• En línea tiene una segunda especificidad más alta, por lo que puede anular todo excepto el !importante
• El selector de identificación tiene una mayor especificidad entre otros selectores pero más bajo que !importante e en línea
• Siguiente viene el selector de clases, selector de atributos y pseudo-clase
• Selector de elementos y pseudo-elementos
• Universal selector tiene la especificidad más baja
• Si la misma regla se repite en una hoja externa, la última se implementará

Entendamos la especificidad con un ejemplo:

Ejemplo El siguiente ejemplo dado explicará el concepto de especificidad.

Html

Bienvenido a Linuxhint.comunicarse

Ejemplo de especificidad

CSS

pags
Color naranja !importante;

#style1
color rojo;

.estilo
color verde;

pags
color azul;

H1
color azul;

H1
color verde;

La salida será:

En el ejemplo anterior observamos los siguientes puntos:

• El

  El elemento está dirigido a !importante, identificación, clase y selector de elementos pero el

  El elemento tiene el estilo de acuerdo con el !importante que muestra que !importante tiene la mayor especificidad.

• Hay dos selectores de elementos diferentes para definir dos estilos diferentes para el

  Elemento, el selector de elementos que llega al final tiene la prioridad.

Para una mejor comprensión, baraja el orden de los selectores y observa la diferencia!

Espacios blancos en CSS

En CSS, los navegadores ignoran los espacios blancos, sin embargo, el uso correcto de los espacios blancos puede mejorar la legibilidad del código.

Ejemplo: Este ejemplo explica cómo los espacios/ rupturas de línea blancas aumentan la legibilidad del código:

Html

H2 usando el selector de elementos

Ejemplo de especificidad

CSS

.estilo
Color de fondo: negro; color verde; Text-Align: Center;

#style1
Color de fondo: negro;
color rojo;
Text-Align: Center;

En el selector de clases, todo el código está escrito en la misma línea, mientras que en el selector de identificación escribimos cada propiedad en una nueva línea. WhiteSpaces/Line Breaks aumenta la legibilidad del código. La salida verifica que al navegador no le importa cómo escribió el código y ambos selectores ejecutados correctamente:

Comentarios en CSS

En CSS, todas las secciones comentadas se encerrarán dentro de "/*" y "*/". Todo lo que viene dentro de los comentarios será descuidado por el navegador. Se pueden agregar algunos detalles adicionales en los comentarios para comprender el código.

Ejemplo Este ejemplo agregó algunos comentarios que nos ayudarán a comprender el código.

Html

Primer párrafo

Segundo parrafo

CSS

/* Selector de clase*/
.estilo
Color de fondo: negro;
Color naranja;
Text-Align: Center;

/* Id Selector*/
#style1
Color de fondo: negro;
color rojo;
Text-Align: Center;

El código anterior genera la siguiente salida:

La salida verifica que los comentarios proporcionen una mejor comprensión del código sin afectar los resultados.

Conclusión

La estructura básica de CSS incluye la sintaxis básica de seleccionar el elemento HTML usando selectores CSS y diseñar el elemento seleccionado usando propiedades CSS.CSS se puede implementar en un archivo HTML de tres maneras.mi. Estilización en línea para establecer el estilo para un elemento específico, el estilo interno usando la etiqueta y agregar archivo CSS externo.

Este artículo analiza todos los conceptos básicos para estructurar un archivo CSS. A partir de la sintaxis básica del CSS y después, explica los diferentes tipos de selectores CSS y CSS. Además, explica el concepto de especificidad en CSS y concluye que entre todos los selectores de Selectores de CSS tiene una mayor especificidad. Finalmente, explica la importancia de los comentarios y los espacios blancos en CSS.