hand Inicio
hand JSBloqs
hand GutenBloqs
Qué?
nochedía

DESARROLLO WEB con
REACT y WORDPRESS

Apúntate a la newsletter (escribo algo de tanto en cuanto)
Wallpaper)

CSS básico

2100 palabras
8 minutos
July 6, 2020
cursoscssbasico

Si desarrollas webs, el css es absolutamente indispensable, ya sea a nivel de mínimos para hacer una interfaz espartana, o con un conocimiento elevado para poder dotar de una estética decente a nuestro proyecto

En cualquier caso, es más sencillo de lo que quizás pueda parecer

Prólogo

Curso básico de css

Dicho así suena a poco, pero el css (Cascade Style Sheet) es la parte visible de la web y es evidentemente esencial, y por tanto dominar el css es obligado en tanto en cuanto sabemos que la estética puede ayudar mucho a convertir

Ojo, la estética sin contenido no convierte (a no ser que estés vendiendo estética), pero el contenido con estética gana muchos puntos

Y por estética no me refiero a tener un diseño concreto, sino a tener un diseño, donde normalmente aplica aquello de menos es más

Si alguno te dice que la estética no sirve, que lo importante es el copywriting, dile que ponga todo su texto sin separaciones de párrafo, con una letra pequeña y con poco contraste con el fondo, a ver si la estética importa o no

Vamos allá

  1. Prólogo
  2. Introducción
  3. Repaso a las normas más comunes de css
  4. Trabajar con clases
  5. Seleccionar elementos
  6. Unidades
  7. Comentario

Introducción

Cómo funciona el css

El css es un conjunto de instrucciones que definen unas propiedades estéticas determinadas de un documento html (tienes el curso básico de html aquí)

Y lo definimos en el propio documento de html, de distintas formas

html
<p style="margin: 10px; border: 1px solid #000;">Aquí estilo de forma <b>inline</b></p>
<p class="miparrafo">Aquí estilo con un nombre de clase</p>
<p id="especial">Aquí estilo con un nombre de id</p>
<style>
/* empieza por punto, esto aplica a todos los elementos que tengan esta clase */
.miparrafo {
background-color: #fefefe;
}
/* empieza por almohadilla, esto aplica a los elementos que tengan de id #especial, y sólo debería haber un elemento */
#especial {
background-color: #666;
}
/* esto aplica a todos los elementos p */
p {
margin: 10px;
}
</style>

Es decir, definimos los estilos css mediante

  • el atributo style que bien puede estar dentro del mismo elemento html (de forma inline)
  • separado dentro de los tags <style> (donde utilizaremos los class o los id para referirnos a los elementos que queremos estilar)
  • o separado en un archivo aparte

En cualquier caso esto sería todo, ahora se trataría de ir añadiendo normas css y listos

El problema del css

Si hacemos lo anterior, terminaremos con una lista enorme de reglas css que rápidamente se convertirá en un monstruo ingobernable

Ingobernable en el sentido de

  • Nos costará organizar toda la maraña de css
  • Nos costará encontrar qué estilo hace qué
  • Nos costará no ser redundantes
  • Nos costará identificar qué estilos se pueden borrar

Este curso no va de solucionar este problema, pero es algo que harás sí o sí, simplemente me limito a mencionarte la mejor opción para mi que es el CSS in JS, que te permite vincular unas normas css a un componente de tipo React

Esto sería lo mismo que dividir tus normas css en distintos archivos e importarlos para distintas partes de tu documento html, pero de una forma automatizada y con el poder de JavaScript para introducir variables y funciones

Hay otras alternativas y al final también dependerá de para qué estés programando, pero lo dejo aquí

Fuentes (tipografía)

Antes de empezar con algunas de las normas css más habituales, hablemos de las fuentes

Es quizá el elemento más importante de tu documento: la fuente que vayas a utilizar

Cómo funciona?

Tenemos que importarlas

