Guia CSS - para Principiantes

Guía CSS
Para principiantes
1/5
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de estilos
en cascada, este lenguaje nos permite darle estilos a
nuestro código HTML por medio de una regla de
estilos, que conlleva un selector, propiedad y valor. En
pocas palabras, servirá para darle estilos a nuestro
código HTML
DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

http://alexcgdesign.com/cursocss
Selector, Propiedad
y Valor
CSS es muy sencillo ,trabaja con bloques de estilos que
definen a que elementos se les aplicarán los estilos de
dicho bloque. Por medio de selector, propiedad y
valor.
Los selectores definen a que elemento vamos a
modificar, (por ejemplo un carro).
Las propiedades definen que estilo vamos a definir

a modificar o agregar, (por ejemplo el color).

El valor es el complemento de la propiedad y

definirá que estilo tendrá esa propiedad. (Si
tenemos un propiedad el valor para la propiedad
serían los colores: rojo, verde, azul, etc)

Selector, Propiedad
y Valor
Pongamos a prueba lo aprendido, y demos estilos a un
carro que tenga el color en rojo.

Selectores
Los selectores, es la primera parte de una regla CSS
define que elementos del HTML serán modificados,
todos los elementos del HTML que coincidan con el
selector se verán afectados por los estilos del selector.
Si el selector no encuentra ninguna coincidencia

entonces no aplicará ningún estilo.

Selector de
etiquetas (o de tipo)
Un selector de tipo, de nombre, o de etiqueta, es
conocido así porque selecciona una etiqueta
directamente del HTML mediante el nombre de la
etiqueta. El selector es el nombre de la etiqueta tal
cuál, sin ninguna modificación.
Seleccionará a todos los elementos con esa etiqueta.

Selector de clase
Selecciona a elementos por el nombre dentro del
atributo class (un elemento puede tener más de una
clase). Para seleccionar a un elemento por su clase,
debes poner primero un punto como prefijo y
posteriormente el nombre de la clase.

Selector de ID
Selecciona a elementos por el nombre dentro del
atributo ID. Para seleccionar a un elemento por su ID,
debes poner un hash # y posteriormente el nombre
de el ID. Los ID no se deben repetir, por lo que sólo se
usará para modificar a un elemento en especifico.

Selector universal
Permite seleccionar a todos los elementos en el
documento HTML. El selector universal se indica con
un * asterisco y selecciona a todos los elementos
dentro del HTML.

Selectores
combinadores
Se les llama selectores combinadores porque
combinan más de un selector. Permiten ser más
especifico sobre que elementos queremos seleccionar.

Combinador de
descendientes
Es representado por un espacio en blanco, combina 2
selectores o más donde el primer selector debe ser
ancestro del segundo selector, en pocas palabras el
segundo elemento debe estar dentro de el primer
elemento.

Veamos en que caso se cumpliría este selector de
descendientes:

> Combinador de
hijos directos
Este combinador es representado por un signo de
mayor que >, combina 2 selectores o más donde el
primer selector debe ser padre directo (contenedor
directo del segundo selector no debe haber un
elemento extra entre estos 2 elementos.

Veamos en que caso se cumpliría este selector de hijos
directos:

+ Combinador de
hermano adyacente
suma +, combina 2 selectores donde el segundo
elemento debe ser un hermano adyacente del primer
elemento, es decir debe ser el siguiente hermano del
primer selector. (únicamente selecciona al siguiente.)

Veamos en que caso funcionaría el selector
combinador de hermano adyacente.

~ Combinador de
hermanos generales
vriguilla ~, combina 2 selectores donde el segundo
selector debe ser un hermano siguiente al primer
selector.

Veamos en que caso funcionaría el selector
combinador de hermanos generales.

[ ] Selector de
atributos
En CSS podemos seleccionar elementos por medio de
sus atributos (ID, CLASS, HREF, SRC, entre otros), a esto
se les conoce como selectores de atributo. Esto se
hace poniendo el nombre del atributo entre corchetes.

El corazón de CSS
A continuación veremos el corazón de CSS, lo que
todos deberíamos de saber de CSS si o sí, conociendo
esto te aseguro que NO sufrirás con CSS.

Cascada.
Empecemos hablando de la cascada, CSS se llama así
porque significa hoja de estilos en cascada, esto quiere
decir que manejamos los estilos en cascada.
Pero, ¿Qué es la cascada? .
CSS se basa en 2 reglas para aplicar los estilos, la

cascada y la especificidad, conocer esto nos ayudará
bastante en nuestro camino en CSS.

¿Qué estilos se
aplicarán?
En el siguiente ejemplo tenemos 2 selectores, ambos
modifican a los mismos elementos, pero le dan 2
valores diferentes cada uno. ¿Qué color tendrá el
elemento con la clase title?

Aquí es donde entra la cascada, la cascada define que
estilos predominarán en caso de haber más de un
selector que cambie los mismos estilos de un mismo
elemento, la cascada nos dice que se últimos estilos
declarados. Entonces se aplicará el color steelblue.

¿Qué estilos se
aplicarán?
En el siguiente ejemplo tenemos 2 selectores, ambos
modifican a un elemento h1, únicamente que el primer
selector modifica al h1 directamente y el otro modifica
al h1 con la clase titile. ¿Qué color tendrá el h1?

Especificidad
La especificidad es el método primordial que define
que estilos se aplicarán, tiene mayor importancia que
la cascada. La especificidad es el valor que se le da a
los selectores en CSS, cada selector tiene un valor
diferente al otro, el selector con mayor especificidad es
el que se aplicarán los estilos.

Especificidad 0
Especificidad 1

Especificidad 10
Especificidad 100

¿Qué estilo se
aplicará?
Especificidad =11
Especificidad =100
Especificidad =21

¡Domina CSS como
NADIE!
Si quieres seguir aprendiendo CSS desde CERO, a un
NIVEL AVANZADO.
Accede a mi MEJOR CURSO DE CSS que he creado

hasta ahora, con más de 25 horas de contenido.
(Accede al curso por el precio de una Pizza)
¡Te regalo 2 cursos!
Una vez estés en el curso, contáctame por Instagram o
Twitter, compárteme una captura de tu inscripción y te
regalaré 2 cursos.
- CURSO Sass DESDE CERO

- Aprende a DIBUJAR CON CSS

Guia CSS - para Principiantes

Cargado por

Copyright:

Formatos disponibles

Guia CSS - para Principiantes

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia CSS - para Principiantes

Cargado por

Copyright:

Formatos disponibles

Guía CSS

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

Las propiedades definen que estilo vamos a definir

El valor es el complemento de la propiedad y

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

Si el selector no encuentra ninguna coincidencia

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

Pero, ¿Qué es la cascada? .

CSS se basa en 2 reglas para aplicar los estilos, la

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

DOMINA CSS (POR EL PRECIO DE UNA PIZZA):

Accede a mi MEJOR CURSO DE CSS que he creado

- CURSO Sass DESDE CERO

También podría gustarte