Sintaxis Básica de CSS

Lenguaje de Hojas de Estilo (CSS)

Todo lo que se encuentra entre la etiqueta de apertura <style> y la
etiqueta de cierre </style> es otro tipo de lenguaje llamado CSS
o "Cascading Style Sheets".
CSS es un lenguaje de hojas de estilo utilizado para describir la
presentación de un documento escrito en un lenguaje de marcado como
HTML. No entraremos demasiado en CSS en este curso, ya que nos
queremos enfocar en HTML5 pero les doy una pequeña explicación del
código dentro de nuestro elemento de <style> para que entiendan como
es que se aplican los estilos CSS a nuestros elementos de HTML.

Sintaxis de CSS
En la informática, la sintaxis de un lenguaje es el conjunto de reglas que
nos dicen como escribir frases o comandos correctamente estructuradas
e interpretables por la aplicación que va usar ese código. Ahora vamos a
ver un ejemplo del sintaxis de CSS.

selector {

propiedad:valor;

propiedad:valor;

...

Un conjunto de reglas CSS consiste en:

 un selector (el elemento que queremos estilar)

 un bloque de declaraciones empezando con { y terminando con }

Un bloque de declaraciones puede contener una o más declaraciones que consisten en:

o la Propiedad del Elemento

o dos puntos (:)

 o el Valor de la propiedad

o un punto y coma para terminar la declaración (;)

Ahora que tenemos un entendimiento de la estructura esencial de CSS,

revisemos nuestro elemento de <style>

8. ...

1. <style>

2. body {

3. margin:0;

4. padding:0;

5. background-color:grey;

6. font-size:14px;

7. }

8. p {

9. color:#333;

10. }

11. </style>

12. ...

En este caso, body y p son los selectores o elementos a los que les
queremos aplicar los estilos.
Las llaves de { } se utilizan para encapsular nuestros bloques de
declaración para cada elemento. Dentro de el bloque de declaración
definimos nuestros estilos usando el formato:nombre-de-
propiedad : valor-de-propiedad;. Las declaraciones dentro de un
bloque siempre deben terminar con un punto y coma (;) y es común ver
una declaración por linea, aunque no es obligatorio. Solo lo hace más
fácil de leer y mantener el código.

Margin & Padding

margin controla el "margen" o espacio de colchón alrededor de nuestro
elemento mientras padding define el espacio de colchón dentro de los
limites de nuestro elemento. El valor de estos atributos puede ser una
cantidad de "pixels" o en este caso usamos 0 para denotar que no
queremos espacio de colchón ni adentro ni afuera de nuestro body.

Estilos de Reset
Estos se llaman estilos de "reset" y su objetivo es reducir las
inconsistencias del navegador en elementos como las alturas de líneas
predeterminadas, los márgenes y los tamaños de fuente de los
encabezados, etc.. Esto suele hacerse porque algunos navegadores
manejan distintos valores "default" que pueden causar una presentación
inesperada de nuestro sitio en ellos.

Background Color
El atributo "background-color" cambia el color de nuestro fondo usando
un valor de "grey". Otros valores pueden ser "blue" o algo más exótico
como "BurlyWood" o "DarkKhaki". Puedes probar con esos colores y
recargar tu página para ver como se ven.
Estos son nombres clave que detectan los navegadores y los traducen a
códigos de "hexadecimals" como #DEB887 para "BurlyWood" que resulta
en una especie de color cafe. De hecho podemos introducir el código
hexadecimal en lugar del nombre del color así background-
color:#DEB887; y nos dará exactamente el mismo color. Para más
nombres y códigos de colores puedes
visitar : https://www.w3schools.com/colors/colors_names.asp

Font-Size
El último atributo en nuestro bloque de estilos es "font-size" y le
asignamos un valor de 14 pixeles (px). Esto simplemente hace que todo
el texto normal en nuestro body tenga el mismo tamaño al menos que
especifiquemos otro. Los tamaños más usados para el texto del body
suele ser entre 12 - 16 pixeles. En pantallas de alta resolución es mejor
usar un tamaño mayor, ya que puede ser difícil leer un font-size menor a
14px.

Definir estilos una sola vez

Como ya aprendímos en el módulo anterior, una de las ventajas de CSS
es poder definir estilos para varios elementos una sola vez dentro
del <head> de nuestra página web y que se apliquen a todos los
elementos en nuestra página.
Con CSS, puedes especificar cualquier tag en el selector para
afectar todas las instancias de ese tag en nuestra página. Por ejemplo,
con nuestras definiciones de CSS, los estilos de p se aplicarán a todos
los párrafos de nuestro documento automáticamente.

Hojas de Estilos Externas

Pero recuerden que hay una limitación del tag de <style> dentro
del <head>. Cuando tenemos más de una sola página, cada archivo en
nuestro sitio tendría que llevar el mismo código de css dentro de su tag
de <style> y por lo tanto cualquier cambio o actualización de los estilos
se tendría que repetir en todos los archivos de nuestro sitio.
Para arreglar este problema de repetición de código se utilizan hojas de
estilos externas que son estilos de css definidos en un archivo aparte de
nuestro html y se vinculan en cada archivo de nuestro sitio con una sola
linea de código. Así solo definimos los estilos una sola vez y se aplicarán
no solo a esa página, sino a todas las páginas que incluyen esa hoja de
estilos. En el próximo módulo veremos como pasar nuestros estilos a una
hoja de estilos externa y vincularla a nuestra página web usando la tag
de <link>