Una de las aproximaciones populares es bajarse la fuente de algún servicio online (el mejor es el Google WebFonts Helper, puedes leer algo más del tema en la entrada que hice sobre el tema aquí)

Lo haríamos así

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>KUWorking</title>
<link
href="https://fonts.googleapis.com/css?family=Barriecito|Gothic+A1|Lacquer|Roboto&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>Compra palomitas</h1>
<p>Compra palomitas, esto te lo digo en un <em>párrafo</em>, para que <span>veas</span></p>
</body>
</html>

Con la parte display=swap estamos diciendo que mientras que la fuente se vaya cargando, que el navegador utilice alguna fuente que ya tenga disponible (que venga con el sistema operativo) para que el usuario empiece a ver contenido

Y con la parte family=Barriecito|Gothic+A1|Lacquer|Roboto le estoy diciendo que me importe 4 fuentes distintas

Lo que se recomienda es utilizar sólo 2 fuentes por temas de velocidad (y por lo tanto puntuación en el ranking de Google), pero siempre dependerá del objetivo de tu página web (que no tiene porque ser el querer posicionarse bien por SEO)

Viewport

Otro tema importante que posiblemente nunca utilicemos es el de definir el <meta name="viewport" />

html
<meta name="viewport" content="width=device-width,initial-scale=1" />

Esto es importante porque tiene una incidencia directa en la estética de nuestra página web, así que aunque no sea css encaja muy bien en el universo css

Qué es el viewport?

Es el área visible de la pantalla, lo que el usuario ve quitando todos los elementos sobrantes (por ejemplo quitando el espacio que ocupe la barra de scroll)

Qué le estamos diciendo al navegador?

Con content="width=device-width,initial-scale=1" le estamos diciendo que el viewport esté en consonancia con las medidas del device y que parta de una escala de 1

Sin esta instrucción, los navegadores intentarían mostrar las páginas haciendo la siguiente equivalencia:

  • Si tu escritorio es de 1080p, tu pantalla de móvil se comportará como si también fuera de 360p

Es esa época donde todo se veía muy pequeño y tenías que hacer zoom constantemente

Si le especificamos esa instrucción, entonces los navegadores lo que harán es no hacer esta equivalencia y decir

  • Si tu página tiene 1080px, y el móvil tiene 360px, pues yo te muestro 360px y tu ya verás

A partir de ahí ya es responsabilidad nuestra adaptar el contenido para que sea responsive

Podríamos cambiar estos valores por JavaScript, pero es muchísimo mejor adaptar el responsive con normas css

Repaso a las normas más comunes de css

Este sería un ejemplo de documento html con un archivo css externo que nos servirá como esqueleto

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>kuworking</title>
<link
href="https://fonts.googleapis.com/css?family=Barriecito|Gothic+A1|Lacquer|Pacifico&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Compra palomitas</h1>
<h2>Cómpralas ahora</h2>
<h3>No te lo pienses, están muy baratas</h3>
<p>Compra palomitas, esto te lo digo en un <em>párrafo</em>, para que <span>veas</span></p>
</body>
</html>

En este archivo estamos importando el archivo styles.css y es en ese archivo que definimos las normas css

css
body {
font-family: 'Pacifico', sans-serif;
}
h1 {
font-family: 'Gothic A1', sans-serif;
}
h2 {
font-family: 'Barriecito', sans-serif;
}
h3 {
font-family: 'Lacquer', sans-serif;
}
span {
padding: 5px;
background-color: #ccc;
border-radius: 8px;
}
em {
letter-spacing: -0.5px;
}

Aquí me limito a definir las fuentes para los elementos <body>, <h1>, <h2> y <h3>

En el primer caso, ya que todos los elementos se encuentran dentro del <body>, esto quiere decir que esos estilos se aplicarán en todos esos elementos

Pero en css cuanto más específico más preferencia hay, por lo que por ejemplo en los elementos <h1> prevalecerá la norma que hemos definido para ese elemento al ser más específica

