CSS significa "Hoja estilo cascada". Es un idioma utilizado para definir la presentación de páginas web. Se utiliza principalmente para estructurar y diseñar las páginas HTML, como ajustar el tamaño de la fuente, el borde del elemento, la posición y muchos más. Más específicamente, CSS es una parte importante del desarrollo web que hace que las páginas web sean atractivas y fáciles de usar.

Esta publicación discutirá los conceptos básicos de CSS y sus usos.

¿Para qué se usa CSS??

CSS se utiliza para especificar el diseño y el estilo de las páginas web. Controla el estilo de una página web con la ayuda de muchas propiedades CSS.

Tipos de CSS

Los siguientes tres tipos de CS son:

• CSS en línea
• CSS externo
• CSS incrustado

¿Qué es en línea CSS??

En HTML, un CSS en línea está integrado directamente con el elemento con la ayuda del "estilo" atributo. Se utiliza para ajustar el estilo único a un elemento en particular.

Ejemplo
El siguiente ejemplo demuestra una página HTML que aplica un CSS en línea al "

" elemento:

Linuxhint

Aquí está la explicación de las propiedades CSS mencionadas anteriormente dentro del "estilo" atributo:

• "color"Define el color de la fuente.
• "Familia tipográfica"Aplica el estilo de fuente.
• "texto alineado"Establece la alineación del texto en el lado central, izquierdo o derecho.
• "tamaño de fuente"Determina el tamaño de la fuente del elemento.

Producción

¿Qué es CSS incrustado??

Cuando las propiedades CSS se declaran en el "El elemento del documento HTML, este tipo de CSS se conoce como CSS incrustado.

Ejemplo
En el ejemplo proporcionado, tenemos CSS incrustado en HTML:

Linuxhint

Se puede observar que hemos accedido al HTML "

"Elemento por nombre de la etiqueta y aplique las propiedades Color, Font-Family, Text-Alignment y Font-Size CSS, como se discutió anteriormente.

Producción

¿Qué es CSS externo??

La hoja de estilo externo se refiere al CSS externo, que está escrito en un archivo separado. Este archivo CSS se vincula luego al archivo HTML utilizando el ""Elemento en la sección de la cabeza.

Ejemplo
Primero, cree un archivo HTML y especifique el ""Elemento junto con los atributos" Rel "y" Href ". El "rey"El atributo especifica la relación entre HTML y el documento vinculado, y el"hrefEl atributo se utiliza para definir la fuente del archivo:

Linuxhint

CSS
Agregue el siguiente fragmento del código en el "estilo.Archivo de CSS ":

H1
Color: Darkred;
Font-Family: Fantasy;
Text-Align: Center;
tamaño de fuente: 60px;

Producción

¿Qué son los selectores de CSS??

Los elementos HTML que desea estilo se pueden seleccionar utilizando un selector CSS. Algunos de los selectores utilizados principalmente en CSS se enumeran a continuación:

• Selectores simples
• Selectores de pseudo-clase
• Selectores de atributos
• Selectores de combinadores
• Selectores de pseudo-elementos

Tomemos un ejemplo de algunos selectores para una mejor comprensión.

Ejemplo: cómo usar selectores CSS simples?
Los selectores simples seleccionan los elementos basados ​​en la ID, el nombre o la clase. Los bloques de código a continuación demuestran el ejemplo de selectores simples:

• Agrega un ""Elemento con la clase"caja".
• Luego añade "

  "Elemento dentro del" ":

Linuxhint

Selector de identificación de CSS
El selector de identificación se refiere al "identificación"Atributo de un elemento. En CSS, el "#"Se escribe el símbolo para seleccionar el elemento por ID.

ID de estilo "encabezado"

#título
Color: Darkred;
Font-Family: Fantasy;
tamaño de fuente: 60px;

Selector de clases CSS
El selector de clase CSS selecciona los elementos que tienen particular "clase"Atributos. En CSS, la clase se accede por el "."Símbolo antes del nombre de la clase.

Clase de estilo "Box"

.caja
Ancho: 300px;
borde: 5px RGB sólido (214, 214, 214);
margen: auto;
Text-Align: Center;
Color de fondo: RGB (255, 227, 218);

El ".caja"Se usa para acceder al"cajaClase "y asigne las siguientes propiedades:

• "ancho"Ajusta la amplitud del elemento.
• "bordeLa propiedad se utiliza para agregar un borde alrededor del elemento.
• "margen"Genera espacio alrededor del elemento.
• "texto alineado"Establece la alineación del texto.
• "color de fondo"Establece el color de fondo.

Producción

Eso fue todo lo básico de CSS.

Conclusión

La hoja de estilo CSS o en cascada describe la apariencia de un documento HTML. Proporciona cientos de propiedades de estilo para elementos HTML que se pueden aplicar utilizando el CSS en línea, CSS incrustado y CSS externo. En CSS, el elemento HTML es seleccionado por varios selectores CSS, como el selector de ID, el selector de clases, etc. Esta publicación ha demostrado para qué se usa CSS.