Aprenda los conceptos básicos de CSS en un minuto

CSS significa Hoja de estilo en cascada. CSS especifica cómo se deben mostrar elementos HTML en la pantalla. En otras palabras, CSS describe la presentación de páginas web. Proporciona diferentes propiedades de estilo a los elementos HTML, como el color de fondo, el estilo de fuente, el color y muchos más. También permite especificar cómo se ve la página web en diferentes tamaños de pantalla.

Este blog se trata de:

• Cómo definir las propiedades CSS?
• ¿Cuáles son los tipos de selectores CSS??
• Diferentes formas de definir las propiedades de CSS
• Cómo usar CSS en línea?
• Cómo usar una hoja de estilo incrustada?
• Cómo usar una hoja de estilo externo?

Cómo definir las propiedades CSS?

Para definir las propiedades de CSS para los elementos HTML, se puede utilizar la siguiente sintaxis:

selector
El valor de la propiedad;
El valor de la propiedad;

Aquí:

• El primer componente de una regla CSS es un CSS "selector". El selector especifica qué elementos HTML deben seleccionarse para aplicar propiedades CSS.
• Dentro de su cuerpo, las propiedades se definen con sus valores respectivos.

¿Cuáles son los tipos de selectores CSS??

Los selectores son de tres tipos que se definen a continuación:

Selector de elementos
El selector CSS de elementos se usa para aplicar las propiedades CSS a los elementos que tienen nombres de etiquetas específicos:

H1
color azul;

En el ejemplo anterior, el "H1"Es el elemento de encabezado.

Selector de clases
El selector de clases selecciona todos los elementos que pertenecen a la clase mencionada y luego les aplica las propiedades CSS agregadas:

.contenido principal
Ancho: 300px

Según el código dado, la propiedad de ancho se aplicará al elemento que tiene el nombre de la clase ".contenido principal".

Selector de identificación
SELECTORES DE ID Seleccione un elemento particular basado en su ID:

#paraca
Text-Align: Center;

Nota: En los ejemplos anteriores, el "color","ancho", y "texto alineado"Son las propiedades.

Cómo usar CSS en línea?

CSS en línea se refiere al CSS cuando se aplica directamente a nuestros elementos HTML. Para hacer esto, use el "estilo"Atributo dentro de la etiqueta de apertura del elemento y luego incluir propiedades.

Mira el ejemplo dado:

HOLA MUNDO!

Producción

Cómo usar la hoja de estilo integrado?

Para incrustar una hoja de estilo CSS en el archivo HTML, utilice el ""Elemento dentro de la sección Head para especificar las propiedades de la siguiente manera:

Producción

Cómo usar una hoja de estilo externo?

Si el proyecto contiene múltiples archivos, es mejor hacer una hoja CSS externa con la extensión ".CSS". Luego, utilícelo en el proyecto agregando un enlace a la hoja CSS externa en los archivos HTML.

Por ejemplo, el elemento se proporciona en la sección principal del archivo HTML como este:

Dentro de la hoja de estilo externo, agregue el código:

pag
tamaño de fuente: 30px;
color morado;
Font-Weight: Bold;
Text-Align: Center;

El código anterior se mostrará como se indica a continuación:

Eso se trataba de lo básico de CSS.

Conclusión

Tres formas de definir las propiedades de estilo para los elementos HTML son CSS en línea, CSS interno y CSS externo. Para aplicar propiedades de estilo a los elementos, puede usar selectores, como selectores de elementos, selectores de clase y selectores de ID. Luego, especifique las propiedades con sus valores dentro de los soportes rizados de los selectores. Este blog ha discutido los conceptos básicos de CSS con ejemplos.