1
00:00:00,820 --> 00:00:12,019
Bueno, pues vamos a empezar con la introducción a hojas de estilo, o a CSS, que es el lenguaje que se utiliza para programar a estas hojas de estilo,

2
00:00:12,300 --> 00:00:20,399
que serán las que al final sirvan para dar un diseño artístico, un diseño estético a nuestros sitios web.

3
00:00:21,519 --> 00:00:29,660
En primer lugar vamos a explicar qué es CSS, pues CSS viene del acrónimo de Cascading Style Sheet, que es una hoja de estilo encascada.

4
00:00:30,820 --> 00:00:42,439
Este ahora mismo es el lenguaje estándar que sirve para aplicar estilos y para poder proporcionar una apariencia estética a las páginas web.

5
00:00:42,439 --> 00:00:48,920
Ya veremos cómo se hace todo esto a través de los diferentes elementos que existen también en CSS.

6
00:00:50,100 --> 00:00:55,399
Se llama encascada porque se puede utilizar patrones de herencia.

7
00:00:55,399 --> 00:01:09,599
Es decir, nosotros, igual que vimos en HTML, que teníamos, por ejemplo, las etiquetas de los encabezados, H1, H2, H3, pues nosotros podemos ir definiendo diferentes etiquetas o diferentes identificadores, ¿vale?

8
00:01:09,599 --> 00:01:23,299
Recordad cuando hacíamos enlaces de tipo ancla, que utilizábamos el elemento, el atributo id, pues nosotros podemos definir lo que son diferentes estilos para cada uno de esos id.

9
00:01:23,719 --> 00:01:31,420
Incluso podemos crear patrones de herencia, ¿vale? Donde se compartan algunos estilos y otros se separan, ¿vale?

10
00:01:31,420 --> 00:01:50,280
Y su mayor ventaja es que permite separar la presentación, es decir, la parte estética de la parte del contenido, es decir, que por un lado nosotros tendremos nuestros archivos de hojas de estilo y por otro lado tendremos nuestros archivos de HTML que será donde esté el contenido de la web, ¿vale?

11
00:01:50,280 --> 00:02:10,759
De la misma forma, nosotros con hojas de estilo seremos capaces de dar diferentes diseños dependiendo de la plataforma. Es decir, podemos dar un diseño si se visualiza la web desde un ordenador y otro diseño si se visualiza desde un dispositivo móvil dependiendo de la resolución del dispositivo, etc.

12
00:02:10,759 --> 00:02:19,620
etc. ¿Más ventajas que proporciona utilizar hojas de estilo? Pues que nosotros, como vimos

13
00:02:19,620 --> 00:02:25,360
por ejemplo en algunos de los ejercicios que hemos hecho o en algunos de los diseños que

14
00:02:25,360 --> 00:02:31,620
ya hemos trabajado, un sitio web habitualmente está compuesto de varias páginas web. Pues

15
00:02:31,620 --> 00:02:38,000
nosotros podemos modificar el estilo de todas las páginas a la vez utilizando hojas de

16
00:02:38,000 --> 00:02:47,159
estilo. Esto da una ventaja a su vez muy importante, es que te permite controlar ese estilo o esa

17
00:02:47,159 --> 00:02:51,960
estética de una forma más precisa. ¿Por qué? En primer lugar porque te evita que

18
00:02:51,960 --> 00:02:57,500
tú la misma etiqueta, por ejemplo H1, que la quieras con la letra en rojo, el tipo de

19
00:02:57,500 --> 00:03:04,939
fuente X y con un tamaño de 22 píxeles, pues que no la tengas que estar definiendo

20
00:03:04,939 --> 00:03:09,840
en cada página, sino que la definas solo una vez y ya te valga para todo. Lo que también

21
00:03:09,840 --> 00:03:15,439
se traduce en que los sitios web carguen de una forma más rápida. Es decir, aumentamos

22
00:03:15,439 --> 00:03:22,280
la velocidad de carga porque solo carga una vez ese patrón estético, esa definición