Un detalle, en css todas las reglas o normas deben terminar con punto y coma ;

CSS para fuentes y texto

font-family

Sirve para definir la fuente que queremos utilizar (ya lo hemos visto antes)

Por qué ponemos más de una? Por si acaso esa no existe o tarda en cargarse, normalmente vamos añadiendo fuentes que son más comunes (fuentes que están por defecto en distintos sistemas operativos)

A esas combinaciones se les llama fontstacks y existen distintas opciones

Si la fuente es una palabra basta con ponerla tal cual, pero si son dos palabras con espacios en blanco en medio necesitamos comillas

font-size

Para establecer el tamaño, históricamente definido con píxeles font-size: 18px;

font-weight

Negrita? Normal? lo definimos aquí, en números o en palabras

css
font-weight: 400;
font-weight: normal;
font-weight: 700;
font-weight: bold;

font-style

Por si quieres cursiva, o por si quieres contrarrestar la cursiva que viene por defecto en tags como por ejemplo el <em>

css
em {
font-style: unset;
}

text-transform

Útil cuando queremos mostrar un texto en mayúsculas, no hace falta cambiar el texto!

css
text-transform: uppercase; /* Todo en mayúsculas */
text-transform: capitalize; /* Sólo la primera letra en mayúsculas */

text-decoration

Lo utilizaremos sobre todo para los links <a> y evitar que se decoren por defecto (y decorarlos como queramos nosotros)

css
a {
text-decoration: unset;
}

text-align

Para alinear el texto en horizontal con por ejemplo text-align: center;, útil en esos casos donde no puedas utilizar las propiedades flex o grid (que las vemos en un momento)

letter-spacing

Muy útil para alterar la fuente a nivel de los espacios entre letras y adaptarlas a tu gusto

El impacto de cambiar esta propiedad es alto, la tipografía puede parecer otra

css
letter-spacing: -0.1px;

word-spacing

Lo mismo que antes, pero definiendo espacio entre palabras en lugar de entre letras

line-height

La distancia entre líneas, tiene también un impacto alto en la estética de la página

css
line-height: 1px;

color

Auto-explicativo, pero que sepas que el color lo podemos definir de distintas maneras

css
/* Todo son el color negro */
color: #000;
color: #000000;
color: rgb(0, 0, 0);
color: hsl(0, 0%, 0%);

Yo soy siempre de utilizar la versión HEX (las 2 primeras)

writing-mode

Para escribir en horizontal o en vertical, aunque también podríamos hacerlo simplemente rotando el elemento

css
writing-mode: tb;
transform: rotate; /* una alternativa mejor */

CSS para color de fondo y más

background-color

Para especificar el color del fondo, con colores planos, con transparencias o con gradientes (puedes echarle un ojo a el generador de gradientes css-gradients)

css
background-color: #ccc;
background: #ccc; /* sin el -color también funciona (y además puedes hacer más cosas, pero no las comento aquí) */

border

Para añadir un borde definiendo el grueso, el estilo y el color, por separado o (mejor) en una única línea

css
/* por separado */
border-width: 1px;
border-style: solid;
border-color: #000;
/* o en una sola línea */
border: 1px solid #000;

border-radius

Posiblemente el elemento más utilizado en css por su altísimo impacto en la estética, los bordes redondeados

css
/* para todas las esquinas */
border-radius: 8px;
/* especificando las esquinas top, right, bottom, left */
border-radius: 15px 10px 5px 0px;

CSS para espacios

padding y margin

Padding para el espacio entre el texto (o contenido) y el borde

Margin para el espacio entre el borde y lo demás

css
padding: 8px;
padding: 8px 0px 8px 0px; /* aquí especificamos el padding para el top, right, bottom y left */
margin: 8px;
margin: 8px 0px 8px 0px;

