Conceptos básicos de CSS

Hace poco he hecho un breve resumen introductorio de CSS para una persona que está comenzando a aprender lo que es el HTML, el resultado es este artículo, que está dirigido a personas que no tienen una idea clara de lo que es el CSS. 

La mayoría de nosotros aprendemos CSS según nos va surgiendo una necesidad concreta y lo escribimos sin ton ni son dónde lo necesitamos, aún sabiendo que no deberíamos hacerlo así, pero en fin, volviendo sobre el tema del artículo, he preparado una pequeña guía para tener los tres o cuatro conceptos básicos de css claros en una breve lectura.

CSS no tiene sentido por sí mismo, sino que se trata de un lenguaje que sirve para aplicar ciertas características visuales a una web HTML. Por tanto para poder utilizarlo es importante tener ciertos conceptos básicos de HTML bien claros, al menos, hay que saber:

• Que el HTML es el lenguaje que los navegadores leen y a partir él construyen una página web. 
• Que es un lenguaje de marcado. Se usan etiquetas para definir partes de la web y las etiquetas se van anidando según se necesite. Una etiqueta tiene un inicio y un final y entre ésas dos etiquetas puedes poner otras según las necesites.

Tampoco estaría de más echarle un vistazo a las etiquetas que existen dentro del HTML y para qué sirven las más habituales. Dicho ésto vamos con el CSS.

La sintaxis:

• En general la sintáxis del css sigue el siguiente patrón:
  SELECTOR {DECLARACION;DECLARACION;} por ejemplo:

  h1 {color:blue;font-size:12px;}

• Como podéis ver una declaración de un valor para una propiedad siempre termina con punto y coma (;)
• Varias declaraciones propiedad-valor se agrupan poniéndolas entre llaves ({propiedad:valor;propiedad:valor;})
• Si las propiedades van referidas a una etiqueta concreta de HTML, se precede al grupo de propiedades de la etiqueta, en el ejemplo h1.
• Si queremos incluir un comentario dentro de los pares propiedad-valor se debe escribir entre

  /*Comentario*/

• Normalmente para que el css se pueda leer mejor se escribe de la siguiente manera (partiendo del ejemplo anterior):
  

  /*Comentario 1*/
  h1
  {
  /*Comentario 2*/
  color:blue;
  font-size:12px;
  }

Además de usar como selector una etiqueta HTML tenemos otras posibilidades que son definir clases o definir identificadores para un css.

• Cuando definimos un css para un id debemos poner una # antes del nombre del id:

  #elemento1 {color:blue;font-size:12px;}

• En teoría, se usa para afectar a un solo elemento, pero en la práctica se aplicará a todos los elementos HTML con atributo el id=”elemento1”
• Cuando definimos un css para una clase debemos poner un . antes del nombre de la clase:

  .grupoelementos {color:blue;font-size:12px;}

• Las clases están ideadas para afectar a un grupo de elementos, que tendrán que tener todos el atributo HTML class=”grupoelementos”

Y con ésto tendríamos los conceptos básicos de CSS cubiertos.