Que es css
CSS significa Cascading Style Sheets, y es el lenguaje que se usa para aplicar cambios
estéticos a los documentos HTML.
Con CSS vamos a componer hojas de estilo (archivos separados con extensión ".css")
que indicarán cómo se verán los distintos elementos ( <p>, <h1>, <ul>, etc. etc.) de uno
o más documentos HTML.
una breve historia del lenguaje: historia del lenguaje.
Volviendo a la metáfora de la casa, si HTML servía para construir las paredes y la
estructura de la casa, CSS sirve para decorarla y hacer que se vea espectacular. Noten
que una misma casa puede estar decorada de formas totalmente distintas y tomar
apariencias muy variadas. Lo mismo ocurre con CSS. El sitio CSS Zen Garden nos da un
ejemplo excelente de esto: a partir de un mismo documento HTML, nos muestra
muchísimas alternativas de como presentarlo usando CSS. Verán que cada estilo hace
que la misma página se vea totalmente diferente, e incluso tenga efectos increíbles.
En adelante vamos a usar los términos "hoja de estilos", "stylesheet" y ".css"
indistintamente. Todos refieren al archivo que contiene las reglas css que aplicamos a
nuestro(s) html.
Cómo escribir CSS
La sintaxis básica de CSS se compone de la siguiente manera:
Un selector, es decir un comando que selecciona uno o más elementos del
documento HTML, por ejemplo, el <body>, los <p>, etc.
Al selector le siguen llaves { } que contienen los estilos (cambios estéticos) que queremos
darle a los elementos seleccionados.
Dentro de las llaves se escribe una propiedad css que queremos modificar (el color, el
tamaño de la letra, etc.) y un valor para esa propiedad, separados por dos puntos (:)
Pueden enumerarse muchas propiedades a modificar al mismo tiempo, separándolas
con un punto y coma (;)
El código se ve de esta forma:
selector {
propiedad: valor;
otraPropiedad: valor;
}
Todo el código CSS que escribamos va a seguir esta estructura
Para no colmar de forma confusa código dentro del documento HTML, la forma correcta
de incorporar CSS en nuestro HTML es usando el tag <link>. Dicha etiqueta, trae las
reglas CSS contenidas en un documento externo y tiene 3 atributos clave que tenemos
que escribirle (en realidad tiene más, pero vamos a limitarnos a estos para nuestro
propósito):
Ej:
<link href='mis_estilos.css' rel='stylesheet'
type='text/css'>
LO CORRECTO ES ESCRIBIR EL CÓDIGO EN UN ARCHIVO .CSS EXTERNO Y VINCULARLO AL
DOCUMENTO HTML
El atributo href, que indica la dirección de donde vamos a traer el archivo con las
reglas CSS. Esta dirección va siempre entre comillas, al igual que lo hacíamos en el
tag <a> que usábamos para crear links.
El atributo rel, que siempre lleva el valor "stylesheet", indicando que el archivo que
estamos trayendo es una hoja de estilos CSS.
El atributo type, que siempre lleva el valor 'text/css' indicando que el contenido que
traemos será texto y reglas CSS.
Separación de Tareas
Como ya mencionamos, un concepto clave en el desarrollo Front End (programación de
todo lo que interactúa con el usuario) es el de "separation of concerns". Básicamente
significa que cuando hacemos un sitio, cada lenguaje tiene un rol y sus respectivos
códigos deberían estar en archivos separados (pero vinculados, como acabamos de
hacer con el tag link para unir un html y un css). Estas imágenes lo resumen bien (no se
preocupen por la parte de JavaScript):
En la práctica los archivos quedan separados, pero vinculados entre sí, y muestran el
resultado final deseado (page.html) cuando el usuario accede a la página.
Los colores en CSS
CSS nos permite escribir los colores de tres maneras diferentes indistintamente:
Con su nombre en inglés. Ej. red, green, blue, purple
Con su código hexadecimal, una secuencia de 6 dígitos entre 0 y F precedidos
por un signo '#'. Ej.#CD00CD (magenta)
Con RGB (red, green, blue), dándole un valor entre 0 y 255 a cada uno de los tres
colores. Ej. rgb(210, 140, 176).
Entonces, escribir "background-color: lime;", "background-color: #00FF00;" o
"background-color: rgb(0,255,0);" daría el mismo resultado, un fondo color lima.
Esto es muy útil porque los diseñadores nunca les van a pasar el nombre de un color,
sino que les van a dar un tono específico en hexa o en rgb.
Estos dos recursos están muy buenos para buscar colores:
La página coolors.co
Esta lista de colores con sus códigos hex y rgb:
RGBA
Existe un cuarto formato que es el de rgba, que es igual a RGB pero con un cuarto valor
entre 0 y 1 que refiere a la transparencia del color. >Entonces por ejemplo rgba(0, 255, 0,
0.5) genera un color lime pero con un tono más transparente.
La especificidad en CSS
¿Qué pasa si creamos reglas css contradictorias, por ejemplo, una regla que le aumenta
el tamaño de la letra a los párrafos, y otra que se los reduce?
Vamos a averiguarlo: volvé a la hoja de estilo del último ejercicio y creá una regla que
seleccione p y le cambie la propiedad 'font-size' a 10%. Inmediatamente después creá
una regla igual pero que cambie el font-size a 400%. Guardá los cambios, volvé a tu
html y refrescá la página ¿Qué tamaño de letra tienen los párrafos?
Cuando CSS encuentra reglas contradictorias, usa la especificidad para decidir que regla
gana. Cuando creamos un selector, CSS le asigna un valor a su especificidad que varía
según el tipo de selector:
El selector de elemento, es decir cuando seleccionamos
elementos HTML genéricos: p {…}, h1 {…}, etc) tiene una especificidad de 1, y es
el menos específico.
El selector de clase (.ejemplo {…}) tiene una especificidad de 10.
El selector de id (#ejemplo {…}) tiene una especificidad de 100.
Si hubieran reglas contradictorias entre las tres de arriba ganaría el id, por ser la de
mayor especificidad.
Importante
Si hay dos reglas contradictorias con la misma especificidad gana la que esté más abajo
en el CSS, osea la última que fue declarada. Para probarlo, volvé a la hoja de estilo y
cambiá el orden de las reglas que cambiaban el tamaño del párrafo.
Esta página te puede resultar útil para calcular la especificidad de distintos selectores y
entender qué regla prevalecerá: (https://specificity.keegan.st/). No te asustes por los
selectores raros que aparecen ahí, son selectores complejos que vamos a ver más
adelante.
Hojas de estilo Internos o Externas
Podemos usar hojas de estilo que se encuentren en nuestra computadora completando
el atributo "href=" con la dirección del archivo en nuestra computadora. Si el
archivo .html y el .css están en la misma carpeta, alcanza con poner sólo el nombre del
archivo .css en el "href=", por ejemplo, href="mis\_estilos.css". Si el archivo está
en otra carpeta tenemos que poner la ruta hacia ella, tomando como origen la carpeta
donde se encuentra el archivo .html, por
ejemplo, href="stylesheets/mis_estilos.css", si la hoja de estilos estuviera en
una carpeta llamada stylesheets, ubicada en el mismo lugar que el archivo .html.
Otra opción es acceder a hojas de estilo en la web. La unica diferencia es que, en vez de
poner el nombre del archivo local, completamos el atributo "href=" con la url que tiene
la stylesheet. Por
ejemplo: href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css". Si bien se ve más largo, esto es simplemente un archivo .css
guardado en un servidor (una compu en algún lugar) al que accedemos a través de
internet.
Propiedades con múltiples valores
Casi todas las propiedades css que vimos tenían un único valor, por ejemplo
"background-color: yellow", pero algunas propiedades pueden tener muchos valores,
referentes a distintos aspectos de la propiedad.
Un ejemplo de este tipo es la propiedad border, que usaste en el ejercicio anterior.
Dentro de border podemos escribir, por ejemplo: "border: 3px solid red", dándole a
border un ancho de 3 pixels, haciéndolo una línea solida (a diferencia de "dashed" por
ejemplo, que la hace con rayitas) y de color rojo.
Si omitimos alguno de esos valores, ese aspecto del borde se setea en su valor default.
Más adelante vamos a ver otros ejemplos de atributos de este tipo.
Usando tipografías externas con Google Fonts
Vimos que con el tag <link> podíamos traer una stylesheet que habíamos creado en un
archivo externo. Además de esto, el tag link nos permite traer stylesheets de internet y
usarlas en nuestro html. Estos archivos CSS que alguien creó por nosotros nos permiten
utilizar código externo para hacer cosas como importar fonts (tipografías) nuevas para
nuestros HTML.
El problema con las fonts
La mayoría de las computadoras tienen distintas fonts instaladas, sobre todo
dependiendo del sistema operativo. Esto puede ser un problema, porque si
especificamos una tipografía para nuestra página que no está presente en el sistema
operativo del usuario, la página se va a ver distinta de cómo queremos que se vea. Este
sitio nos muestra qué porcentaje promedio de computadoras tienen cada font: CSS
Font Stack. Vemos que hay mucha variabilidad. Por suerte vamos a usar un recurso que
nos sirve para solucionar este problema y que nos amplía muchísimo el abanico de
tipografías disponibles: Google Fonts.
Para usar Google Fonts todo lo que tenemos que hacer es:
1. Elegir las fonts que querramos usar apretando el símbolo + que aparece al lado
de cada una.
2. Clickear en la barra debajo que dice Families Selected (o su equivalente en
español).
3. Copiar el tag que nos provee Google y pegarlo al principio del head tag de
nuestro archivo HTML.
4. Crear nuestra propia stylesheet e incluirla en un segundo tag debajo del de
Google Fonts. Esto no es un problema porque cada stylesheet se ocupa de cosas
diferentes.
5. En nuestro stylesheet, podemos aplicar la font nueva a los elementos que
querramos con la propiedad font-family, dándole como valor el nombre de la
font que acabamos de importar. De hecho, en la página de Google Fonts, debajo
del link tag que nos ofrecen, nos dan un ejemplo de cómo usar la
propiedad font-family para esa tipografía.
6. Por último, importar muchas fonts puede hacer un poco más lenta la página. Si
se fijan en la pestaña de Family Selected, arriba dice load time, lo que nos indica
como afecta al tiempo de carga. Si elegís 10 fonts vas a ver cómo pasa de fast a
slow.
Vemos que en nuestro archivo pueden convivir distintas hojas de estilo sin problema. Si
las hojas de estilo tuvieran “estilos” que entran en conflicto dándole distintos valores a
un mismo elemento, ganaría la regla de mayor especificidad. Si tuvieran la misma
especificidad ganaría la regla en la stylesheet de más abajo: recuerden que frente a una
misma especificidad CSS, prevalece la última propiedad que se declara.
¡Practiquemos un poco!
1. Crea un HTML nuevo y ponele un párrafo con un texto de relleno. En atom o
sublime podés escribir lorem en y apretar tab, y se te completa con texto de
relleno.
2. Usa una Google Font que quieras e incluí el link tag en tu HTML (podés elegir más
de una font si querés).
3. Crea una stylesheet nueva, agregala a tu html mediante el tag link, y usala para
cambiar la tipografía del párrafo.
4. Si el nombre de una font tiene más de una palabra tenés que escribirlo entre
comillas para ignorar los espacios. De lo contrario CSS piensa que los espacios
separan los nombres de distintas fonts. Por ejemplo, font-family: "Baloo
Tamma";.
