CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS

yacklyon

30 May 201907:18

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

00:00

💻 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.

05:02

🔗 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

CSS, siglas en inglés de 'Cascading Style Sheets', es un lenguaje de estilos utilizado para describir la presentación de un documento written in HTML. En el guion, CSS se menciona como la tecnología en la que se está trabajando, y se explica cómo se implementa en un archivo HTML para cambiar la apariencia de una página web, como por ejemplo, el color de fondo.

💡Selector

Un 'selector' en CSS es una regla que determina qué elementos del documento HTML serán afectados por las declaraciones de estilo. En el guion, se menciona que se utiliza un selector para modificar elementos como el 'body', que representa el cuerpo de la página web, para cambiar su apariencia.

💡Propiedad

Una 'propiedad' en CSS define cómo se aplicará un aspecto específico a los elementos seleccionados. En el video se ejemplifica cómo se utiliza la propiedad 'background' para cambiar el color de fondo de la página, lo cual es una de las muchas propiedades disponibles en CSS para controlar la apariencia de los elementos.

💡Valor

Un 'valor' en el contexto de CSS es el dato que se asigna a una propiedad para definir su apariencia. Por ejemplo, en el guion se menciona el valor 'azul' para la propiedad 'background', lo que indica que el color de fondo de la página debe ser azul.

💡Archivo HTML

Un 'archivo HTML' es un documento que define la estructura de una página web. En el guion, se habla sobre cómo se puede incluir CSS directamente en un archivo HTML utilizando la etiqueta 'style', permitiendo así aplicar estilos directamente en el documento.

💡Etiqueta Style

La 'etiqueta style' en HTML se utiliza para incluir hojas de estilo en línea directamente en un documento. En el guion, se muestra cómo se coloca la etiqueta 'style' dentro de un archivo HTML para comenzar a escribir código CSS que afectará al documento.

💡Archivo CSS

Un 'archivo CSS' es un documento que contiene reglas de estilo para un sitio web. En el guion, se explica cómo se crea un archivo separado con extensión '.css' y cómo se enlaza con un archivo HTML para aplicar los estilos de manera más organizada.

💡Enlace (Link)

El término 'enlace' en el contexto de HTML y CSS se refiere a la forma en que se conecta un documento HTML con un archivo CSS. En el guion, se menciona cómo se utiliza la etiqueta 'link' para vincular un archivo CSS con un documento HTML, permitiendo así que los estilos definidos en el archivo CSS se apliquen al documento HTML.

💡Visual Studio Code

Visual Studio Code es un editor de código fuente desarrollado por Microsoft. En el guion, se utiliza Visual Studio Code como el entorno de desarrollo para escribir y editar archivos HTML y CSS, mostrando cómo se guarda el trabajo con 'Control + S' y cómo se visualiza el resultado en el navegador.

💡Dividir el editor

La capacidad de 'dividir el editor' se refiere a la función en algunos editores de código, como Visual Studio Code, que permite ver y editar múltiples archivos a la vez en diferentes paneles. En el guion, se recomienda dividir el editor para poder ver y trabajar simultáneamente en el archivo HTML y en el archivo CSS, lo que facilita el proceso de desarrollo web.

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.