Aprenda CSS en 5 minutos: un tutorial para principiantes

Un tutorial rápido sobre el lenguaje de diseño de la web.

CSS (Cascading Style Sheets) es lo que hace que las páginas web se vean bien y presentables. Es una parte esencial del desarrollo web moderno y una habilidad imprescindible para cualquier diseñador y desarrollador web.

En este artículo, le daré una introducción rápida para ayudarlo a comenzar con CSS.

También hemos lanzado un curso completo gratuito de CSS sobre Scrimba. Haz clic aquí para echarle un vistazo.

Supongo que tiene un conocimiento básico de HTML, pero aparte de eso, no hay requisitos previos para este tutorial.

Empezando

Comencemos por aprender cómo podemos incluir CSS en nuestros proyectos. Por lo general, hay tres formas de hacerlo.

1. CSS en línea

En primer lugar, podemos incluir CSS directamente en nuestros elementos HTML. Para ello, hacemos uso del styleatributo y luego le proporcionamos propiedades.

Hello world!

Aquí le damos la propiedad de colory establecemos el valor en blue, lo que da como resultado lo siguiente:

También podemos establecer varias propiedades dentro de la styleetiqueta si quisiéramos. Sin embargo, no quiero continuar por este camino, ya que las cosas comienzan a complicarse si nuestro HTML está desordenado con mucho CSS dentro.

Es por eso que se introdujo el segundo método para incluir CSS.

2. CSS interno

La otra forma de incluir CSS es usando el styleelemento en la headsección del documento HTML. Esto se llama estilo interno.

  h1 { color: blue; }   

En el elemento de estilo, podemos dar estilo a nuestros elementos HTML seleccionando los elementos y proporcionando atributos de estilo. Al igual que aplicamos la colorpropiedad al h1elemento anterior.

3. CSS externo

La tercera y más recomendada forma de incluir CSS es utilizar una hoja de estilo externa. Creamos una hoja de estilo con una .cssextensión e incluimos su enlace en el documento HTML, así:

En el código anterior, hemos incluido el enlace del style.cssarchivo que usa el linkelemento. Luego escribimos todo nuestro CSS en una hoja de estilo separada llamada style.csspara que sea fácilmente manejable.

h1 { color: blue; } 

Esta hoja de estilo también se puede importar a otros HTMLarchivos, por lo que es ideal para la reutilización.

Selectores CSS

Como comentamos anteriormente, CSS es un lenguaje de diseño que se utiliza para diseñar elementos HTML. Y para diseñar elementos, primero debe seleccionarlos. Ya ha visto un vistazo de cómo funciona esto, pero profundicemos un poco más en los selectores de CSS y veamos tres formas diferentes de seleccionar elementos HTML.

1. Elemento

La primera forma de seleccionar un elemento HTML es simplemente usando el nombre, que es lo que hicimos anteriormente. Vamos a ver cómo funciona:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

El ejemplo anterior casi se explica por sí mismo. Estamos seleccionando diferentes elementos como h1, p, divy darles diferentes atributos de estilo. Las font-sizecontrola el tamaño del texto, colorestablece el color de texto, y marginañade espaciado alrededor del elemento.

2. Clase

Otra forma de seleccionar elementos HTML es utilizando el atributo de clase. En HTML, podemos asignar diferentes clases a nuestros elementos. Cada elemento puede tener varias clases y cada clase también se puede aplicar a varios elementos.

Veámoslo en acción:

This is heading

 .container { margin: 10px; } 

En el código anterior, hemos asignado la clase de containeral elemento div. En la hoja de estilo, seleccionamos nuestra clase usando .classNameformato y dándole un 10pxmargen.

3. Identificación

Al igual que las clases, también podemos usar ID para seleccionar elementos HTML y aplicarles estilo. La única diferencia entre clase e ID es que se puede asignar una ID a un solo elemento HTML.

This is a paragraph

 #para1 { color: green; font-size: 16px; } 

El ejemplo anterior muestra cómo asignamos una ID al elemento de párrafo y luego usamos el selector de ID en la hoja de estilo para seleccionar el párrafo y aplicarle el estilo.

Fuentes y colores

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS is Coooooool!!!!

.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.

Conclusion

You might feel a bit overwhelmed by all this information, but don’t worry.

Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.