Lo vamos a neCSSitar
Aprenderemos desde los conceptos básicos de CSS hasta los conceptos más avanzados
Cuando creamos código HTML, el navegador se encarga de darle una apariencia por defecto, la cual no es muy llamativa.
Para cambiar esto, el lenguaje CSS nos ayuda a darle estilo a los diferentes elementos que componen nuestro sitio web.
CSS viene del inglés Cascading Style Sheets u Hojas de Estilo en Cascada.
Una de las formas de agregar estilos a nuestros elementos HTML es desde la etiqueta de apertura, utilizando el atributo style
. Dentro podemos escribir una o más reglas de CSS.
<p style="color:pink;">Contenido</p>
Las reglas están compuestas por una propiedad y un valor, entre ellos deben existir el símbolo dos puntos (:
), y al final debe ir el símbolo punto y coma (;
).
propiedad: valor;
En el ejemplo inicial tenemos un estilo con una sola propiedad:
color
, que tiene el valor pink
.Aunque en realidad podemos usar varias propiedades dentro style
, por ejemplo:
<p style="color:pink;font-size:32px;">Contenido</p>
Esta vez agregamos dos propiedades, cada una con su propio valor.
Los valores que podemos usar dependen de cada propiedad1.
Por ejemplo:color
, acepta diferentes formatos de color:
pink
)#ffc0cb
)rgb(255, 192, 203)
)color: pink;color: #ffc0cb;color: rgb(255, 192, 203);
Otro ejemplo sería font-size
, que acepta diferentes formatos de tamaños o medidas:
32px
)2rem
)large
)font-size: 32px;font-size: 2rem;font-size: large;
Existe una gran cantidad de propiedades2. Dependiendo del sitio donde consultes el número puede variar pero son cientos de ellas.