CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
Summary
TLDREn este episodio del curso de CSS, se explica cómo empezar a trabajar con tecnologías de CSS en un archivo HTML. Se muestra cómo agregar CSS directamente en un archivo HTML utilizando la etiqueta 'style' y cómo crear un archivo CSS separado para enlazarlo con el archivo HTML. Se enfatiza la importancia de la selección de elementos, la modificación de propiedades y la creación de enlaces entre archivos para una mejor organización y manejo de estilos en páginas web. Además, se sugiere dividir el editor para visualizar tanto el código HTML como el CSS al mismo tiempo, facilitando el aprendizaje y la implementación de CSS.
Takeaways
- 😀 El vídeo es parte de un curso de CSS y es el episodio número 2.
- 🎨 Se explica cómo implementar CSS directamente en un archivo HTML utilizando la etiqueta `<style>`.
- 📝 Se menciona la necesidad de identificar el tipo de la etiqueta `<style>` con `type="text/css"`.
- 🌐 Se detalla cómo modificar el fondo de una página web utilizando la propiedad `background` en CSS.
- 🔵 Se ejemplifica el uso de un color específico ('azul' en inglés 'blue') para el fondo del body de una página web.
- ✅ Se recalca la importancia de guardar los cambios con `Ctrl + S` para ver los efectos inmediatos en el navegador.
- 🔗 Se enseña cómo enlazar un archivo CSS externo con un archivo HTML utilizando la etiqueta `<link>`.
- 📂 Se sugiere la creación de un nuevo archivo CSS llamado `estilos.css` para separar el estilo del contenido HTML.
- 🛠️ Se recomienda la edición simultánea de archivos HTML y CSS en un editor para facilitar el aprendizaje y la implementación de CSS.
- 🔍 Se enfatiza la revisión del documento HTML y su traducción al lenguaje CSS para un aprendizaje efectivo.
Q & A
¿Qué herramienta se utiliza para editar el código en el video?
-Se utiliza Visual Studio Code para editar el código en el video.
¿Cuál es el primer paso para implementar CSS en un archivo HTML según el video?
-El primer paso es posicionarse debajo del elemento `<head>` en el archivo HTML y agregar la etiqueta `<style>`.
¿Cómo se identifica un bloque de estilos CSS dentro de un archivo HTML?
-Un bloque de estilos CSS se identifica con la etiqueta `<style>`, que debe contener el atributo `type` con el valor 'text/css'.
¿Qué selector se utiliza en el ejemplo para cambiar el fondo de la página web?
-Se utiliza el selector `body` para cambiar el fondo de la página web.
¿Qué propiedad CSS se usa para cambiar el color de fondo de la página web en el ejemplo?
-Se utiliza la propiedad `background` para cambiar el color de fondo de la página web.
¿Cómo se introduce un color en la propiedad `background` en CSS según el video?
-Se escribe el color en inglés, en este caso 'blue', para establecer el color de fondo.
¿Qué se debe hacer después de escribir el código CSS para ver los cambios en el navegador?
-Se debe presionar 'Control + S' para guardar los cambios y luego se actualiza el navegador para ver los cambios reflejados.
¿Cómo se enlaza un archivo CSS con un archivo HTML para que ambos trabajen juntos?
-Se utiliza la etiqueta `<link>` dentro de la sección `<head>` del archivo HTML, estableciendo el atributo `href` con la ruta al archivo CSS.
¿Cuál es la extensión del archivo creado para contener los estilos CSS en el video?
-El archivo creado para los estilos tiene la extensión '.css', en este caso se llama 'estilos.css'.
¿Cómo se recomienda organizar el editor de código para trabajar con HTML y CSS al mismo tiempo?
-Se recomienda dividir el editor en dos paneles para poder ver y editar simultáneamente el código HTML y el código CSS.
¿Qué se debe hacer al final del video para continuar aprendiendo sobre CSS en el siguiente episodio?
-Se debe revisar el documento 'index.html' y trasladar el código relevante al archivo CSS, siguiendo las prácticas vistas en el video.
Outlines
💻 Introducción al Curso de CSS
El primer párrafo introduce el episodio número 2 de un curso de CSS. Se menciona que se van a dar los primeros pasos para entender la tecnología de CSS. Se describe el proceso de trabajar con CSS directamente en un archivo HTML, utilizando la etiqueta 'style' en el documento. Se explica cómo se utiliza un selector, en este caso 'body', para aplicar estilos como el color de fondo de la página web. Se da un ejemplo específico de cómo cambiar el fondo a azul utilizando la propiedad 'background'. Además, se subraya la importancia de guardar los cambios con 'control s' para ver los efectos en el navegador y se menciona la necesidad de crear un archivo CSS separado para organizar mejor los estilos.
🔗 Enlazando Archivos HTML y CSS
El segundo párrafo se centra en cómo enlazar un archivo HTML con un archivo CSS. Se habla sobre la creación de un nuevo archivo CSS llamado 'estilos.css' y cómo es importante que el nombre del archivo en el enlace 'link' en el HTML coincida con el nombre del archivo CSS. Se muestra el proceso de cambiar el nombre del archivo y cómo guardar los cambios para que se vean reflejados en el navegador. Se da un ejemplo de cómo modificar el color de fondo del navegador utilizando CSS y se sugiere la utilización de un editor de código dividido para trabajar con HTML y CSS simultáneamente, facilitando el aprendizaje y la organización del código.
Mindmap
Keywords
💡CSS
💡Selector
💡Propiedad
💡Valor
💡Archivo HTML
💡Etiqueta Style
💡Archivo CSS
💡Enlace (Link)
💡Visual Studio Code
💡Dividir el editor
Highlights
Inicio del episodio 2 del curso de CSS.
Objetivo de entender CSS y dar los primeros pasos.
Sección de música introductoria.
Organización del entorno de trabajo en Visual Studio Code.
Introducción de CSS en el mismo archivo HTML utilizando la etiqueta 'style'.
Explicación de la sintaxis CSS: selector, llaves y propiedades.
Cómo modificar el fondo de la página web utilizando la propiedad 'background'.
Importancia de cerrar correctamente las propiedades con punto y coma.
Cómo ver los cambios en el navegador después de guardar (Ctrl + S).
Creación de un nuevo archivo CSS y su importancia en la estructura del proyecto.
Enlace entre el archivo HTML y el nuevo archivo CSS utilizando la etiqueta 'link'.
Importancia de nombrar correctamente el archivo CSS para que coincida con la etiqueta 'link'.
Visualización del cambio de color en el navegador al enlazar correctamente los archivos.
Introducción de la etiqueta 'body' y la propiedad 'background' en el archivo CSS.
Explicación de cómo guardar cambios en el archivo CSS y verlos reflejados en el navegador.
Recomendación de dividir el editor para ver tanto el código HTML como el CSS al mismo tiempo.
Conclusión del episodio y anticipación al siguiente episodio con más detalles de CSS.
Transcripts
[Música]
qué tal amigos ya estamos de regreso con
nuestro curso de css en nuestro episodio
número 2 vamos a dar nuestros primeros
pasos que nos ayudarán a entender esta
tecnología
[Música]
y bien nos habíamos quedado en este
punto bien lo primero que vamos a hacer
es dejarlo así ok en este punto
recogiendo todas las ventanas de por
demás esto vamos a traerlo un poquito
más acá para tener un mejor trabajo que
aquí lo tienen y bien ahora qué vamos a
hacer vamos a implementar código css
pero en este caso lo vamos a hacer en
este mismo archivo en el mismo index no
vamos a crear ningún archivo ok
alguna vez vamos a tener la necesidad de
crear código css precisamente en un solo
archivo html cómo se hace eso pues lo
que vamos a hacer es venirnos por debajo
del dato ok y lo que yo voy a poner es
la etiqueta style este y dentro de ésta
el yo necesito identificarlo básicamente
con un tipo key con taipei y dentro de
type voy a poner la referencia que vamos
a ver un texto
y diagonal css ok simplemente eso dentro
de este dentro de esta etiqueta style
vamos a poner nuestro primer código css
como trabaja css se realiza de la
siguiente manera lo primero que hacemos
es depositar un selector ok más adelante
vamos a ver el tema de los electores
pero en ese instante el selector más
próximo podría ser una etiqueta que te
parece si llamamos a body como una
etiqueta ok entonces todo lo que
contenga el body lo voy a poder
modificar cambiar darle algún aspecto
que entonces voy a llamar a body
escribo body precisamente y necesitamos
darle un parámetro ok un inicio y un
final donde inicia donde termina ok para
que afecte una de las propiedades la
propiedad es una acción o una forma que
vamos a implementar a nuestra página web
en este caso yo voy a escribir
background que básicamente lo que va a
hacer es cambiar el fondo de mi página
web en este caso todo lo que contenga el
body bien en este caso también vale la
pena recalcar que voy a introducir un
color y el color lo debo escribir en
inglés en este caso qué te parece el
blog ok y para terminar esta sentencia
debo concluir con un punto y coma ok
básicamente esto es ese s necesitamos un
selector un inicio y un final una
propiedad en este caso para ti ground el
cual tiene un valor como el tema es de
fondo lo que vamos a usar como valor es
un color en este caso tiene que ser en
inglés
es blog muy bien ahora para ver el
cambio recuerda control s
y ahí lo tienes todo lo que contenga el
body lo tiene de color azul
ok tú lo actualice si vas a tener el
cambio
ok recuerda esto es lo que usamos si
queremos usar css dentro de mi documento
html ok
este es el paso que tienes que hacer
para implementar precisamente la
tecnología de css en un mismo archivo
html ahora para el segundo punto y el
más importante vamos a mostrar todo este
tipo de estilo
aunque hoy vamos a dejarlo tal como
estaba y ahora lo que vamos a hacer es
venirnos nuevamente al explorador y
dentro de nuestra carpeta web vamos a
crear un nuevo archivo new file en el
cual vamos a ponerle de nombre estilos
ok
estilos punto c s s
ok muy importante este punto
y ahí lo tienen ya tengo mi nuevo
archivo css de hecho si me voy a la
carpeta ahí lo tienen porque es muy
diferente al punto html tienen este tipo
de icono que hace semejanza a un nuevo
archivo de este estilo punto css porque
no vamos a entrar más detalles lo que
nos importa es saber cómo se maneja bien
en este punto lo que necesito combinar
es index con estilos ok necesito que
trabajen juntos ok entonces para hacerlo
necesito enlazar index con estilos y eso
lo vamos a hacer precisamente en este
punto ok lo que yo voy a hacer es
escribir la palabra link que aquí en
visual studio code ya viene por defecto
esta opción no voy a seleccionar
y en este caso también por defecto
también lleva el nombre de styles ok
este nombre es el que debe tener
precisamente nuestro archivo en mi caso
no se llama style se llama estilo
entonces precisamente en este punto
vamos a cambiar el nombre por estilos
ok tiene que estar con el mismo nombre
que hemos creado el archivo ok
esti los puntos es ese simplemente eso
presionamos control s para guardar los
cambios y automáticamente hemos visto
que nuestro navegador se puso de color
blanco obviamente porque no tengo
ninguna propiedad de color para otorgar
a mi navegador ok entonces ahora vamos a
irnos a estilos
ok y dentro de estilos vamos a hacer lo
siguiente
volvemos a introducir body como
referencia y esto ya lo habíamos visto
anteriormente vamos a poner la ground
vamos a cambiarlo qué te parece habéis
ok muy bien punto y coma
presionamos controles y ahí tienen el
cambio ok entonces lo elemental vamos a
crear un nuevo archivo lo vas a enlazar
con esta línea de código poniendo el
nombre y también vamos a poder crear un
nuevo documento de este tipo de estilo
ok muy bien
[Música]
ya para terminar el vídeo a notar que
vamos a tener que revisar nuestro
documento index y plasmarlo en css
nuevamente ingresamos a index
seleccionamos la parte que necesitamos y
lo implementamos este tipo de trabajo
puede ser algo complicado e incluso
puede demorar nos bastante entonces lo
que yo te recomiendo es primeramente
seleccionar esta opción que es dividir
nuestro editor de esta manera acá yo voy
a llevar seis ese es de manera ok cosa
que podamos ver los dos al mismo tiempo
tanto nuestro código html como también
el css que este es el modo de trabajo
que te recomiendo que lo hagamos para
iniciarse precisamente con este
aprendizaje web ok bien vamos a dejarlo
hasta este punto nos vemos en el
siguiente episodio y abriendo cosas
específicas dentro de ss
[Música]
Ver Más Videos Relacionados
5.0 / 5 (0 votes)