Que es CSS

Sus siglas son Cascading Style Sheets o hojas de estilo en cascada, CSS es una especificación regulada por la W3C(World Wide Web Consortium) organización encargada de estandarizan las principales tecnologías base en el desarrollo web. CSS aplica un conjunto de reglas definidas en un documento a un lenguaje de tipo marcado.

Desenredando CSS

CSS fue creado para ser aplicado a lenguajes de tipo marcado como lo son el HTML y XML esto para simplificar y mejorar algunas cosas como: ser modular y más eficiente a la hora de definir ciertos estilos a un respectivo documento

Propiedades Y Reglas

Las Propiedades son declaraciones de tipo Clave -> Valor en donde la clave es la propiedad a aplicar y el valor es uno de los rangos de posibilidades que te brinda esa propiedad. Las reglas simplemente son agrupaciones de propiedades

	body /*Agrupacion de propiedades*/
	{
		/*tipo de propiedad*/
		background-color : blue; /*valor de la propiedad*/
	}
	/*en el ejemplo de arriba se puede ver que en el conjunto de reglas 
	  definido para el tag body se encuentra la propiedad que
	  aplica el color de fondo a azul */

							

Selectores

Los selectores en css es el como le decimos al navegador que afecte a que elementos para los cuales queremos aplicar ciertos estilos

Ejemplos de Selectores

							
	p /* selector( aplica el conjunto de propiedades definidas
	               dentro de las llaves a los elementos o tags
                       del tipo p(parrafo) ) */
	{
		background-color : black; /*Color de fondo a negro */
		color : white; /* Establece el color de la letra a blanco*/
		font-size : 16px; /*Tamaño de la letra a 16 pixeles*/
	}

    /*selector( aplica el estilo para el primer elemento 
                definido en una lista no ordenada)*/
	ul li:first-child
	{
		width : 20px; /* establece el ancho a 20 pixeles*/
	}
							
						

Formas en las cuales podemos definir el CSS

• Embebido
• En Linea
• Referencia Externa

Embebido

Es la primera alternativa para aplicar estilos a nuestros elementos HTML, toda etiqueta HMTL Tiene un atributo llamado style y toma como valores: propiedades CSS, si se requieren especificar más de una solo se separa por ";"

							

	

		Ejemplo de estilo embebido en párrafo, cambia el color 
		de letra a verde
	
	
	

		Ejemplo de estilo embebido en h1, cambia el color 
		de fondo a blanco y el tamaño de letra a 20 pixeles
	
							
						

En Linea

Para esta forma, existe una etiqueta llamada style, dentro de esta etiqueta definimos todas las propiedades CSS a aplicar al documento HTML. Esta es una mejor manera de definir estilos ya que es una manera modular y fácil de separar el HTML del CSS.

Referencia Externa

Esta es la mejor práctica, y la que siempre se debería hacer cuando diseñamos con CSS, Existe una etiqueta llamada link, lo que hace es referenciar un archivo CSS, este archivo debe tener la extensión .css, el cual deberá contener todas las propiedades CSS que dan estilo al documento.Esta etiqueta tiene que ir en head

CSSOM

CSS Object Model, Es el estándar que mapea o relaciona cada etiqueta del documento HTML con la hoja de estilos donde fueron definidas las reglas de las propiedades a aplicar, CSSOM es la manera abstracta de ver cómo trabaja el navegador relacionando los estilos que fueron definidos en los documentos CSS a las etiquetas HTML o XML, encapsulándolos en un objeto.

El Estandar

Es algo duro el saber que cuando creamos estilos CSS para una determinada página web, es muy probable que cuando nos cambiemos de navegador no respete los estilos que definimos para esta, esto porque cada navegador crea sus propias hojas de estilo por defecto y no solo eso, no todos los navegadores implementan las mismas propiedades CSS

Las 3 Hojas

Tenemos una hoja de estilo predefinida que carga cada navegador, y una segunda hoja de estilos de usuario, esta la puede cargar el usuario especificándola en el navegador, pero no es muy usual que lo haga, la última es la hoja del diseñador, es la que definimos como maquetadores del pagina

Especificaciones

Estandarizando

Ante todos los inconvenientes de las diferentes hojas de estilos que se cargan por default en cada navegador, esto conlleva el siguiente problema: los estilos de nuestra página no se verán igual en cada navegador, para este problema, nacieron hace ya algún tiempo dos alternativas: reset.css y normalize.css

reset y normalize

Básicamente estos son dos archivos CSS, cada uno define sus propias reglas de estilo, pero lo importante es resaltar que definen reglas para cada elemento o tag HTML y escribe nuevas propiedades, con esto hace que se sobrescriba cualquier regla de estilos definida anteriormente. de esta forma conseguimos que nuestros estilos en las páginas se vean iguales no importando el navegador donde se interprete la pagina