En un ejemplo

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>KUWorking</title>
<link
href="https://fonts.googleapis.com/css?family=Barriecito|Squada+One|Lacquer|Pacifico&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="primero">Compra palomitas</div>
<div class="segundo">Compra palomitas</div>
<div class="tercero">Compra palomitas</div>
<div class="cuarto">Compra palomitas</div>
</body>
</html>
css
body {
background: linear-gradient(45deg, #ffeb00 10%, #ff6a00 20%);
font-size: 1.5em;
border: 2px solid #000;
}
div {
border-radius: 8px;
}
div.primero {
font-family: Barriecito, sans-serif;
font-size: 3em;
background-color: #000;
color: #fff;
text-transform: uppercase;
border: 3px solid #fff;
padding: 10px;
margin: 50px;
width: min-content;
}
div.segundo {
font-family: 'Squada One', sans-serif;
background: linear-gradient(45deg, transparent, #ff0000);
color: #000;
padding: 10px;
margin: 10px;
font-size: 4em;
line-height: 0.6;
width: min-content;
}
div.tercero {
font-family: 'Lacquer', sans-serif;
color: #fff;
padding: 5px;
margin: 50px;
font-size: 2.5em;
letter-spacing: -5px;
}
div.cuarto {
font-family: 'Pacifico', sans-serif;
background-color: #6d7f9845;
border-radius: 50px 50px 5px 55px;
color: #00000061;
padding: 31px;
margin: 20px 20px 50px 20px;
font-size: 2em;
width: max-content;
}

Y el resultado es éste

image

CSS para bloques

display

Display nos define la manera en cómo estructuramos el contenido con css

Las grandes opciones son flex y grid, y nos permiten estructurar la malla de contenidos de cierta manera (que es algo compleja y no lo daremos aquí)

Las otras opciones son block, inline y inline-block

Un elemento con display: block; ocupan una nueva línea cada uno, o dicho de otro modo no permiten que otros elementos se sitúen a su derecha o a su izquierda

Los elementos inline sí lo permiten

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>KUWorking</title>
<link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet" />
</head>
<body>
<div class="inline">Inline</div>
<div class="inline">Inline</div>
<div class="inlineBlock">Inline Block</div>
<div class="inlineBlock">Inline Block</div>
<div class="inline">Inline</div>
<div class="inline">Inline</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
</body>
</html>
css
body {
background-color: #ccc;
font-size: 1.5em;
}
div {
font-family: 'Lacquer', sans-serif;
background-color: #fff;
color: #666;
padding: 10px;
margin: 40px 10px;
border-radius: 8px;
width: max-content;
height: 50px;
}
div.inline {
display: inline;
}
div.inlineBlock {
display: inline-block;
}
div.block {
display: block;
}
image

La diferencia entre inline e inline-block es por lo tanto que el segundo sí que hace caso a la propiedad height mientras que el primero no

En otras palabras, el inline-block viene a ser una mezcla de inline y block

width y height

Para especificar el ancho y alto del contenido, normalmente ese ancho y ese alto no lo sabremos ya que dependerá de lo que vaya dentro, y eso acostumbra a no estar fijado

Es por eso que las propiedades relativas nos son muy útiles

css
width: 50px; /* un ancho fijado */
width: 50%; /* un ancho fijado pero en porcentaje */
min-width: 50px; /* un ancho mínimo fijado */
width: min-content; /* un ancho ajustado a lo mínimo que el contenido permita, esto es, haciendo wrap al texto */
width: max-content; /* un ancho ajustado a lo máximo que el contenido permita, esto es, sin hacer wrap al texto */

overflow

Si el contenido es mayor que el contenedor, que queremos que pase? Que salga? Que no se muestre? Que aparezcan scrolls? Con overflow: auto; o overflow: hidden; lo podemos delimitar

CSS para efectos con el ratón

css nos da la opción a hacer cambios en base a movimientos del ratón, algo que se parece mucho a programar con css

El más evidente es definirlo para cuando el ratón pase por encima, aunque este efecto no se observará cuando estemos en el móvil (y por eso mismo la tendencia es a no utilizar esos efectos a no ser que tu público esté muy definido en cuanto a qué device utilice)

html
<body>
<div class="primero">hola</div>
</body>
css
div {
font-family: 'Barriecito', sans-serif;
background-color: #ccc;
border-radius: 8px;
padding: 10px;
margin: 10px;
width: fit-content;
cursor: pointer; /* queremos que nos cambie el cursor cuando esté encima */
display: block;
transition: all 0.3s ease; /* queremos que la transición tarde 0.3 segundos */
}
div:hover {
text-transform: uppercase;
background-color: #000;
color: #fff;
}
image

Trabajar con clases

Es lo que hemos estado haciendo todo el rato, es la manera que tenemos para apuntar a un elemento concreto

Lo podemos hacer con clases o con identificadores, o también con selectores

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>KUWorking</title>
<link
href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="primero">Compra palomitas</div>
<div id="segundo">Compra palomitas</div>
<div class="general">Compra palomitas</div>
<div class="general">Compra palomitas</div>
</body>
</html>
css
div {
border-radius: 8px;
font-family: 'Amatic SC', sans-serif;
font-size: 2em;
font-weight: 700;
padding: 20px;
margin: 30px;
}
div#primero {
background-color: #ccc;
border: 3px solid #fff;
}
div#segundo {
background-color: #f00;
color: #fff;
}
div.general {
border: 1px solid #000
}
/* lo mismo escrito de otra forma menos específica */
#primero {
background-color: #ccc;
border: 3px solid #fff;
}
#segundo {
background-color: #f00;
color: #fff;
}
.general {
border: 1px solid #000
}
/* lo mismo escrito con selectores, menos específico, y que depende del orden en que aparecen los elementos */
div:nth-of-type(1) {
background-color: #ccc;
border: 3px solid #fff;
}
div:nth-of-type(2) {
background-color: #f00;
color: #fff;
}
div:nth-of-type(3),div:nth-of-type(4) {
border: 1px solid #000
}
/* Y añado una norma nueva utilizando un selector que tiene una variable n que por defecto va de 0 a infinito */
:nth-of-type(2n) {
letter-spacing: 10px;
}
image

