CSS: Principios Básicos para Dominar el Estilo Web

En otros artículos hemos visto como codificar una web básica, sin embargo ha sido un web aburrida sin ningún tipo de trabajo gráfico o estético que nos la muestre de una manera visualmente agradable.

Como ya hemos visto el CSS es una tecnología creada para cubrir esta necesidad, actualmente se pueden realizar cosas realmente geniales, desde colocar un color a una capa hasta realizar increíbles animaciones, vamos a ello, no si antes definir que es CSS y los conocimientos básicos.

¿Qué es CSS?

Por sus siglas Hojas de estilo en cascada (Cascading Style Sheets) y generalmente es utilizado para indicar como es que un elemento debe ser estructurado y renderizado por el interprete, en este caso el navegador web, la extensión del mismo siempre será css.

Dentro de sus funciones principales esát el dar estilos cambiar el tamaño de la letra, el color, el tipo de tipo de letra, animaciones podemos modificar la presentación de casi todos los elementos que la componen

Elementos básicos

Al igual que HTML, las hojas de de estilo también tienen una estructura y reglas básicas propias del lenguajes de estilos.

Cada una se compone de la propiedad y el valor de la misma, donde la propiedad puede ser un párrafo, un titulo, alguna capa, tabla, u otro elemento. El valor de la propiedad dependerá de la propiedad, ya que algunas no están disponibles para todas, por ejemplo, no podemos asignar un tipo de fuente a las propiedades de una imagen.

Dos elementos fundamentales son las clases y los identificadores que dentro de CSS lo declararemos como .class y id.

Clase

Las clases son elementos que contienen propiedades y sus valores que se pueden aplicar a un sin número de elementos de nuestra web, es decir podemos usarlo sin limites, lo declaramos en nuestra hoja de la siguiente manera.

.miClase { propiedades }

Donde miClase puede ser un nombre cualquier que queramos asignar y dentro de llaves todas la propiedades, recuerda que puedes asignar un nombre acorde a lo que estas definiendo.

Ejemplo

.cabecera{ background: # 000: font-size: 25px; }

Titulo de mi clase

En el anterior ejemplo vemos que la clase cabecera se le asigna la propiedad de fondo negro y tamaño de fuente de 25 pixeles y se asigna a el código html con la propiedad de la etiqueta div con class.

Identificador

Los identificadores generalmente están asociados a casi cualquier elemento del HTML, a diferencia de las clases, los identificadores solo pueden usarse una sola vez dentro de cada documento HTML, de lo contrario el navegador lo tomara como elementos duplicados y en algún momento puede que surja un error.

La definición de estos se realiza y asigna de la siguiente manera.

#columna1 { color: #fff; font-family: Arial; }

Titulo de mi clase

Como ves ahora en lugar del punto, hemos definido con el signo de numeral, y la propiedad en HTML la hemos definido con id.

Etiquetas HTML

Ya hemos visto como definir las propiedades por medio de clases e identificadores, ahora veremos como aplicar estas propiedades directamente a las etiquetas de HTML, por ejemplo si deseamos aplicarle un estilo a la etiqueta párrafo, se realiza de la siguiente manera.

p { font-family: arial; font-size: 25px; letter-spacing: 1px; }

En este fragmento se define una familia de fuentes, el tamaño de la letra y el espacio dentre letras, estas propiedades se aplicara a todos los párrafos que existan en cada etiqueta de párrafo p.

Este es un párrafo con estilos css