¿Qué es CSS? y ¿Para qué sirve?

CSS

En terminos técnicos es un lenguaje de estilo que es usado para definir como seran presentados los elementos de HTML.

El lenguaje HTML está limitado al momento de darle forma a un documento, esto es porque no fue concebido para este fin, sino principalmente científico, distinto al actual.

Para solucionar este problema se han presentado diferentes opciones, como tablas, imagenes transparentes, entre otras que no son estándares de HTML y por tal razón las paginas presentan problemas a la hora de la visualización en diferentes plataformas.

El modo de funcionamiento de CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que aplicaremos a:

• Una web entera, de modo que se pueda definir la forma de toda la web de una sola vez.
• Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, o a toda la página.
• Una porción del documento, aplicando estilos visibles en un trozo de la página.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta.

La sintaxis CSS permite aplicar al documento un formato de modo mucho más exacto.  HTML se nos quedaba corto al momento de maquetar las páginas, con CSS tenemos herramientas que nos permiten definir:

• La distancia entre líneas del documento
• Aplicar identado a las primeras líneas del párrafo
• Colocar elementos en la página con mayor precisión y sin lugar a errores
• Definir la visivilidad de los elementos, margenes, subrayados, tachados, entre otros

Para mayor comprensión del potencial que ofrece CSS al diseño de páginas web, haremos una división para estudiar las diferentes formas en las que podemos utilizar esta herrmienta.

Estilos definidos en una etiqueta (una parte del documento)

Bien, para que podamos entender mejor este punto haremos uso de algunas etiquetas que siempre se utilizan en HTML y las modificaremos, tambien mostrarmos el resultado en este blog.

Con la etiqueta Div podemos definir secciones de una página y aplicarle estilos con el atributo style.

Ejemplo:

<div style="background:#F60; color:#FFF; font-family:Arial; font-size:16px">

        Este texto esta formateado con css dentre de una etiqueta "div"

</div>

Resultado:

Este texto esta formateado con css dentre de una etiqueta "div"

Otra etiqueta que podemos usar es la etiqueta <p>, que se usa para la escritura de párrafos, en este ejemplo definiremos un fondo gris, color de letra negro, fuente tahoma, tamaño de fuente 18.

 <p style="background:#CCC; color:#000; font-family:Tahoma; font-size:18px">

        Este texto esta formateado con CSS dentro de una etiqueta "P"

</p>

Este texto esta formateado con CSS dentro de una etiqueta "P"

El resultado no es muy diferente al anterior, pero vamos otro ejemplo con div.

<div style="border:1px; border-radius:10px; width: 300px; height:75px; background:#0099FF;

        font-size:18px; color: #FFF; padding:30px; text-align:center; margin:auto;">

        Es texto esta formateado con CSS dentro de una etiqueta "div"

</div>

Es texto esta formateado con CSS dentro de una etiqueta "div"

Tambien podemos aplicar estilos a nuestros hipervinculos empleando la etiqueta <a>, vamos a ver un ejemplo:

Ejemplo - Hipervinculo a google con color rojo, fuente verdana y tamaño 16 sin decoración (sin subrayado)

<a style="color:#CC0000; font-family:Verdana; font-size:16px; text-decoration:none" href="http://www.google.com">

        google.com

 </a>

google.com

La ventaja con esta forma de aplicar estilos es que podemos aplicarlos a la sección y en el momento que necesitemos, pero es complicado al momento de querer hacer modificaciones mayores, en la siguiente entrada veremos como utilizar la etique <style></style> para hacer un mejor trabajo.

Pueden hacer sus comentarios o consultas en la sección comentarios.