Antes de comenzar a escribir lo que es el código C C veamos algo de lo básico cuando comienzas a escribir
tus primeros códigos de C s no sabes lo que viene siendo nuestro proyecto y puedes ver que tenemos este
índex contiene todo el HTML y hay distintas formas de agregar lo que viene siendo tu código de CSS la
forma más sencilla es poner una etiqueta aquí llamada Staël esto es lo que va a hacer es HTML comienza
a interpretar todo lo que viene aquí el código detecta que todo esto es HTML y lo muestra como tal pero
llega a esta parte y dice bueno esto es en la etiqueta Staël lo que está adentro lo voy a tratar de
forma diferente y comienza a aplicar los estilos.
Esta forma ya hoy en día no es muy utilizada se recomienda más bien crear un archivo externo por qué
no es muy utilizada.
Voy a abrirlo a quienes siendo nosotros y blindex podés ver que en ambos casos tenemos un H1 y un H1.
Entonces si por ejemplo creas tiene estos estilos qué va a poner una H1 y pongo color block por ejemplo
para aplicar un color azul.
Si guardamos cambios vemos que se aplica el color azul pero si voy a nosotros el color sigue siendo
negro.
Tendría que copiar este código que está aquí pegarlo acá para que también se aplique.
Y eso a la larga termina haciendo código duplicado difícil de mantener porque además tenemos dos archivos
pero si tuviéramos 30 o 40 sería muy complicado estar aplicando los estilos.
Entonces esta forma no se recomienda ya hoy en día y vamos a poner aquí una nueva carpeta vamos a crear
una carpeta llamada CSS y dentro un archivo nuevo.
Este archivo te lo podés nombrar como tu dices.
Existen muchas formas de llamarlo algunas personas que pueden estar elpunto CSS otros le ponen estilos
puntu CSS otros lo ponen apunto CSS siéntete libre de nombrarlo como tu dices solamente sin números
y sin caracteres extraños.
Suponerle está Helesponto CSS y vamos a copiar lo que tenemos aquí como el H1.
Copio y pego orita explicamos en casa este código puedes eliminar este de aquí y ahora enlazas lo que
viene siendo tu hoja de estilos lo vas a enlazar con una etiqueta llamada Link y puedes ver es lo que
viene siendo estudio con autocompletar nos agrega este atributo que va a decir que esta es una hoja
de estilos y después viene el HR-V.
En el caso de los enlaces el Hrólfr nos dice hacia dónde va a ir.
En el caso de las hojas de estilo es donde está la hoja de estilos que vamos a poner en la carpeta CSS.
Puedes ver que estoy aquí en nosotros y aquí quiero abrir CSS por lo tanto CSS diagonal 6.6 es ese entonces
si guardas cambios puedes ver que será exactamente igual el color azul pero la ventaja de esto es que
yo puedo copiar este enlace y en lugar de tener este código aquí no puedo pegar y se va a aplicar también
en esta página entonces esta forma todos los estilos que estén aquí se pueden reutilizar.
Usualmente lo que vienen siendo todos los estilos se colocan en un solo archivo llegan a ser archivos
muy grandes de ochocientas mil líneas más o menos.
No es como que vayas a ganar mucho si decides separarlo es decir si creas un está el punto CSS para
la página de inicio uno para nosotros uno para anuncios o uno para el blog no va a ser como que mucha
la ganancia porque cada vez que se abre un archivo de estos se realiza una petición hacia el servidor
y si tienes múltiples archivos usualmente salen tampoco más.
Como digo siempre casi siempre vas a tener un archivo principal y en él vas a colocar todos los estilos
que sean relacionados hacia este sitio web.
Ahora esto es lo que se conoce como Anatomía de un selector CSS y usualmente está dividido en tres partes
la primera que está aquí como H1 es el selector es decir el elemento al que quieres aplicarle lo que
viene siendo el CSS en este caso selecciona H1.
Por lo tanto estoy seleccionando la H1 y solamente se la aplican él y puedes seleccionar por ejemplo
una imagen o este Gelder o este sections aquí o un párrafo etcétera.
Puedes utilizar una etiqueta y aplicarle estilos más adelante estaremos viendo que existen otras formas
con ídish y con clases que es un poco más recomendado.
Después del selector puedes ver que tenemos llaves y todo lo que esté dentro de esas llaves es lo que
se va a aplicar.
Como estilos hacia este selector que está aquí entonces puedes agregar múltiples líneas o vemos enseguida
y puedes ver que tenemos después dos partes esta parte de aquí se conoce como la propiedad de ese es
el que vas a aplicarle y esto es que están aquí usualmente son definidas por CSS.
Existen propiedades para colocar un color de fondo para agregar un poco de espacio para ser la fuente
más pequeña más grande cambiar el tipo de fuente entre muchas otras cosas y después viene el valor.
El valor va a ser por ejemplo en este caso color lo voy a especificar azul pero puedes cambiar el color
sin ningún problema digamos White blanco White y puede ser que si recargamos aquí se pone en color blanco
entonces este valor es lo que le va a dar a tu diseño o va a ser que tu diseño se vea de cierta forma
importante es que los valores que se ponen de ese lado tienen que ver mucho con lo que tengas de este
lado.
Por ejemplo si quieres cambiar el tamaño de la Fuente que va a poner Alfonsa.
Esa es la propiedad que me permite cambiar el tamaño de fuente.
Si pongo 200 píxeles a hacérmelo que es la fuente mucho más grande pero por ejemplo este es un Fonz
6 puedes ver que la estoy pasando a un tamaño 200 píxeles no le puedo poner bonsais color blanco y aquí
en color ponerle 16 píxeles porque son selectores no válidos.
Puede ser que no se aplica nada y por ejemplo si inspeccionaba aquí esta parte y voy a dar un poco de
scroll hacia arriba puedes ver que vienen tachados es decir son propiedades no válidas y esa es la idea
de construir este proyecto que sepas por ejemplo que ese lector iremos paso a paso por ejemplo cambiando
el tamaño aquí lo que es la fuente etc y que vayas viendo los electores y qué valores vamos utilizando
creando proyectos reales.
Mi opinión así es como se aprende más y hay muchos proyectos que se van a desarrollar en lo que viene
siendo el curso como se dice no hay especialización sin repetición y estaremos repitiendo y haciendo
muchos proyectos diferentes.
Creo que así es como se aprende y se asimila mucho más entonces esto es lo básico de los electores de
CSS recuerda.
Siempre se recomienda una hoja de estilos externa.
Recuerda tenemos tres partes en el selector.
Aquí voy a ponerlo como color bien tenemos lo que es el selector que queremos aplicar tenemos las llaves
que nos van a aplicar todo lo que esté en ese cuerpo y por último tenemos una propiedad y su valor no
te las memorice.
No es la idea memorizar por ejemplo que para cambiar el color debe ser color sigue lo que viene siendo
al menos esta introducción HTML CSS y seguramente lo vas a comprender mucho mejor.
Ya para finalizar puedes ver que yo coloque todo en minúscula si lo pones todo en mayúsculas por ejemplo
el selector H1 H1 color que le ponen Subway también va a funcionar no hay ningún problema después de
ver que funciona a mí no me gusta la verdad escribirlo todo en mayúsculas y más se ve un poco extraño.
Y segundo también por ejemplo voy a darle y deshacer.
Puedes ver que aquí coloqué dos líneas arriba y abajo muchas personas les gusta también colocarlas todas
en una sola línea solamente que aquí están al revés los valores todavía
entonces esta forma también es válida y los estilos se van a aplicar correctamente pues que están en
esta parte es importante pues hay distintos estilos para escribir CSS mi forma que me gusta es ir creando
diferentes bloques de arriba hacia abajo poniendo esa forma algo más ya para finalizar algo así se les
conoce como CSS y en españoles hojas de estilo en cascada porque se va leyendo este archivo de arriba
hacia abajo y lo que viene siendo el último selector.
Lo último que esté visto es lo que se aplica a qué me refiero es que si tú tienes dos selectores iguales
por ejemplo 2 H1 uno con color RET y uno con un Foncillas de 100 píxeles van a leer lo que viene siendo
el CSS.
Esta parte aplica estos estilos pero después de y vuelve a aplicar estos estilos entonces por eso se
les conoce como en cascada siempre el que esté más abajo es el que va a predominar.
Si tuvieras cambios que se colocan rojo este de arriba se reescribe y este de abajo es el que se mantiene.
Puedes ver que aquí por ejemplo se inspeccion hacer H1 lo que viene siendo este de color rojo y sabes
decían reescribe el anterior.
Entonces qué me gustaría que te llevarás de este video.
Bueno primero que se aplican de esta forma de arriba hacia abajo y si hay dos se va aplicar que hasta
al final.
Segundo que hay distintas formas de escribir CSS.
Tercero que los que vienen siendo los valores de las propiedades varían de acuerdo a lo que estés utilizando.
Y por último siempre se recomienda la hoja de estilos externa.
Con eso creo que es lo más importante de este video.
No te preocupes si esto de hackeo no tiene mucho sentido esa es la idea del curso que aprendas cómo
funcionan estos electores así que estaremos continuando en el siguiente video escribiendo un poco más
de CSS así que continuamos en el siguiente video.