¡¡Bienvenido a CSS!!

Luego de sumergirnos en el mundo de HTML todo empieza a parecer feo, rígido y

cuadrado. Después de todo hay que recordar que HTML fue hecho por científicos, no
estamos diciendo que es feo por eso, seguramente hay científicos que hacen cosas
hermosas (además, fueron los mismos científicos que descubrieron el Bosón de Higgs y
por eso hay que alabarlos hasta nuestra muerte), pero… definitivamente… es así de feo ,
porque fue hecho por científicos con un propósito muy diferente al que HTML cumple hoy
en día.

Pero… El internet es más hermoso que eso. La cosa se puso seria cuando Internet
empezó a hacerse más y más popular. Dejó de ser utilizado únicamente por la comunidad
científica y el ejército; ¡comenzó a ser adoptado por todo el mundo!

Irónicamente, los mismos científicos de CERN que crearon HTML, tuvieron que ponerse a
pensar en cómo mejorar lo que habían hecho y se dieron a la tarea de embellecerlo. En
este momento fue cuando Håkon Wium Lie, propuso la primera versión de CSS en 1994,
que luego fue adaptado hasta convertirse en CSS1.

Entonces, ¿qué hace CSS y para qué sirve?

La principal razón por la que se creó fue para aplicar estilos a los documentos de HTML.
La idea es que puedas decirle al navegador cómo debe visualizar un documento HTML:
cómo deben verse sus etiquetas, colores, márgenes, tipografía, iconos, bordes, etc.
Incluso puedes redefinir a tu antojo los comportamientos originales de esas etiquetas ya
existentes. Ej:
 1Puedes decirle a un <h1> que se vea igualito que un <h2> sin que el usuario
se dé cuenta de que, a simple vista, son distintos.

¿Cómo aplicar estilos a un HTML?

Sencillo, debes escribir tus estilos con una sintaxis especial denominada "CSS" y guardar
el documento con la extensión CSS. Luego, para aplicar los estilos al documento usamos
las tags del HTML que estaban relacionadas con CSS: <style> y <link> .

Vamos a repasar estas tags con más detalle:

Nombre Etiqueta Descripción

Link <link> Tiene como finalidad enlazar a la página con

hojas de estilos CSS. Para utilizarla debes
especificar tres propiedades dentro de la etiqueta
rel="stylesheet" type="text/css" y
por último href="with document route
css"

<link rel="stylesheet"
type="text/css" href="[Link]"/>

Style <style> Si no queremos o no podemos importar una hoja

de estilo CSS, tenemos la posibilidad de definir
estilos en el HEAD del documento HTML.
Simplemente definimos el tag style y procedemos
a escribir los estilos que queremos para las
etiquetas.

<style>

h1 {color:red;}

p {color:blue;}

</style>
Sintaxis de CSS
La sintaxis de CSS no tiene absolutamente nada que ver con la sintaxis de HTML, es su
propio lenguaje de programación específico. CSS ¡no utiliza etiquetas! Para trabajar con
un sitio web tienes que cambiar el switch en tu mente a menudo, porque trabajarás con
varios lenguajes a la vez y cada uno tiene su propia sintaxis.

Una hoja de estilos CSS es una gran lista de definiciones de estilos para cada elemento
HTML. Primero debes especificar a que elemento - o grupo de elementos - le vas a colocar
estilos, a eso se le denomina SELECTOR. Luego, colocas una llave { para indicar que vas
a empezar a definir cada propiedad y su respectivo valor, y finalizas cerrando con otra llave
}. Siempre debes terminar cada definición de propiedad con un punto y coma.

Revisa la animación para entenderlo mejor.

El siguiente ejemplo, es una hoja de estilos que define 3 grupos diferentes de estilos
(#id-selector, .class-selector, tag-selector); y a cada uno de estos grupos se le han aplicado
diferentes reglas como: color, tamaño de letra o color de fondo.

Debes hacer coincidir los elementos HTML con los grupos de estilos y usar "selectors"
para vincular los elementos HTML a los grupos de reglas CSS.
Pero, ¿qué es un “selector”?
Un selector es una manera de referirse o identificar uno o varios elementos de HTML. Por
ejemplo, si quieres cambiar el color de una página web a rojo debes hacerlo de la siguiente
manera:

1 body {
2 color: red;
3 }

También puedes cambiar el color de un sólo <a>. Para hacer esto, debes definir la
propiedad de clase o un id de la etiqueta HTML que define ese link en particular <a
class="anchor1">. Las clases se usan más que los IDs debido a que las clases son
reutilizables y los IDs se usan más en Javascript. Una vez que esa etiqueta tenga una
clase, entonces puedes ir a tu hoja de estilos y definir un color de la siguiente manera:

1 .anchor1 {
2 color: red;
3 }

La siguiente tabla contiene una lista de todos los posibles selectores disponibles en CSS.
Revísala con calma para que entiendas todas las posibilidades que tienes para aplicarle
estilos a un documento HTML:

Selector por ID

Selector Descripción Ejemplo

#element_id Permite aplicar estilos a un #element_id { color:

elemento en particular. red; }
Selector por Clase (class)