23
00:03:22,280 --> 00:03:29,379
estética. Y lo que decía antes, la posibilidad de definir la apariencia web en función de

24
00:03:29,379 --> 00:03:40,639
los medios, dispositivos móviles, ordenadores, teléfonos, etc. Luego tenemos que saber cómo

25
00:03:40,639 --> 00:03:50,340
funciona CSS. CSS es un poquito más diferente o un poquito diferente respecto de HTML, porque

26
00:03:50,340 --> 00:03:57,520
en HTML encontramos normalmente elementos dentro de otros elementos, por ejemplo dentro

27
00:03:57,520 --> 00:04:01,219
la etiqueta body y luego nos encontramos la etiqueta header o la etiqueta section o la

28
00:04:01,219 --> 00:04:07,419
etiqueta article. Sin embargo, en CSS siempre vamos a tener la misma estructura o la misma

29
00:04:07,419 --> 00:04:13,719
sintaxis, que va a ser el selector, que va a ser lo que defina qué elemento es el que

30
00:04:13,719 --> 00:04:18,519
queremos modificar. Luego vamos a tener la declaración y dentro de esa declaración

31
00:04:19,100 --> 00:04:25,060
vamos a tener dos campos. Uno va a ser la propiedad, es decir, la altura, la anchura,

32
00:04:25,060 --> 00:04:30,439
del color y luego el valor que le queremos dar a esa propiedad. Pues si es anchura, pues

33
00:04:30,439 --> 00:04:35,240
yo quiero que ocupe el 100% de la pantalla. Aquí pondría width y aquí 100%. ¿Qué

34
00:04:35,240 --> 00:04:38,939
es el color? Pues yo quiero el color rojo. Aquí pondría color y aquí pondría, por

35
00:04:38,939 --> 00:04:45,779
ejemplo, red. ¿Vale? Mi color rojo, etcétera, etcétera. ¿Vale? ¿Qué pasa? Que nos encontraremos

36
00:04:45,779 --> 00:04:51,259
muchas veces en los que vamos a poner muchísimas declaraciones para un único selector. ¿Vale?

37
00:04:51,259 --> 00:05:05,019
Pues porque queramos modificar el tamaño de la letra, el tipo de letra, el color, el color de fondo, la anchura, la altura, yo qué sé, la alineación, un montón de cosas, ¿vale?

38
00:05:05,439 --> 00:05:14,100
Entonces, utilizando esta forma de sintaxis nos iríamos a un documento que se iría mucho a lo largo del eje X, ¿vale?

39
00:05:14,100 --> 00:05:18,959
Lo cual se hace después muy difícil en caso de que haya errores o que queramos modificar algo.

40
00:05:19,060 --> 00:05:22,860
Por lo tanto, vamos siempre a mantener esta sintaxis, ¿vale?

41
00:05:23,019 --> 00:05:25,139
Es decir, vamos a escribir hacia abajo, ¿vale?

42
00:05:26,000 --> 00:05:28,519
Fijaros, y esto es un detalle importante, ¿vale?

43
00:05:28,879 --> 00:05:34,920
Que todas las propiedades y valores que pongamos, todas las declaraciones, lo que veíamos aquí como el concepto de declaración,

44
00:05:35,360 --> 00:05:38,519
tienen que tener punto y coma menos la última, ¿vale?

45
00:05:39,319 --> 00:05:40,300
Importante, ¿ok?

46
00:05:40,300 --> 00:05:45,800
Como digo, esto es más sencillo también, facilita detectar y corregir errores

47
00:05:45,800 --> 00:05:48,860
¿Por qué? Porque vemos cada propiedad en una línea

48
00:05:48,860 --> 00:05:58,920
Y por último os dejo aquí un enlace donde podéis encontrar mucha más información acerca de hojas de estilo

49
00:05:58,920 --> 00:06:03,819
Y bueno, con esto vamos a empezar ya a trabajar en hojas de estilo