Curso basico de css desde 0 - introduccion

[Música] [Música] hola qué tal amigos bienvenidos sean este nuestro curso básico de css mi nombre es carlos alto y bien pues en este primer capítulo te voy a estar adentrando en lo que es este lenguaje de hojas de estilos llamado css que nos permiten bueno darle lo que es color forma y estilo a lo que son nuestras páginas web tal como puedes ver aquí en pantalla yo tengo un sitio una maqueta muy sencilla de lo que podría ser una página web tengo un menú tengo un logotipo que tendré siendo nuestro header tengo contenido tengo contenido secundario y bueno tengo el pie de página este sitio como sabrás en el capítulo en el curso pasado de html que si no lo has visto te recomiendo que lo veas es importante que sepas el html esto es html nosotros hacemos esto con lo que es nuestro lenguaje de marcado que es html y nosotros con css le damos colores formas y tamaños a todo nuestro documento y es de lo que trata de este curso esto es lo que vamos a estar aprendiendo a hacer más estar aprendiendo sobre las propiedades básicas de cada elemento vamos a aprender cómo utilizarlas y bueno al final vamos a estar maquetando un sitio así como este que tenemos aquí así que bien pues vamos a comenzar primero que nada por ver que ss ese como dije al principio el vídeo css es un lenguaje de hojas de estilos css no es un lenguaje de programación ni html tampoco lo es se es ese es un lenguaje que nos permite de alguna manera resumir controlar el aspecto y la presentación de los elementos que tiene cada elemento en un sitio web en el curso pasado de html ya te enseñe que en un elemento por ejemplo un elemento de título un elemento de párrafo de enlace de imágenes etcétera esto es lo que nos permite css darle propiedades y que estas propiedades modifiquen prácticamente el aspecto de lo que son nuestros elementos durante el curso puedes tener quizás las dudas quizás también si investigas por tu cuenta porque esto este puesto para así como con html html 5 también existe css y css3 entonces cuál es la diferencia es exactamente lo mismo css3 es igual que htc s s en este caso se le conocen a todo lo que estamos viendo como css css3 es simplemente una actualización que agrega nuevas cosas pero no significa que modifique cosas anteriores por lo cual no hay ningún problema simplemente son cosas nuevas que tendrías que aprender en este curso ya vamos a estar viendo directamente cosas relacionadas con esta nueva versión de css por lo cual no vas a tener ningún problema y este adware entra a adentrar como decía las hubiéramos visto anteriormente con css 4 con 6 32 perdón 4 también nos salen pero bueno vamos a comenzar un poco y aquí tengo los archivos que había trabajado voy a hacer un nuevo archivo y lo voy a guardar igual en la carpeta que hemos trabajado en este caso le voy a poner en igual puede ser index o lo que tú gustes el chiste es que tenemos que hacer este archivo pero yo lo voy a guardar como estilos punto css y lo guardamos y si te fijas ya tengo un archivo de mástiles css entonces lo que vamos a hacer es que bueno este archivo lo voy a dejar aquí pero vamos a hacer una nueva carpeta esto te recomiendo que siempre lo hagas una nueva carpeta llamada css en donde van a ir todos tus archivos de ese ss entonces dentro de esta ahora sí vamos a agregar guardar nuestro archivo dentro de la carpeta estilos punto css y ahí está lo único que quería era mostrarte cómo se importaba yo en el curso anterior de html ya te expliqué cómo se agregan los estilos es con esta etiqueta de css por lo cual no hay ningún problema tú puedes ver el capítulo el último capítulo del curso de html o si no aquí está en este caso tendríamos que poner css en diagonal estilos punto css porque tenemos la carpeta y bueno ahora si el archivo pero bien yo lo que te quería comentar lo siguiente lo vamos a estar importando esta manera pero también hay otras formas de trabajar con css en este caso la forma de hacerlo es agregando la etiqueta style y dentro de esta el agregar todas nuestras propiedades y reglas en este caso aquí iría todo lo que es nuestra nuestras reglas css esta es una forma de trabajar no es la mejor no te la recomiendo pero puedes utilizarla si quieres hacer cosas rápidas o simplemente hacer pruebas la mejor forma es haciendo esto un archivo extra y bueno utilizarla en este caso no voy a estar trabajando con este archivo html simplemente te voy a explicar los principios de los estilos css y en el siguiente capítulo ya estaríamos trabajando con ellos entonces bien vamos a ver primero que nada vamos a conocer la sintaxis un poquito una regla css es lo siguiente y es la parte fundamental de esto y ahí está esto es una regla css todo esto conforman nuestras reglas es es desde el inicio hasta el fin que es una regla se desee una regla es todo el conjunto digamos de grupos que vamos a estar haciendo para poder darle estilos a un elemento pero estas reglas en ss es como que se compone de varias cosas se compone de un selecto que nos indica a qué aspecto nosotros le vamos a modificar la propiedad qué aspecto vamos a modificar en este caso con body hacemos referencia a todo el documento entonces con boli nosotros decimos que queremos modificar todo el documento y luego con background que va a gran ahora es nuestra propiedad decimos que queremos modificar de lo que es el body de lo que es nuestro selector entonces con background le decimos queremos cambiar el fondo y después tenemos el valor el valor nos va a decir a qué valor queremos cambiarle la propiedad en este caso este es un código hexadecimal que significa que va a ser color negro puedes ponerlo así o puedes ponerlo como blanco en este caso también funciona lo mejor es hacerlo con código hexadecimal como es esto ya lo tendríamos esta regla lo que haría sería cambiar el color de nuestro sitio web a negro así que yo voy a irme a mi archivo index html que se extensión lo voy a abrir en el documento si te fijas yo por aquí aquí están yo he agregado una hoja de estilos pero no es la correcta tengo que entrar a la carpeta y al archivo que acabamos de editar así que para eso agregó css en diagonal estilos css ahí está y ya hemos relacionado este documento html con esta hoja de estilos css por lo cual se actualizamos si te fijas todo el fondo ha quedado negro porque hemos aplicado correctamente lo que es nuestra regla se desee se podemos agregar más cosas y si lo hacemos te recomiendo que los órdenes tu código acción si te fijás dejado un espacio que lo agregas con la tecla de tabulación y puedes agregar cuanto tú quieras pues agarra tanto background como color que esta propiedad de color nos agrega el color de nuestra fuente de la tipografía en este caso efe efe efe es color blanco así que se actualizó tenemos todo el texto de color blanco y bueno pues esto es prácticamente lo que nosotros podemos hacer con css es así de sencillo realmente es muy fácil lo único que tienes que son las propiedades y saber cómo se utilizan ya los siguientes capítulo estaremos viendo selectores que es como body h1 pero un poquito más avanzados para hacerle un target y no va a ser digamos apuntarle un elemento directamente tenemos estar viendo otras cosas como propia es más avanzadas y bueno otras cosas ya por último te quiero comentar que también existen los comentarios se escriben así con la diagonal asterisco asterisco diagonal y dentro pues el contenido que tú quieras este este todo este contenido que vaya aquí dentro no se va a ejecutar no hay ningún problema simplemente es para ti para darte una idea de cómo se se escribe el código darte una guía etcétera así que veremos pues eso ha sido todo por este pequeño capítulo introductoria se deseen [Música] ya sé que mi nombre es carlos arturo no te olvides de compartir el curso y nos vemos en el siguiente capítulo si te ha gustado el vídeo por favor no olvides suscribirte al canal así como también seguirme en twitter en arropa falcón masters por último te invito a que pases por mi sitio www.farmers.com en donde encontrarás tutoriales y recursos sobre desarrollo y diseño web

Comentarios