Crea tu web, tutor html, css

Como usar el CSS: Introducción

Cuando creas una página web introduces un contenido en un documento y lo formateas, o sea, le das el aspecto con el que quieres que aparezca. Esto lo consigues modificando los atributos de cada elemento que forma la página web. Así podrás definir el texto que debe ir en negrita, una imagen para el fondo de la página, una determinada fuente de caracteres...

 
La ágina web como unión de contenido y estilos

Un estilo es el conjunto de argumentos y sus valores que se usan para controlar el aspecto de cada elemento de la página: color, fondo, estilo de letra, posición... Puede aplicarse a cada elemento de la página en el propio código HTML (en line con style) o mediante reglas de estilo CSS

Y ¿qué es el CSS? Se trata de un pseudo lenguaje con el que se puede describir la forma en la que se ve cada elemento de la página web, sin tener en cuenta el contenido. Es decir: yo creo el contenido de la página web y con la hoja de estilo describo la forma en la que se verá.

O también puedes verlo como el pseudo lenguaje que permite aplicar estilos a cualquier elemento de la página web.

El pseudo lenguaje CSS permite separar contenido de la página (información) de su formato, su aspecto. Esta filosofía de trabajo ya se aplicaba en el HTML 4, pero en HTML 5 es primordial

La separación de funciones trae como consecuencia una gran ventaja: permite cambiar el aspecto de toda una página web, y de todo un sitio, sin tener que tocar página por página, basta con modificar unas lineas en un archivo compartido por todas esas páginas, en ese archivo es donde se almacena la información sobre como se ve la página.

La última versión de este pseudo lenguaje es la CSS3, es soportada por la mayoría, si no todos, los navegadores modernos. Hoy prácticamente todos los diseños web utilizan las hojas de estilos CSS3. Pese a su estandarización pueden existir pequeñas diferencias entre navegadores, pero son mínimas y prácticamente no afectan al aspecto de las páginas.

Esta versión se va ampliando con nuevas funcionalidades o añadidos, al parecer no va a existir un CSS4.

El ultimo estandar de CSS ofrece posibilidades que cualquier diseñador sabrá apreciar: crear cuadros con esquinas redondeadas, sombras de texto, transparencias de colores, hacer animaciones.... El CSS 3 te da múltiples opciones y aquí te contamos como empezar a sacarle el jugo.

Un par de muestras sencillas de estilos CSS3

Fíjate en las esquinas de este rectángulo

Y si te fijas esta caja tiene sombra!!

Como ves el CSS3 permite algunas formas muy interesantes para dar estilo a nuestros diseños.

Esta pequeña guía de uso del CSS3 te permitirá iniciarte en el uso de las hojas de estilos.

Lo que hagas con ello solo está limitado por tu imaginación. Fíjate este botón

¿qué te parece si te digo que está hecho con estilos CSS3? Es un muestra llamativa, vale, no es de un gusto exquisito, pero sirve como una mínima muestra de lo que puedes hacer con CSS.

Una regla CSS es una conjunto de declaraciones formadas por una propiedad y su valor.

Se pueden definir reglas para cualquier elemento de la página web.

Para inciarte con practicar usa estos ejercicios de CSS

Sintaxis de las reglas CSS

Una regla de estilo se define mediante un nombre o selector y un conjunto de propiedades y sus valores separados por punto y coma, encerrados entre llaves:

<style>
p{
  font-family: Arial;
  color: blue;
}
</style>
<p>Ves este párrafo en azul y letra Arial</p>
Ejemplo de una definición de estilo con dos reglas

En este ejemplo tienes los elementos que foman la regla

Selector
Es el elemento al que se aplica la regla. En este caso esta regla va a definir el aspecto de todos los párrafos (p) de la página. Más adelante verás que estos elementos pueden filtrarse.
Propiedad
Es el atributo aplicable al selector que se quiera formatear. Este caso se apllican la propiedad font-family (tipo de letra) y color del texto
Valor
Este es el valor que se le da a la propiedad. En este ejemplo el valor es Arial para tipo de letra y blue para color.

Hemos definido una regla con dos declaraciones que se aplica a todos los párrafos de la página, con esta regla los párrafos aparecerán en Arial con color azul. (blue)

Es una sintaxis muy simple:

  • La regla comienza con el nombre del selector (con los modificadores que pueda tener)
  • Cada declaración acaba en ; (punto y coma)
  • El conjunto de declaraciones está encerrado entre llaves.

Las reglas así definidas puedes colocarla en la página web entre etiquetas <style></style> o almacenarlas en un archivo independiente que se llamará desde la página mediante un elemento <link rel="stylesheet" href="/estilos.css">.

Esta linea en la sección head de la página hace que esta busque sus estilos en un archivo de nombre estilos.css situados en la carpeta css de tu sitio web:

<link rel="stylesheet" href="/css/estilos.css">

También puedes definir las reglas en linea, sobre la marcha, dentro del código html de página, para lo que usas el atributo style del elemento donde quieras aplicarla. Formaría parte de la definición del elemento.

<div style="height: 100px; color: blue, font-family:Arial">
esto define un bloque de 100 px de alto con letras azules en arial</div>
<span style="font-style: italic; font-weight: bold">Este texto está en cursiva y negrita</span>
Ejemplo de una definición de estilo con reglas inline
Las reglas de estilo pueden escribirse en un archivo compartido por todo el sitio web. Esto permite modificar el aspecto del sitio cambiando un solo archivo, el que contiene las reglas CSS.

Un buen diseño coloca los estilos en un archivo independiente y usa el mínimo de estilos en línea