Selector Descripción Ejemplo

.classname Existe un atributo en HTML que se llama .classname {

"class" y permite agrupar diferentes color: #BDBDBD; }
etiquetas en un grupo lógico. En CSS se
puede utilizar . (punto) como un selector
de todos los elementos que usen esa
clase y seleccionar todos los elementos
html con el atributo de esa clase.

Selector por etiqueta (Tag)

Selector Descripción Ejemplo

Tipo de Elemento Permite aplicar estilos a los links, títulos, etc. a {

(tag) En el siguiente ejemplo cambiaremos el color color:
de texto a todos los tag links <a> de la página. #BDBDBD;
}

Multiselector

Selector Descripción Ejemplo

selector1, Si separas varios selectores por coma , puedes h1,

selector2 asignar múltiples selectores a la vez para ahorrar .impar {
texto. En el siguiente ejemplo le decimos a todos los color:
h1 y a los elementos de clase .impar que queremos #BDBDBD;
su texto de color rojo. }
Pseudoselectores relacionados con enlaces
1a:link{color: green;}
2a:visited{color: yellow;}
3a:hover{color: blue;}
4a:active{color: red;}

Puedes cambiar los colores de cualquier elemento <a> de un sitio web, dependiendo de su
estado:

●​ :link será el predeterminado.

●​ :visited es autoexplicativo.
●​ :hover cuando el cursor está encima.
●​ :active cuando el cursor hace clic en él.

Selectores avanzados

Con estas 4 maneras de seleccionar vas a cubrir el 99% de tus necesidades, lo importante
es tomarte el tiempo para planificar tus hojas de estilos.

Hay otros selectores más específicos y avanzados. Probablemente lo usarás cuando estés
realizando algo más desafiante.

Conflictos y herencia
¿Qué pasa si un elemento de la página está seleccionado por dos selectores y tiene
asignado el color de letra verde en una definición y rojo en la otra? Es decir, si le decimos
al navegador dos colores diferentes, ¿qué color utilizará al final?

Tienes que entender muy bien la jerarquía de CSS para comprender como los elementos
heredan, sobre escriben y hasta anulan estilos entre ellos.
El navegador le da prioridad a los selectores más específicos, como al #id, que a los
selectores generales, como los tags (etiquetas). En el siguiente ejemplo, cambiamos el
color de todos los <li> (los elementos de la lista) a azul, y luego cambiamos el texto del
segundo elemento a color rojo. De esta manera demostramos que el selector ID siempre
prevalece por encima de los otros elementos, esto se debe a que pertenecen a la misma
etiqueta.

Propiedades
Ya vimos que una hoja de estilos CSS no es más que una lista que define las propiedades
que queremos asignar a los diferentes elementos de la página. Ahora veremos cuáles
podemos asignar a estos elementos.

Hay cientos - sino miles - de propiedades, pero dependiendo del tipo de elemento/etiqueta
que queremos definir, sabremos en cuáles debemos enfocarnos.

Editando tipografía

Propiedad Descripción Valores

font-family tipo de letra name-font | generic-family

(fuente)

font-size tamaño de letra tamaño-absoluto | tamaño-relativo | distancia |

porcentaje

font-style inclinación normal | italic | oblique

(italics)
Editando texto

Propiedad Descripción Valores

color color del texto color

letter-spacing espacio entre normal | distancia

caracteres

line-height espacio entre líneas normal | número | distancia | porcentaje

text-align alineación del texto center | justify | left | right

text-decoratio decoración del texto none | line-through | overline | underline

n

text-transform mayúsculas / none | capitalize | lowercase |

minúsculas uppercase
Editando listas

Pro Descripción Valores

pied
ad

list- propiedad list-style-image || list-style-position || list-style-type

styl compuesta
e (suma de toda
combinación
de
propiedades)

list- imagen de none | url

styl viñeta
e-im
age

list- posición de la inside | outside

styl viñeta
e-po
sitio
n

list- tipo de viñeta none | circle | disc | square | decimal | decimal-leading-zero

styl | lower-alpha | upper-alpha | lower-greek | lower-latin |
e-ty upper-latin | lower-roman | upper-roman | armenian |
pe georgian | hebrew(-) | cjk-ideographic(-) | hiragana (-) |
katakana (-) | hiragana-iroha(-) | katakana-iroha(-)
Editando tablas

Propiedad Descripción Valores

border-collaps modo de bordes collapse | separate

e

border-spacing separación entre celdas distancia |

distancia

caption-side posición de la leyenda top | bottom

empty-cells borde de casillas vacías hide | show

table-layout algoritmo ancho de auto | fixed

tabla
Editando fondos (background)

Propiedad Descripción Valores

backgroun color de fondo transparent | color

d-color

backgroun imagen de fondo none | url

d-image

backgroun posición de la [left | center | right | distancia | porcentaje] [top |

d-position imagen de fondo center | bottom | distancia | porcentaje]

backgroun repetición de la no-repeat | repeat | repeat-x | repeat-y | space |

d-repeat imagen de fondo round

backgroun tamaño de la auto | [distancia | porcentaje] | contain | cover

d-size imagen de fondo