Aprendiendo HTML, hojas de estilo

html Gracias al apoyo que tuvo la primera parte de este curso de Aprendiendo HTML, es como hoy vamos en la segunda entrega, y con un tema muy interesante: Hojas de estilo.

Las hojas de estilo, o también llamadas CSS, son aquellas configuraciones que le hacemos a un sitio web para que tenga una estructura, colores y orden; de hecho es la pieza fundamental de cada sitio web. Por eso vamos a ver hoy un poco cómo podemos empezar a crear nuestras propias hojas de estilo.

¿Qué son las hojas de estilo?

Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

En otras palabras, es el lenguaje que nos permite hacer que nuestras páginas web se vean bonitas.

Estructura básica

La estructura básica, como todo en HTML se basa en una etiqueta llamada <style>, siendo un contenedor, pero no de otros elementos, sino de sectores específicos. Esta etiqueta se cierra con </style> y se coloca dentro de la etiqueta <head>. Así:

¿Qué sectores se colocan dentro?

Los parámetros que se colocan dentro de la etiqueta <style> se llaman clases, las cuales tienen atributos específicos para aplicarse a una imagen, texto, parrafo, link, etc. Una clase en como una estructura de propiedades como colores, tamaños, bordes, alineaciones que podemos aplicarle a elementos.

Para crear una clase hay algunas reglas que tenemos que puede tener al crearlas

1. Debe tener un nombre específico: esto quiere decir que si quiero que una clase se llame estiloBoton, debemos nombrarla así, estiloBoton, y no podremos hacer otra con ese mismo nombre.

2. Debe referenciar a un elemento: esta regla es la más importante, en CSS hay tres formas de referenciar la clase a un objeto. La primera forma es poner un “.” antes del nombre de la clase, de esa forma le dices al navegador que esa clase puede ser ocupada por muchos elementos que luego vas a definir. La segunda forma es la de reemplazar el nombre de la clase por el nombre de una etiqueta, por ejemplo, la clase h1 va a afectar a todas las etiquetas h1 que haya en tu sitio web, o la clase img va a afectar a todas las imágenes que haya en tu sitio web. Y la tercera es la de sector definido, utilizando “#” antes del nombre de la clase le decimos al navegador que esa clase se va a aplicar a un único elemento que se llame como lo definamos, y a nadie más.

3. Debe tener un inicio y final: con esto me refiero a que al inicial una clase vamos a poner:

[(referenciador)(nombre de clase)] {

para inciar la clase. Cuando queramos terminar la clase simplemente agregaremos un “}”. Ojo, la estructura si se fijan sigue el patrón de una clase con “.” o “#” puesto que en caso de la situación de referenciar a un elemento HTML el referenciador y el nombre de la clase es el mismo.

Entonces con esto ya podemos ver la declaración de los tres tipos de clase:

Obviamente surgirá la pregunta de que si es válido hacer una clase o sector especifico con nombre de elemento HTML, y la respuesta es si pero no es correcto, y quizá no llegue a funcionar en todos los navegadores.

Propiedades de una clase

En esta ocasión no veremos todas las propiedades de las clases, vamos a ver como está formada su estructura. Entonces, una propiedad es una cualidad visible que tiene una clase, la cual se aplicará a un objeto. No hay un número fijo del número de propiedades que podemos definir a una clase, pero si hay restricción en no repetirlas en la misma clase; es decir, si hay una propiedad color, no puedo ponerla de nuevo dentro de esa misma clase, no debe haber dos color en la clase.

Para conocer la estructura de una propiedades tenemos que saber que:

1. La primer palabra define un aspecto global que puede tener varias sub-propiedades: esto es que por ejemplo, hay una propiedad llamada “font”, la cual tiene como sub-propiedades “size” o “style”, por lo que no podemos definirla simplemente “font” sin antes especificar una sib-propiedad. La excepción es “color”, “width” y “height” entre otras.

2. Saber definir el parámetro de una propiedad: esto nos quiere decir que no basta con definir la propiedad, sino que tenemos que establecer un parametro adecuado, para eso usamos delante del nombre de la propiedad los dos puntos “:”, un espacio y el parametro. Por ejemplo, si la propiedad es color, entonces debemos colocar un color ya sea en hexadecimal o en inglés; si es un ancho debemos poner una médida en pixeles o en cm, em, etc.

3. Al terminar de definir la propiedad se debe cerrar: agregando el punto y coma “;” como en la mayoría de lenguajes de programación de alto nivel. Esto ayuda a que las propiedades se definan en una línea y no se necesiten más. Si no se pone todas las clases van a dejar de funcionar.

Resumiendo tenemos:

(propiedadPrincipal)-(subPropiedad): (parametro);

Si se preguntan del guión, si, si es necesario si la propiedad principal tiene sub-propiedades.

Juntando todos los elementos

Finalmente podemos analizar un texto HTML y ver en la parte de hojas de estilos algunas clases y propiedades, las cuales ya sabemos identificar y escribir.

En el ejemplo de arriba hay algunos estilos definidos, estoy seguro que ya puedes ver su estructura perfectamente. En las siguientes partes iremos conociendo algunas propiedades y sus parámetros, así como las etiquetas y propiedades de los elementos HTML.