CSS (hoja de estilo en cascada) es una de las tres piedras angulares de la web, junto con HTML y JavaScript. Es lo que da vida a los sitios web a través de colores, estilos, posicionamiento y mucho más. Por lo tanto, conocer CSS es muy valioso en el mercado laboral actual.
Por eso, me complace anunciar que acabamos de lanzar un curso gratuito de CSS en Scrimba. Fue creado por nuestro brillante instructor Eric Tirado, quien también hizo nuestro popular curso de introducción al HTML.
¡En menos de una hora, Eric lo llevará de cero a experto en CSS!
Echemos un vistazo a cómo se presenta el curso.
Parte # 1: Introducción
En el video introductorio, Eric le dará una descripción general de cómo se ve el curso, cuáles son los requisitos previos, además de una descripción general de los temas que toca a lo largo del curso. También te da una breve introducción sobre sí mismo para que te familiarices con él antes de saltar.
Parte # 2: Documentos CSS y la cascada
Luego saltamos directamente a la primera lección formal del curso. En este, analizaremos las formas en que podemos incluir CSS en nuestras páginas HTML y cómo comenzar a aplicar estilos básicos en nuestros elementos.
Parte # 3: Selectores, propiedades y valores de CSS
En la segunda lección, Eric habla sobre parte del vocabulario CSS que lo prepara para comprender mejor los conceptos que atraviesa en conferencias posteriores. Aprenderá qué son los elementos HTML, qué son los selectores CSS y cómo puede aplicarles propiedades y asignarles valores.
Vocabulario CSS
Entonces, por ejemplo, este es un h1elemento. Tiene un estilo predeterminado que aparece cuando lo renderiza en el navegador. Si queremos cambiar algo de estilo, podemos usar CSS:
h1 { color: 'red'; } El selector de nuestro h1elemento es simplemente el nombre del elemento en sí, y luego le asignamos la propiedad de color con el valor de rojo. De la misma manera, también podemos seleccionar elementos usando Clases e ID, lo cual se analiza en videos posteriores.
Parte # 4: Clases e ID
Esta parte del curso trata sobre cómo usar clases e ID en CSS para seleccionar elementos HTML y aplicarles estilos diferentes. También analiza en detalle la diferencia entre Class e ID, y cómo y cuándo los asignamos en elementos HTML.
Mira el siguiente código para ver un ejemplo:
This is the heading tag
This is a paragraph tag
El fragmento anterior consta de una etiqueta h1(título) y una petiqueta (párrafo). Le hemos dado al h1elemento la clase de headingy a nuestro pelemento el ID deparagraph.
En nuestro archivo CSS, seleccionamos la clase de encabezado y le damos la propiedad de color. Posteriormente seleccionamos el ID del párrafo y le damos las propiedades de color y tamaño de fuente:
.heading { color: blue } #paragraph { color: green; font-size: 14px; } Parte # 5: Especificidad
En la parte 5 del curso, aprenderá acerca de la especificidad, lo que significa cómo un navegador sabría qué estilos y reglas son más relevantes para que aplique un elemento.
This is the heading tag
Por ejemplo, aquí tenemos una h1etiqueta con la clase de encabezado que se le aplica.
h1 { color: blue; } .heading { color: green; } Usando CSS, asignamos el color azul a la h1etiqueta que cambiará el color de cada h1. Luego también asignamos el color de verde a la clase heading, de modo que cada elemento con esta clase tenga su color anulado a verde. Entonces, la h1etiqueta que definimos anteriormente aparecerá en verde.
Parte # 6: Ancho y alto
En esta lección, aprenderá a aplicar ancho y alto para controlar el formato y el flujo de la página.
Arriba hay una diapositiva de la lección, que le dará una idea de cómo podemos crear secciones y cuadros usando el ancho y el alto para que nuestra página web se vea correctamente formateada.
Parte # 7: Unidades de longitud
En CSS, podemos usar diferentes unidades para medir los diferentes tamaños que pasamos como propiedades de nuestros elementos HTML. Esta lección analiza en detalle cuáles son esas diferentes unidades y cómo difieren en su uso.
Hay dos tipos de unidades de longitud:
- Unidades absolutas
- Unidades relativas.
Las unidades absolutas son unidades de longitud fija, y una longitud que se exprese en cualquiera de ellas aparecerá exactamente como ese tamaño. Por ejemplo, cm, mm, in, 'px, y así sucesivamente son unidades absolutas.
Por otro lado, las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Por ejemplo, em, ex, rem, y así sucesivamente son unidades absolutas.
Parte # 8: Colores
Esta lección analiza en detalle cómo podemos usar y aplicar colores a diferentes elementos HTML. También analiza las diferentes formas en que podemos declarar el nombre del color en nuestras propiedades CSS.
.heading1 { color: orange; } .heading2 { color: #ff6347; } .heading3 { color: RGB(255, 99, 71); } El ejemplo anterior tiene tres clases declaradas con la misma propiedad de color asignada. Pero lo importante es notar cómo hemos utilizado diferentes formas de asignar los valores de los colores.
La clase heading1usa el nombre del color (naranja) como propiedad. heading2usa el valor hexadecimal del color. Y heading3usa el valor RGB del color.
Parte # 9: Acolchado
En CSS, el relleno se usa para crear espacios alrededor del contenido de un elemento dentro de los bordes definidos. En CSS, tiene el control para aplicar relleno a todos o cualquier lado de los elementos. La lección 9 de este curso habla sobre el acolchado y le enseña cómo aplicarlo de diferentes formas.
.container { padding: 10px; /* padding-left: 10px; */ /* padding-right: 10px; */ /* padding-top: 5px; */ /* padding-bottom: 5px; */ } Como en el ejemplo anterior, podemos usar la propiedad de padding, que aplicará el espaciado a todos los lados, o alternativamente, puede dar relleno a direcciones individuales.
Parte # 10: Fronteras
En esta lección, aprenderá cómo aplicar bordes alrededor de su contenido. También aprenderá sobre las variaciones que puede dar a los bordes usando diferentes estilos y opciones disponibles en CSS.
Tome el ejemplo del cuadro en la imagen de arriba y observe los bordes a su alrededor con diferentes colores y ancho.
Parte # 11: Márgenes
Los márgenes en CSS son como el relleno: aplican espaciado alrededor del elemento pero lo hacen fuera de cualquier borde definido. Esta lección habla sobre el uso de márgenes dentro de su CSS y cómo puede aplicar los mismos márgenes en todas las direcciones o diferentes márgenes en diferentes direcciones.
.container { margin: 10px; /* margin-left: 10px; */ /* margin-right: 10px; */ /* margin-top: 5px; */ /* margin-bottom: 5px; */ } Parte # 11: El modelo de caja
El modelo de caja en CSS es un término que usamos cuando describimos diseño y maquetación. Podemos pensar en todos los elementos HTML como cuadros donde cada cuadro contiene propiedades de márgenes, relleno, bordes, etc.
La ilustración anterior explica el modelo conceptual de la caja. En esta lección, Eric explicará cómo podemos usar este concepto para diseñar y organizar mejor nuestros elementos.
Parte # 13: Visibilidad
También podemos actualizar la visibilidad de cualquier elemento en HTML usando CSS. Podemos, por ejemplo, ocultar o mostrar cualquier elemento utilizando la propiedad de display. Esta lección explica tres formas diferentes en las que podemos jugar con la visibilidad de los elementos.
.hidden { display: none: } Una de las tres formas de actualizar la visibilidad es usar la displaypropiedad. En el ejemplo anterior, hemos establecido la displaypropiedad en none para que ningún elemento que tenga la clase de hiddenno aparezca en el navegador.
Parte # 14: Fuentes
Las fuentes son una de las características más importantes y útiles de CSS. Podemos jugar con diferentes tipos de estilos de fuente y familias de fuentes para que nuestro texto se vea bien. ¡La lección 14 de este curso trata sobre el uso de fuentes!
En la imagen de arriba, el texto Hello World tiene el font-familyde Black Han Sans’, arial, sans-serify el font-sizede 30px. De la misma forma, podemos aplicar diferentes propiedades para que nuestro texto luzca más atractivo y bello.
Parte # 15: Flujo de elementos
En esta sección del curso, aprenderá sobre el flujo típico de elementos sobre cómo se representan dentro del navegador. Hay dos tipos de elementos HTML: elementos en línea y de bloque
Los elementos en línea no pueden tomar las propiedades widthy height. Siempre serán tan grandes como su contenido. Sin embargo, en elementos de bloque, puede configurar ambos widthy heightcomo desee
Parte # 16: Flotar y Limpiar
En la lección, aprenderá sobre las propiedades floaty clear. Son muy útiles si queremos controlar la posición de los elementos HTML para que floten a la izquierda oa la derecha unos de otros.
Parte # 17: Desafío de diseño flotante
Aquí viene el desafío de este curso. En él, se le animará a crear el siguiente diseño utilizando las floatpropiedades. Más adelante en el screencast, Eric le enseñará cómo hacerlo en caso de que tenga alguna dificultad.
Parte # 18: Propiedad de posición
En esta lección, diseñaremos una página de artículo simple en la que usaremos las propiedades de posicionamiento disponibles. Trabajaremos con divs, contenido de texto, span y footer.
Al final de esta lección, podrá crear un diseño como este:
Parte # 19: Pseudo clases / elementos
En la lección final, aprenderemos sobre pseudo clases y elementos. Usamos pseudoclases para hacer algunas selecciones de nivel avanzado de nuestros elementos HTML. Esta es una técnica muy útil cuando se trata de páginas web complejas que tienen múltiples elementos y estilos condicionales.
/* unvisited link */ a:link { color: aqua; } /* visited link */ a:visited { color: orange; } Por ejemplo, en el fragmento de código anterior, estamos aplicando diferentes clases a la etiqueta de anclaje usando su estado de si se ha visitado o no. Hay miles de casos de uso para usar pseudoclases y esta lección lo ayudará a comprender el concepto básico de su uso.
Parte # 20: ¿Qué sigue?
En este último screencast del curso, Eric resume lo que ha aprendido a lo largo del curso y le da consejos para continuar su viaje de aprendizaje.
CSS es un tema extenso, y hay muchas más características que aprender además de lo que se cubrió durante este curso.
Si llegas al final, puedes darte una palmadita en la espalda. Ha dado un gran paso hacia el aprendizaje de cómo construir y diseñar sitios web, que es una habilidad muy valiosa.
¡Así que sigue adelante y haz el curso gratuito hoy! Tu yo futuro te lo agradecerá :)
¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.