Seleccionar elementos

Acabamos de ver un ejemplo arriba de cómo seleccionar elementos, bien con id, bien con classes, bien con selectores

De selectores hemos visto el nth-of-type() que nos permite seleccionar un elemento basado en la posición que ocupe, o una serie de elementos utilizando la variable por defecto n

Pero los selectores nos permiten mucho más

Desde seleccionar elementos que tengan una jerarquía determinada, hasta seleccionar elementos con una propiedad determinada

Por ejemplo:

html
<body>
<main>
<div>hola</div>
<div>qué <b>tal</b> vamos</div>
<div>palomitas?</div>
<div data-type="importante">palomitas dulces?</div>
</main>
<footer>
<div>contáctame <b>aquí</b></div>
</footer>
</body>
css
body {
font-family: 'Amatic SC', sans-serif;
font-size: 30px;
}
main {
font-family: 'Amatic SC', sans-serif;
padding: 10px;
border-radius: 8px;
background-color: #ccc;
width: fit-content;
}
footer > div > b {
font-size: 20px;
}
main div:first-of-type {
font-size: 2em;
font-weight: 700;
}
main div:nth-of-type(2) {
letter-spacing: 5px;
}
main div:last-of-type {
font-size: 3em;
font-weight: 700;
}
div[data-set='importante'] {
color: #f00;
}
image

Con el operador > le decimos que la relación entre los dos elementos es de padre - hijo

Con el selector [propiedad = valor] estamos seleccionando sólo aquellos elementos que cumplan esa condición, algo potentísimo y que dotan de cierta capacidad de programación el lenguaje css

Ojo con el selector, aquí utilizamos un sólo símbolo de =, mientras que en todos los lenguajes de programación utilizaríamos == o ' ===' para comparar

Tenemos otros selectores

