¿Que es CSS? y ¿Qué me importa a mi?

Cuando construyes tu negocio en internet, necesitas conocer varios puntos básicos para saber que es lo que tienes que mejorar y además entender a la persona que vas a contratar para poder tomar las medidas adecuadas. Esto que parece básico por regla general no se hace, y lo que es peor, los que tienen un negocio y se quieren adentrar en el mundo online no se forman.

Lo he repetido hasta la saciedad lo gratis en internet cuesta dinero, y además te sale muy caro en tiempo, y además no puedes abarcarlo todo. Por eso la formación es importante para aprender los conceptos que necesitas para manejarte en este mundo. No es necesario que seas un experto, ni que hagas cursos largos, sino que tengas una visión general y puedas controlar la mayoría de conceptos que vas a tratar de manera habitual.

CSS y que es CSS3 ¿Mande?

CSS son las siglas del inglés «Cascading Style Sheets» (Hojas de Estilo en Cascada) y básicamente consiste en la información que define como va a ser la presentación de una web. Cuando me refiero a presentación, me refiero a negritas, colores, efectos, tipos de letra que escogemos, … de tal manera que se independiza del HTML que es el lenguaje donde se estructura toda la información que se manda a nuestro ordenador para que el navegador nos presente esa bonita página web. Y CSS3 es la versión 3, donde se definen las características de este lenguje, digamos que en esta versión le han añadido muchas cosas y mejorado otras.

Siendo un poco más técnicos se refiere a la tecnología desarrollada para separar la presentación de la estructura HTML. Esta tecnología aplica reglas de estilo a los elementos HTML, quedando de esta manera separada de la estructura HTML. Poco a poco este lenguaje se ha ido haciendo más importante entre los diseñadores gracias a toda la facilidad de uso, y los resultados que son muy flexibles.

Para trabajar con CSS necesitas conocer los tres principales elementos:

Como hemos dicho anteriormente HTML define aquellas partes que son la estructura de una página web. Supongamos que una etiqueta HTML fuera una casa. Para definir el inicio de donde está la casa pondríamos <casa> y para definir el final pondríamos </casa>. Ahora CSS le dará una serie de información a esta etiqueta HTML.

Selectores

Estos se usan para definir sobre que etiqueta HTML vamos a aplicar Atributos y Valores. Existen tres tipos de selectores:

• Los selectores de etiquetas HTML, los cuales se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
• Los selectores de identificador, son aquellos que hemos creado y se aplican solo a las etiquetas que así lo identifiquemos.
• El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto «.» y va seguido del nombre que queramos ponerle a la clase de la siguiente forma: .mi_clase.

Para que no te líes como las persianas ten en cuenta que los selectores por identificador (id) están pensados para que la etiquta que selecciones sea única, y las clases están pensadas para poder definir el mismo estilo a varias etiquetas de la página. Esto significa que puedes asignar una misma clase a varias etiquetas distintas en la página.

Por que tengas un ejemplo, si la etiqueta <casa> aparece solo una vez en toda nuestra estructura y queremos aplicarle algunos valores entonces tendríamos que utilizar un id, pero si tuviéramos grupos de casas, o quisiéramos aplicar a varias los mismos valores, entonces utilizaríamos una clase. Luego por supuesto tu puedes hacer lo que te de la gana.

Atributos

Son aquellos atributos que aplicaremos a las etiquetas HTML, si queremos cambiar el fondo utilizamos el atributo «background», si queremos cambiar el tipo de letra usamos el atributo «font» y así con otros muchos.

Valores

Y por supuesto una vez definidas los selectores y los atributos, tenemos que darles un valor, como puede ser un color, tamaño, o lo que sea.

Ahora to junto: La sintáxis

Esto ya es más sencillo que todo lo anterior junto, primero se coloca el selector (obvio), luego sea abre una llave «{» y se empiezan a colocar los atributos, seguidos de dos puntos «:» y luego el valor seguido de un punto y coma «;«, al final de todo pues nos toca cerrar el selector con el cierre de llave «}«, ya sabes todo lo que se abre luego tiene que cerrarse. Lo bueno es que en un mismo selector se pueden poner tantos atributos con los valores que quieras, separándolos con un espacio o con un salto de línea. También puedes poner comentarios antes de los selectores con «/*» para abrir y ponemos «*/» para cerrarlo. ¿Ha quedado claro o esto es un puto lio?

Vamos a ver un ejemplo, supongamos que tenemos una etiqueta global que se llama ciudad y queremos aplicarle un color, un fondo, un tipo de letra y un tamaño igual para todos los elementos, nos quedaría algo así:

En este caso lo que conseguiríamos es que todas las etiquetas que fueran ciudad y todo lo que estuviese dentro de esta etiqueta HTML, tuviera los parámetros que le hemos definido el el selector CSS. Es decir todo en la ciudad tendría el tipo de letra y el color que hemos definido.

Para aplicar el selector identificador lo haríamos de la siguiente manera:

En este caso, aplicamos el selector a la etiqueta con solo colocarle el identificador de la siguiente manera:

Y por último nos queda el selector de clase, que lo definiremos de la siguiente manera:

Para aplicar este selector solo tenemos que añadir a la etiqueta HTML lo siguiente:

Con esto y un bizcocho tienes lo suficiente para que investigues por internet más cosas sobre CSS y así puedas realizar pequeños cambios al diseño de tu página web. Ten en cuenta que esto es lo básico y que como supondrás el lenguaje CSS ofrece muchas más cosas, por lo que si quieres ponerte con muchos cambios sobre tu web, lo mejor es que busques a un profesional que te haga el diseño adecuadamente. También puedes encontrar más información aquí: w3schools.
Espero que este rollo macabeo te haya sido útil y le puedas sacar partido en tu web y poder darle algo más de vidilla y color. Si te ha gustado te agradecería enormemente que lo compartieses con tus amigos y me hicieras más feliz que una perdiz.