Aprende CSS en 15 Minutos 📘

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 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 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 para aprenderse ss 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 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 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 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 definir la estructura de mi página web ok para ello voy a definir el dock type luego la etiqueta html luego entre la etiqueta html la etiqueta head donde va a definir los metadatos y información necesaria para el navegador 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 vistos roble ok ahora le 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 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 dif y comúnmente un dip básicamente es una caja y le voy a poner un identificador una idea que va a ser container este y demás me va a servir para luego seleccionar en el cs

que yo quiero darle un tamaño de esta caja unos colores a esta caja etcétera por tanto dentro del container voy a hacer todo mi html luego que tengo que hacer tengo que definir mi cabecera para ello lo que voy a hacer es utilizar la etiqueta header la etiqueta g de html5 me va a permitir pues eso crear una caja 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ántica por tanto son mejor para optimización deseo para entender qué hace cada etiqueta también

dentro del header voy a poner el h1 que va a ser el título de la web que css con visto roble vale luego voy a definir un menú para definir un menú lo que voy a hacer es utilizar la etiqueta naft la etiqueta anav también es una etiqueta semántica de html5 que va a permitir pues eso definirme una barra de navegación vale un menú dentro voy a definir un well es una lista desordenada y le voy a definir diferentes elementos por ejemplo varios enlaces con la etiqueta h red varios enlaces que me 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 voy a utilizar la etiqueta section era una caja y le voy a poner una idea 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 arctic el no puedo definir varios artículos padre también semánticamente esto es mejor a nivel deseo y el nivel de

entender que hace esta caja que es crear un artículo le voy a poner una clase que va a ser la clase art y que igual que la etiqueta vale y aquí le voy a poner a cada artículo un h 2 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 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 un elemento con la etiqueta site la etiqueta site 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 h 2 que diga barra lateral y luego voy 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 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 represento también pues un pie de página y aquí voy a poner 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 como podemos empezar a trabajar con css pues lo podemos hacer de varias formas por ejemplo podemos 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 como puedo hacerlo pues puedo utilizar los selectores para seleccionar 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 ss luego tengo el selector de ide que es de esta manera yo puedo 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 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 el color que yo quiera por ejemplo le puedo poner con el color en inglés que yo quiera por ejemplo si le pongo red automáticamente mi página web para 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 color al incluso con el color light gray 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 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 me una hoja de estilo y en mi proyecto que sea me estilos punto 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í como lo puedo hacer con la etiqueta link wray style sit y le voy a poner el h red para seleccionar el archivo dentro de atributo seleccionar el archivo de estilo selecciono estilos css y cierro la etiqueta link de esta manera el resultado va a ser el mismo pero es mucho mejor práctica porque 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 como puedo cambiar la fuente del tipo de texto tengo en mi página web pues por ejemplo google dice la etiqueta font family y yo quiero que toda mi página web tenga la fuente arial y si no tiene la fuente área no ocupe la fuente helvética y si no la fuente sanserif esto es en función 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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

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 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 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 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 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 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 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í 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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