Speaker A
En esta clase vamos a aprender el CSS en tiempo récord y, si ya sabes CSS, te va a servir como repaso de todo lo que ya sabes. Bien, antes de empezar a codificar CSS, te tengo que explicar qué es CSS.
Curso rápido de CSS en 15 minutos para aprender desde la estructura HTML hasta estilos básicos y buenas prácticas.
Key Takeaways
- CSS es esencial para dar estilo y apariencia a páginas web creadas con HTML.
- Usar etiquetas semánticas de HTML5 mejora la estructura y el SEO del sitio.
- Separar CSS en archivos externos es una buena práctica para mantener el código limpio.
- Los selectores de CSS permiten aplicar estilos específicos a elementos, ids o clases.
- Conocer propiedades básicas de CSS es fundamental para crear diseños web básicos.
What the video covers
- Introducción al CSS y su función para dar estilo y presentación a documentos HTML.
- Creación de un proyecto básico con estructura HTML semántica usando etiquetas como header, nav, section, article, aside y footer.
- Explicación de cómo organizar archivos y crear un proyecto en Visual Studio Code.
- Definición y uso de selectores CSS: etiquetas, id y clases para aplicar estilos.
- Diferentes formas de incluir CSS en un proyecto: estilos en línea, en el head con y hojas de estilo externas.
- Aplicación de propiedades CSS básicas como background, color, margin, padding y bordes.
- Uso de unidades y colores en CSS, incluyendo colores en texto y RGB.
- Importancia de separar HTML y CSS para evitar código espagueti y mejorar mantenimiento.
- Demostración práctica de maquetación básica con CSS para un sitio web simple.
- Recomendación para continuar aprendiendo CSS avanzado mediante cursos o máster.
Chapters
- 00:00Introducción a CSS y su función
- 01:14Creación del proyecto y archivo HTML
- 02:31Estructura semántica con etiquetas HTML5
- 03:51Definición del contenido y artículos
- 05:09Barra lateral y pie de página
- 06:09Introducción a los selectores y estilos CSS
- 06:31Colores y propiedades básicas en CSS
- 07:50Cambio de fuentes y estilos avanzados
- 09:01Uso de bordes, márgenes y padding
- 11:26Resumen y recomendaciones para seguir aprendiendo
Full Transcript — Download SRT & Markdown
Speaker A
Pues básicamente CSS son las hojas de estilo en cascada. Básicamente es un lenguaje de marcado, un lenguaje de hojas de estilo que nos va a permitir definir y crear la presentación de un documento de HTML. Básicamente con CSS yo voy a
Speaker A
poder darle forma, voy a poder darle estilos, voy a poder darle colores a una página web. Con HTML teníamos el contenido y la estructura básica de un sitio web, y con CSS le damos los colores, la forma y la apariencia. Vale, bien, pues
Speaker A
para aprender CSS lo mejor que se me ha ocurrido es crear un ejemplo completo. CSS es un lenguaje bastante amplio, por tanto lo mejor es verlo de manera plástica, creando un pequeño sitio web como éste, en el cual vamos a tener una
Speaker A
cabecera, un menú, contenido con artículos, una barra lateral y un pie de página. Básicamente esa va a ser la estructura del sitio web que vamos a estar creando, y para ello lo que vamos a hacer va a ser primero darle la estructura HTML y
Speaker A
luego codificar el CSS. Lo primero que voy a hacer es crear carpeta para mi proyecto. Me voy a ir al directorio que yo uso habitualmente o lo puedes hacer en cualquier directorio de tu equipo, y voy a crear una nueva
Speaker A
carpeta. Se va a llamar aprendiendo CSS. Ok, esta carpeta la voy a arrastrar a mi Visual Studio Code y aquí lo que voy a hacer es dentro de la carpeta aprendiendo CSS me voy a crear un fichero HTML, el index.html. Aquí voy a
Speaker A
definir la estructura de mi página web. Ok, para ello voy a definir el doctype, luego la etiqueta HTML, luego entre la etiqueta HTML la etiqueta head, donde va a definir los metadatos y la información necesaria para el navegador.
Speaker A
Ok, luego voy a definirme la etiqueta body, que va a ser el contenido que se va a mostrar en la página web. En este caso, pues un aumento, voy a poner un h1 que diga CSS con Víctor Robles. Ok, ahora le
Speaker A
damos forma a lo que es la página y la arrastramos a nuestro navegador web. Ok, aquí la tenemos. Siguiendo la estructura del proyecto que vamos a crear, tengo que definir una cabecera, un menú, etcétera. Ok, lo primero que voy a hacer antes de nada
Speaker A
es definir una etiqueta que contenga toda la página web para así darle un ancho fijo, etcétera. Voy a definir una etiqueta que va a ser un div, y comúnmente un div básicamente es una caja, y le voy a poner
Speaker A
un identificador, una id que va a ser container. Este id me va a servir para luego seleccionar en el CSS que yo quiero darle un tamaño a esta caja, unos colores a esta caja, etcétera. Por tanto, dentro del container voy a
Speaker A
hacer todo mi HTML. Luego, ¿qué tengo que hacer? Tengo que definir mi cabecera. Para ello lo que voy a hacer es utilizar la etiqueta header. La etiqueta header de HTML5 me va a permitir, pues eso, crear una caja
Speaker A
que se identifica o que hace referencia a la cabecera del sitio web de manera semántica. Las etiquetas de HTML5 son mucho más semánticas, por tanto son mejores para optimización SEO, para entender qué hace cada etiqueta. También dentro del header voy a poner el h1 que va a
Speaker A
ser el título de la web, que es CSS con Víctor Robles. Vale, luego voy a definir un menú. Para definir un menú lo que voy a hacer es utilizar la etiqueta nav. La etiqueta nav también es una etiqueta semántica de HTML5 que va a permitir
Speaker A
pues eso definirme una barra de navegación. Vale, un menú. Dentro voy a definir un ul, es una lista desordenada, y le voy a definir diferentes elementos, por ejemplo varios enlaces con la etiqueta a, varios enlaces que me
Speaker A
lleven simplemente al index.html, varios enlaces que pues de relleno, por ejemplo, inicio. Okay, perfecto, se actualizó la pantalla quedando así. Ya tenemos nuestro menú hecho a nivel de HTML. Luego tenemos que definir la parte del contenido. Para eso
Speaker A
voy a utilizar la etiqueta section. Es una caja y le voy a poner una id que va a ser content. Luego esto lo voy a poder seleccionar mediante CSS y aquí dentro pues voy a crearme varios artículos con la etiqueta article. El no
Speaker A
puedo definir varios artículos padre también semánticamente. Esto es mejor a nivel SEO y a nivel de entender qué hace esta caja, que es crear un artículo. Le voy a poner una clase que va a ser la clase art, que igual que la etiqueta
Speaker A
vale, y aquí le voy a poner a cada artículo un h2 que sea título del artículo y luego voy a poner un párrafo que va a ser texto del artículo. Ok, voy a copiar esto varias veces para tener
Speaker A
cuatro artículos. Perfecto, y ya tengo la parte de mi contenido a nivel estructura, a nivel de HTML. Luego vamos con la barra lateral. La barra lateral la vamos a poner fuera de la sección, y la barra lateral va a ser
Speaker A
un elemento con la etiqueta aside. La etiqueta aside sirve para lo mismo, hacer una caja, pero semánticamente representa una barra lateral, y aquí en la barra lateral simplemente voy a poner un h2 que diga barra lateral y luego voy a
Speaker A
poner un formulario con un buscador, form, y voy a poner un input de tipo texto y voy a poner un botón input de tipo submit, en el value buscar. Voy a definir ya por último mi pie de página, que es el
Speaker A
pie de página. Básicamente lo voy a poner también al final de la etiqueta que contiene todo, que es el container. El pie de página sería con la etiqueta footer, que representa también pues un pie de página, y aquí voy a poner
Speaker A
Víctor Robles Web. Guardo, actualizo la pantalla y ya tengo todo mi HTML definido. Ahora toca darle forma. Para eso vamos a utilizar el CSS. ¿Cómo podemos empezar a trabajar con CSS? Pues lo podemos hacer de varias formas. Por ejemplo, podemos
Speaker A
crear en el head de la página la etiqueta style. Con la etiqueta style yo puedo empezar a codificar CSS, por ejemplo puedo darle un background o un color a la página. ¿Cómo puedo hacerlo? Pues puedo utilizar los selectores para seleccionar
Speaker A
los diferentes tipos de elementos. Tengo principalmente tres tipos de selectores: el selector de etiqueta, que yo puedo poner perfectamente en la etiqueta body, abro las llaves y aquí puedo poner reglas de CSS; luego tengo el selector de id, que es de esta manera, yo puedo
Speaker A
seleccionar por ejemplo el container y puedo poner dentro de las llaves diferentes propiedades CSS; y luego también tengo el selector de clases principalmente, que yo puedo seleccionar por ejemplo artículos, lo que tenga esa clase, y puedo ponerle propiedades CSS
Speaker A
dentro a la regla. Vale, principalmente por ejemplo si yo al body le pongo regla CSS, por ejemplo hay una regla muy conocida que es el background, yo lo puedo poner un background con el color que yo quiera, por ejemplo le puedo poner con
Speaker A
el color en inglés que yo quiera, por ejemplo si le pongo red automáticamente mi página web va a tener el background rojo. Ok, en este caso me interesa que el color de la página web sea un color gris, por ejemplo, entonces voy a poner el
Speaker A
color al body, incluso con el color lightgray para que sea un color gris suave. Hay un montón de colores que están expresados en texto de esta manera. Luego también está el color RGB y los colores a decimales, pero eso sí, lo explico todo, se
Speaker A
alarga muchísimo el vídeo, entonces no me da tiempo. Ok, pues de esta manera puedo poner estilo CSS en mis páginas web, pero hay otra forma de hacerlo que es simplemente creando una hoja de estilo y en mi
Speaker A
proyecto que sea misestilos.css, por ejemplo, y puedo todos estos estilos que yo he creado cortarlo y pegarlos dentro de esa hoja de estilo, y ahora puedo vincular esa hoja de estilo aquí. ¿Cómo lo puedo hacer? Con la etiqueta
Speaker A
link rel="stylesheet" y le voy a poner el href para seleccionar el archivo. Dentro del atributo selecciono el archivo de estilo, selecciono misestilos.css y cierro la etiqueta link. De esta manera el resultado va a ser el mismo, pero es
Speaker A
mucho mejor práctica porque realmente tengo separado el HTML del CSS y así no tenemos código espagueti, que tenemos mezclado código. Quiero cambiar también la fuente. ¿Cómo puedo cambiar la fuente del tipo de texto que tengo en mi página web? Pues por ejemplo
Speaker A
Google dice la etiqueta font-family y yo quiero que toda mi página web tenga la fuente Arial.
Speaker A
del equipo del usuario que visite la página web siento equipo tiene instaladas cualquiera de estas fuentes pues las puede llegar a cargar la página web aquí vemos que ha cambiado la fuente ahora vamos a empezar a darle forma a la
Speaker A
página web quiero tener una cabecera roja que ocupe todo este espacio más o menos y que tenga un texto en el centro por ejemplo cómo puedo hacerlo pues bueno lo primero que tengo que hacer es seleccionar el container y darle un
Speaker A
espaciado de alguna forma el container tiene este identificador y para seleccionar un elemento con un identificador tengo que utilizar la almohadilla y luego el nombre del identificador en este caso container ahora lo que voy a hacer va a ser
Speaker A
ponerle un ancho al container en mi caso voy a poner un ancho un width del por ejemplo 70% del 70% del ancho de la pantalla también lo puedo hacer en píxeles por ejemplo podría poner un ancho de 1100 píxeles lo que tú quieras
Speaker A
puedes utilizar cualquiera de las dos luego también puedo poner un comentario para que no me intérprete cualquiera de estas reglas y el ancho de la pantalla va a ser o el ancho del container va a ser de 1.100
Speaker A
píxeles y esto hizo la pantalla aquí no veo ningún cambio pero si yo utilizo la propiedad de ese margin para poner unos márgenes y le pongo cero pixels auto lo que va a hacer es centrarme ese elemento al centro de la página web lo más que
Speaker A
pueda vale también le puedo poner unos bordes para ver qué estamos haciendo lo puedo poner bordes un píxel solid red o que hicieron con punto y coma actualizo la pantalla y automáticamente veo que tengo esta caja con este tamaño centrada
Speaker A
al medio bien se lo voy a poner el borde black el borde en negro para verlo mejor y que no nos confundamos y ahora voy a hacer lo que es la cabecera la cabecera tiene una etiqueta header vale yo puedo
Speaker A
seleccionarla directamente con el selector de etiqueta entonces puedo seleccionar la etiqueta header porque sólo tenemos una en la página le voy a poner por ejemplo un background red vale le voy a poner un fondo rojo se actualizó la pantalla aquí tengo mi
Speaker A
fondo rojo luego le voy a dar un tamaño evidentemente aquí en el diseño o en la maqueta más o menos que tenemos tiene un tamaño tiene una altura etcétera entonces le voy a poner un hate una altura de por ejemplo 100 pixels y
Speaker A
poner un width es decir una anchura del 100% ok sí guardo y esto lo hizo la pantalla aquí veo que tiene esta forma luego también le voy a quitar los márgenes lo que es el h1 lo que tiene
Speaker A
márgenes por tanto a la 1 le debo quitar los márgenes o poner directamente una regla que es la siguiente puedo seleccionar todos los elementos de la página web con el asterisco y de esta manera si seleccionado todos los
Speaker A
elementos por ese tener ciertos estilos que vienen por defecto en el navegador por ejemplo puedo poner margin 0px el para que no haya ningún tipo de margen y ningún tipo de padding para el padding es el margen interior dentro de una caja
Speaker A
que eso lo veremos ahora después vale actualizo la pantalla y aquí lo veo cabe resaltar que si yo por ejemplo creo más elementos header van a tener los mismos estilos todos van a tener el mismo tipo de fondo etcétera etcétera porque porque
Speaker A
es la misma etiqueta por tanto le va a aplicar los mismos estilos el único ese lector que no se puede repetir es el id es decir yo no puedo tener en una misma página html no puedo tener cinco
Speaker A
elementos con el mismo y de containers eso no puedo hacerlo pero con el resto de electores que hay de etiqueta o de clases y que puedo hacer lo sé ahora me falta centrar el texto cómo puedo centrar un texto para
Speaker A
que se quede en medio pues con la propiedad text align centre ok de esta manera lo muevo aquí y se me centra luego también puedo centrar los verticalmente para que se me quede en medio como lo puedo hacer eso pues puede
Speaker A
utilizar la propiedad line height y voy a ponerle 100 píxeles porque le pongo 100 píxeles porque es la altura que tiene la caja sigue le indico la misma altura que tiene la caja lo que hace es ponerse la línea en medio para entonces
Speaker A
de esta manera colocó ese texto aquí luego si yo quiero cambiarle por ejemplo el color al texto puede utilizar la propiedad color vale yo le puedo poner por ejemplo white para que me ponga un color blanco de letra se actualizó la
Speaker A
pantalla aquí lo veo ok y también puedo ponerle un borde para ver qué estamos haciendo para separarlo de cualquier otro elemento le puedo poner un border y después indicar a esta propiedad border como estamos viendo aquí en las
Speaker A
sugerencias de código le puedo poner un border bottom es decir que sea por abajo sigue le cambio el botón por top por wright por led de puedo poner bordes por cualquiera de los lados que yo quiera de la caja si yo le pongo un borde
Speaker A
por abajo de 3 píxels sólido o diet incluso si le pongo diet es como un borde punteado y se lo pongo de color blanco de esta manera lo que va a pasar es que me va a colocar un borde por aquí
Speaker A
abajo por debajo de la caja vale lo siguiente que vamos a hacer va a ser el menú que básicamente es un menú con elementos uno al lado del otro lo que voy a hacer es seleccionar la anap selecciono la anap y luego voy a
Speaker A
seleccionar elementos que dentro de la anap como por ejemplo el huele y el lic entonces todo el estos elementos y lo voy a colocar uno al lado del otro lo primero que voy a hacer va a ser poner
Speaker A
iun float left que va a hacer esto que cada uno de esos elementos se floten a la izquierda y se pongan al lado del otro vale si actualizamos la pantalla veo que esos elementos se han colocado así vale luego también voy a separar
Speaker A
cada uno de esos elementos y le voy a quitar los estilos que vienen por defecto voy a poner un list style nones para que no tengan ningún tipo de estilo vale y luego poner un margen de 10 píxeles a todos los elementos por todos
Speaker A
los lados para que separen un poco más ahí lo veo luego también voy a hacer que los elementos de abajo no suban hacia arriba como puedo hacer esto pues directamente voy a utilizar una etiqueta aquí de la nahp que va a ser un 10 y le voy a
Speaker A
poner una clase clear fix crear fix de esa manera lo que voy a hacer es que yo le voy a dar un estilo a esta clase de clear fix punto clear fix para seleccionar la clase clear fix que he
Speaker A
definido en mi html y aquí le voy a poner un clear post es decir que cuando yo floto los elementos los elementos de abajo se queden en su sitio de esa manera se queda de esta manera luego perfecto yo quiero darle un background
Speaker A
amina quiero ponerle a mina un background quiero ponerle un fondo esto le voy a poner un background voy a poner un light blue que es un fondo azul claro ok se actualizó la pantalla no lo veo por qué tengo que dar una altura y una
Speaker A
anchura sobre todo a mi nacen le voy a poner una altura de 50 pixels y guardo y actualizó la pantalla y la tengo de ese color definida luego también voy a poner cada uno de los enlaces del menú lo voy
Speaker A
a poner centrado vale como lo puedo hacer directamente aquí le pongo un line height y voy a poner 30 y ahí se queda más o menos centrado en los enlaces que van los enlaces también les podría cambiar el color etcétera vale pues
Speaker A
ahora le voy a poner un borde también de un pixel solid black a minas por debajo se va a poner por debajo un border botón y pasamos los siguientes elementos que tenemos que darle estilo lo siguiente a lo cual le
Speaker A
tenemos que dar estilo al contenido y en la barra lateral entonces el contenido de unidad content por tanto voy al seleccionar ese contenido para seleccionar el y the content vale y que le vea es que le dará unos estilos es a
Speaker A
poner un float left para que se me vaya a la izquierda y luego también tengo que seleccionar la sal que es una etiqueta que no tiene ningún tipo de clase ni idea ni nada y voy a poner un float
Speaker A
también led para que se coloque al lado eso sí tengo que darle una anchura etcétera por ejemplo aquí sí que tiene sentido que utilizamos porcentajes por ejemplo le voy a poner un 80 por ciento al contenido y un 20 por ciento a la
Speaker A
barra lateral le voy a poner un width del 80 por ciento el contenido y también le voy a poner un background greening para que se vea claramente y luego a lo que es el a xavi le voy a poner un width
Speaker A
del 20 por ciento para que ocupe ese espacio restante y poner un background orange aunque hicieron con punto y coma ward autorizó la pantalla y aquí veo que los elementos se colocan que pasa que los elementos de abajo es decir el footer se
Speaker A
me sube para arriba entonces lo que tengo que hacer es poner el elemento clear fi copio y lo pongo justo debajo de la side para que el futuro no se me suba hacia arriba y se me quede en su
Speaker A
sitio ahora voy a darle también una altura a estos elementos es decir le voy a poner por ejemplo un min hate es decir una altura mínima de 500 píxeles eso se lo voy a poner tanto al content como a la side ok sí guardo
Speaker A
actualizo la pantalla aquí veo que tengo el contenido por aquí y la barra lateral por acá luego al footer también le puedo poner unos estilos como selección el footer pues simplemente utilizó la etiqueta footer y le dé unos estilos ya
Speaker A
poner un background black le va a poner un color de texto white le voy a poner un text align centre un hate también de 50 píxeles y voy a ponerle un línea hate para que me centre verticalmente la
Speaker A
línea de texto voy a poner también 50 píxeles ok guardo actualizó la pantalla y ya tengo mi footer montado ahora vamos a ver una cosa interesante que es el tema de los márgenes yo puedo poner márgenes por fuera y por
Speaker A
dentro por ejemplo yo la barra lateral ms ms para el contenido que tiene dentro de los bordes que hay no entonces yo por ejemplo en las 6 le puedo poner un padding de 10 píxeles y de esa manera
Speaker A
qué va a pasar que si actualizo la pantalla veo que se me hace más grande pero se me separe un poco de los laterales vale entonces qué puedo hacer para no tener este error pues lo que puedo hacer es utilizar la función cal
Speaker A
lo que voy a hacer va a ser precisamente eso al 20% le voy a quitar 10 píxeles de un lado de la izquierda y de la derecha decir si le quito 20 píxeles se me va a quedar igual de ajustado que antes vale
Speaker A
fíjate que se me queda con los padres igualmente pero ajustado perfectamente porque al 20% que tiene de espacio la barra lateral le quito los 10 píxeles que tiene de padín por un lado y los 10 pinceles que le he puesto de padín por
Speaker A
otro eso es así porque el país lo que hace es darle unos márgenes interiores por arriba por abajo por la izquierda y por la derecha también puedo poner padding solamente por left y right vale para que lo entiendan mejor ok
Speaker A
también lo puedo hacer así y también puedo hacerlo por arriba de poconé también un país top mayor incluso de 50 o de 40 píxeles y me va a separar y eso de ahí lo que ya lo estamos viendo
Speaker A
se lo voy a reducir un poco porque no me gusta pero pero bueno ahí se está viendo luego también puedo hacer lo mismo con el contenido es decir yo al contener le puedo poner un padding general por todos
Speaker A
lados de 40 píxeles vale eso sí tendría que quitarle a lo que es el wish les voy a utilizar la función call y lo que voy a hacer es restarle al 80% le voy a restar 80 píxeles que tengo extra por
Speaker A
los laterales por el patín por la imagen interior que le estoy poniendo de esta manera ahí tengo mi contenido luego voy a hacer otra cosa que va a ser darle unos estilos a los artículos vale los artículos tienen la clase arctic el
Speaker A
vales el gusto an para los artículos puedo tener todas las clases que yo te quiera repetidas tantas veces como quieras lo que no puedo hacer lo mismo con los ideas pero con las clases y entonces voy a seleccionar esa clase
Speaker A
punto arctic el y le voy a dar 1 estilo a esos artículos lo primero que voy a hacer va a ser ponerle un color de texto diferente color white y le voy a poner un margin top a cada elemento de 15
Speaker A
píxels y un marín botón un margen por abajo de 15 píxeles esto lo que hace es poner un margen por arriba y por abajo ok aquí lo estamos viendo que le ha metido ese margen lo igualmente podría aumentar ese margen y tal pero
Speaker A
lo que voy a hacer es poner un borde border botón de un píxel solid y se lo voy a poner clarito con almohadillas y le voy a poner un gris muy clarito o casi blanco entonces actualizó la pantalla ahí lo veo también me interesa
Speaker A
que hay un padding un poco de padding padding botón de 10 píxeles para que se pare un poco la línea divisoria de ahí vale y ya veo que tengo los diferentes artículos por aquí vale también puedo hacer una cosa interesante que
Speaker A
seleccionar el primer artículo arctic el first child y de esa manera puedo ponerle también un borde un borde como este pero por arriba vale en el top ok y ahí lo veo también le voy a poner un padding top de 10 píxeles también oye y
Speaker A
ya estoy viendo como un estudiando estilo para esto y luego también podría modificar el tamaño de los h 2 que tengo dentro de los artículos arctic el h 2 es decir selecciona men todos los elementos h 2 que haya dentro de cada uno de los
Speaker A
artículos con esa clase y le voy a poner un fondo size vale es una propiedad que me permite cambiar el tamaño de la fuente a 25 píxeles por ejemplo guardo actualizar la pantalla y esto es un poquito más grande ahora así que con
Speaker A
esto hemos visto css y ya hemos aprendido lo más fundamental y le monta de unos estilos basándonos en una maquetación o en un diseño muy básico que teníamos previamente hecho si quieres continuar aprendiendo css muchísimo más avanzado te recomiendo que te apunte a mi máster
Speaker A
en css en el cual te voy a enseñar todo acerca de css su ecosistema y acerca de la maquetación web profesional este curso lo tienes justo aquí abajo en la descripción del vídeo tienes un enlace para entrar directamente y
Speaker A
apuntarte es el curso más potente y más completo que va a encontrar acerca de css de la maquetación web y todo este tipo de temática que gira en torno a darle estilo y forma a una página web para que se quede lo más profesional y
Speaker A
más increíble posible así que te lo voy a enseñar todo en ese curso tienes el acceso a aquí abajo en la descripción del vídeo entra a verlo y apúntate porque te va a encantar y te va a ayudar
Speaker A
muchísimo y sin más nos vemos en el próximo vídeo de este canal de youtube suscríbete y activa la campanita de notificaciones para no perderte los próximos vídeos y nos vemos en el siguiente chao
Topics:CSSHTML5estilos webVisual Studio Codeselectores CSSmaquetación webhojas de estilodiseño webprogramación webtutorial CSS
