CSS

Qué es:

Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. CSS describe como debe ser dibujado el elemento estructurado en la pantalla.

Conectar HTML y CSS

• <style></style>
• atributo "style"
• @import url()

Sintáxis

La sintaxis CSS está compuesta por 6 elementos:

1. Regla CSS: Es todo el bloque CSS que modifique un elemento en específico.
2. Selector: Indica a que elemento HTML se le aplicaran los estilos.
3. Propiedades: Indican en que aspecto serán modificados los estilos.
4. Valores: son aquellos que serán asignados a las propiedades del elemento HTML.
5. Declaraciones: Es el conjunto de propiedad y valor, separado con un ; de la siguiente declaración.

.selector {
	propiedad1 : valor;
	propiedad2 : valor;
	propiedad3 : valor;
}

Espacios, indentaciones y saltos de línea no son parte de la sintaxis de CSS.

6. Comentarios en CSS. Sirven para documentar nuestro código CSS. Los comentarios son ignorados al momento de renderizar nuestros estilos.

Su sintaxis básica es la siguiente:

/* Esto es un comentario. Será ignorado al momento de renderizar estilos */

/* Los estilos se van a aplicar a los párrafos del documento */
p { 
   color : green; /* el texto se va a escribir en color verde */
   background: silver; /* el fondo del párrafo va a ser color plata */
}

Variables CSS o custom propierties

Las variables en el mundo de la programación es una forma de guardar datos en la memoria y poder hacer uso de los mismos a través de su nombre.

:root{
	--colorfondo: red; /*Declarar la variable*/
}

h1 {
	background: var(--colorfondo) /*Utilizar la variable*/
}

Selectores

1. Estilos del navegador

2. Selectores

• Tipos
• Case sensitive

4. Selectores simples: etiqueta

5. Selectores simples: clases

No pueden comenzar por número

Pueden comenzar con guiones o guiones bajos

Puedes usar emojis

6. Selectores simples: Id

No pueden comenzar por número

Pueden comenzar con guiones o guiones bajos

Puedes usar emojis