Introducción a CSS

Omar Omar

CSS es un lenguaje que se usa para aplicar estilos a los distintos objetos de una página web. Últimamente es la forma de aplicar un formato a un texto, ubicar un elemento en la página, crear una estructura de dos o tres columnas. Antes se hacía desde la propia página usando distintas etiquetas como font junto con sus distintos atributos (face, size, etc.). CSS permite cargar la página HTML sin utilizar etiquetas como font. Cualquier cambio que se haga en el archivo que contiene el código CSS se aplica inmediatamente en la página. Una buena referencia de estilos en cascada la tenemos en Guía de hojas de estilo. Vamos a ver un poco la sintaxis y los elementos de CSS más usados.

Sintaxis

Para aplicar un estilo, se hace sobre una etiqueta presente en la página. Se escribe la etiqueta y entre llaves damos valor a las distintas propiedades, que acabarán cada una con un punto y coma. La sintaxis es:

Formas de crear estilos

Para aplicar estilos, lo podemos hacer desde la propia página o desde un archivo externo.

En el propio fichero html

Para definir un estilo nos colocamos dentro de la etiqueta head donde insertaremos la etiqueta style. Ponemos un ejemplo que incluye un estilo colocado dentro de la propia página:

   
   

En un fichero externo

Creamos, en primer lugar, un fichero con un procesador como Sublime o como Notepad++. Su extensión será .css para guardarlo. En él aplicaremos las distintas propiedades a las etiquetas. Basta aplicar la sintaxis explicada a cada una de las etiquetas. Una hoja de estilos tiene esta apariencia.

Solo queda relacionar la página web con la hoja de estilos. Nos colocamos dentro de la etiqueta head y tecleamos la etiqueta link:

Así cualquier propiedad que añadimos o modificamos dentro de estilos.css queda reflejado en la página una vez guardados los cambios y actualizado el archivo html. En el ejemplo, la ruta de acceso a la hoja de estilos está en la carpeta CSS.

Propiedades que podemos aplicar con las hojas de estilos

Para comenzar sin algunos estilos predefinidos usamos el * y le aplicamos propiedades de inicio:

* {
margin: 0;
padding: 0;
}

Así todos los márgenes los dejamos a cero (margin) y con padding: 0 quitamos el desplazamiento del texto con respecto al borde izquierdo de su contenedor (normalmente un div). Podemos ver diez técnicas de reseteo en cssblog.

Para aplicar un color de fondo a un div con id contenedor usaremos la propiedad background. Si queremos que tenga color de fondo rojo en la hoja de estilos escribiremos:

#contenedor {
background: red;
}
Si además, queremos que el texto sea blanco también lo podemos hacer de la siguiente forma:


#contenedor {
background: red;
color: #fff;
}


En vez de escribir directamente el color, lo hemos hecho con código hexadecimal y colocando el carácter # antes y sin dejar espacios.

Una propiedad básica del texto es font-family que nos permite definir que tipo de letra aplicamos a un texto determinado. Podemos hacer referencia a varios tipos de letras separados por comas:

font-family: Arial, Helvetica, sans-serif;

Para modificar el tipo de letra usamos la propiedad font-size:

div { font-size: 1em; }


Aquí hemos utilizado el tamaño de letra del propio elemento como referencia. 1em suele equivaler a un tamaño de letra de 12 ptos. Corresponde al ancho de la letra M. Podemos ver más en unidades de medida y con ejemplos.

Si queremos colocar un texto en negrita, estamos modificando el grosor de letra. necesitamos establecer el valor de la propiedad font-weight a bold:

div { font-weight: 1em; }

Para modificar el estilo de letra usaremos font-style:

#tipo { font-style: italic; }

Para este post es suficiente, todas las variantes de estas propiedades las podéis ver en Introducción a CSS que os va permitir trabajar estos estilos con soltura. También se puede aprender con htmlpoint. Seguiremos trabando con CSS. Un saludo.