css
/* div por debajo de main */
main div {
margin: 10px;
}
/* div sólo un nivel por debajo de main */
main > div {
margin: 10px;
}
/* div adyacente a main, un hermano y no un hijo */
main + div {
margin: 10px;
}
/* div equivalente a main, un hermano y no un hijo pero sin ser adyacentes */
main ~ div {
margin: 10px;
}

(que lo sepas)

Unidades

Terminamos con las unidades

Hay dos maneras de expresar medidas en css, las absolutas y las relativas

Si vamos con unidades absolutas, si el usuario decide cambiar el tamaño del texto en su navegador, nuestra página web ignorará esos cambios

Esa es la única razón para utilizar unidades relativas, y es discutida ya que cuánta gente realmente cambia el tamaño del texto de esta manera? Lo habitual es cambiar el nivel del zoom de la página

Dicho esto, la opción existe y aunque está algo escondida dentro del navegador, puede utilizarse

Bien, pues si queremos cubrir esa posibilidad, podemos utilizar unidades relativas

El coste? Que perdemos la perspectiva ya que es más complicado de leer un font-size: 2.6em; que un font-size: 18px

Las unidades em y rem

Las unidades em nos son muy útiles porque heredan de sus padres y nos permiten modificar el tamaño de un modo relativo

Por ejemplo, imaginemos que tenemos un texto responsive que cambia entre 14px, 16px y 18px

Si definimos un tamaño de texto como font-size: 1.2em;, ese tamaño se adaptará a lo anterior y siempre será 1.2em de 14px o de 16px o de 18px

html
<main>
<h1>Comprad Palomitas</h1>
<p>por favor</p>
<p>que están <em>muy</em> buenas</p>
</main>
css
main {
font-size: 18px; /* supongamos que este valor va cambiando */
}
main > h1 {
font-size: 3em; /* este valor también irá cambiando sin tener que hacer nada más */
}
main > p {
font-size: 1.2em; /* lo mismo */
}
main > p > em {
font-weight: 700;
font-style: normal;
background-color: #ccc;
}

En cambio las unidades rem no dependen de nada, son absolutas, pero se definen respecto al tamaño de fuente de la raíz del documento, y sobre todo, son también relativas a lo que el navegador diga en su configuración

El problema es lo que he dicho antes, que 18px se leen fácilmente, però 0.75rem no

Lo podemos solucionar?

Sí, podemos hacer lo siguiente

css
html {
font-size: 62.5%;
}
body {
font-size: 18px; /* fallback for rem */
font-size: 1.8rem;
}

Qué conseguimos con esto?

Estamos igualando las unidades de los píxeles con las unidades rem

Así, si queremos poner 27px sabemos que podemos poner 2.7rem y será lo mismo

Y por lo tanto ya no tenemos excusas para no utilizar unidades relativas

Unidades viewport

Por último, las unidades viewport, que serían equivalentes a utilizar porcentajes

cs
font-size: 100%;
font-size: 100vw; /* viewport width */

La diferencia sería que el porcentaje incluiría elementos como el scroll que pueda haber, mientras que el viewport no lo incluye

Sin más

Comentario

Con esto ya tenemos una idea de cómo funciona el css

Evidentemente hasta que no se practica uno no acaba recordando las normas más comunes, pero una vez entendida la estructura ya es un tema de memorizar

Por qué es importante tener una idea general sin profundizar demasiado? Porque ahora con esto ya podremos entender qué son los sass, los stylus, o mi opción preferida los css-in-js

No necesitamos ser unos gurus del css para entender lo anterior, pero sí necesitamos saber cómo funciona el css

Pues ya lo tenemos

🙋‍♂️

Qué tal el curso?

👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏
Enviar Feedback ✍️
El texto está en blanco!
Gracias por enviarme tu opinión
👍

Si quieres explorar más cursos y más entradas en el blog, los tienes todos en la página principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusión 👍

Privacidad
by kuworking.com
[ 2020 >> kuworking ]