LAS PROPIEDADES DE ESTILO CSS

A los distintos elementos que pueden aparecer en una pgina web se le pueden definir
distintas propiedades las cuales, a su vez pueden tomar distintos valores. As por ejemplo, una
propiedad puede ser el color de fondo y los valores podran ser, azul, verde, naranja, etc, etc.

En los apartados siguientes vamos a ir viendo cules con esas propiedades que podemos
definir a los elementos Html y cmo se utilizan. Vers como encuentras el modo de conseguir
lo que deseas a travs de los estilos CSS sin necesidad de tocar el Html. Veremos todas estas:

- Fuentes y Textos

- Propiedad color

- Color de Fondo

- Imagen de Fondo

- Margen

- Mrgenes Interiores

- Ancho

- Propiedades del Borde

PROPIEDADES DE ESTILO CSS PARA LAS FUENTES Y TEXTOS

Se pueden aplicar a todos los textos, incluidos los enlaces de los cuales se habl en un
apartado especial para ellos. Para definir un estilo para un texto podemos usar, entre otros, los
siguientes atributos: font-family, font-style, font-weight y font-size.

1.- La propiedad font-family se usa para determinar la fuente con la que se quiere representar
el texto. Se pueden indicar varias de modo que si el visitane no tiene la primera fuente
instalada en su ordenador, se pasa a comprobar la segunda y as sucesivamente hasta
encontrar unaque s tenga instalada el usuario. De todas formas, si usais fuentes estandar o
comunes no debe haber problema, con lo que bastar con poner una o dos solamente.

.parrafouno { font-family: Arial,Verdana,Helvetica,sans-serif ; }

Fijaos que cada tipo de fuente est separada por una coma.

2.- Para poner el texto en cursiva se usa la propiedad font-style, cuyo valor es italic para
cursivas y normal para . . pues para normales, claro.

.parrafodos { font-style:italic ; }
3.- Con la propiedad font-weight definimos el grosor de la letra y puede tomar los valores
bold, bolder, 900, 800, ....300, 200, 100 y lighter. El primero es el mas "negrito" y el ltimo el
ms grosor ms fino. No todos los navegadores afinan tanto, algunos solo tienen encuenta que
sea negrita o normal y no saben distinguir entre solo un poco negrita y negrita. Un ejemplo
para un texto en negrita sera:

.textonegrito { font-weight:bold ; }

4.- Para definir el tamao del texto usaremos la propiedad font-size indicando su valor y sin
olvidar nunca la unidad en la que se mide (pixeles, puntos, etc..). Si definimos un tamao, en
unidades fijas el visitante las ver tal como hemos indicado, a pesar de que elija ver el texto
mayor desde su navegador, por lo que habr que escoger un tamao bien estudiado, evitando
as que visitantes que usen un tamao de pantalla grande tengan que coger los prismticos
para leer nuestra web, xD. Os expliqu el uso y las distintas unidades que podemos emplear en
el apartado "Las Unidades".

Resumiendo: Si vamos a definir todas estas propiedades para un texto, quizs os venga bien
resumirlo un poco. Esto se puede hacer de la forma siguiente y cuidando este mismo orden:

.selector { font : ValordeStyle ValordeWeight ValordeSize ValoresdeFamily ; }

recordando que no hay que separar con comas nada ms que los distintos valores de Family si
es que ponermos varios. El resto ir separado con espacios solamente. Vemos un ejemplo?

.otrotextomas { font: italic bolder 15px Arial,Verdana,sans-serif ; }

Si no se indica italic se comprende que el texto es normal, es decir, no en cursiva.

5.- El atributo text-decoration, puede tomar los valores none, overline, underline, through y
blink, aunque es conveniente comprobarlos, pues algunos no funcionan correctamente en
determinados Navegadores que no siguen correctamente las indicaciones de CSS (de las Hojas
de Estilo).

none es el valor por defecto e indica que no se representar el texto con ningn tipo de
decoracin.

overline mostrar una lnea por encima del texto escogido.

underline representa el texto subrayado.

Line-through tacha el texto y

blink lo muestra parpadeante, cuando al navegador le da la gana, por cierto.

Un texto tachado y de color rojo se podra definir con:

.textotachao { text-decoration:through ; color:red ; }

6.- Para mostrar un texto alineado podemos usar la propiedad text-align que puede tomar los
valores left, right, justify o center que lo alinearn respecto al lugar donde se encuentre dicho
texto. La forma de definirlo es, por ejemplo:

.parrafojustificao { text-align:justify ; }

7.- Si queris definir el prrafo de la misma manera que lo tengo yo, con la primera lnea un
poco metida hacia dentro (a esto se le llama sangra y no es para bebrsela borrachines) lo
podis hacer con la propiedad text-indent, cuyo valor hay que especificar con unidades y todo,
(pixeles, puntos, tanto por ciento, etc..) por ejemplo:

p { text-indent:50px ; }

PROPIEDAD COLOR

sta propiedad define el color del texto de un elemento. Como valor puede tomar todos los
colores posibles los cuales se pueden indicar de distintas formas. Existe una serie de 16 colores
estandar que pueden indicarse directamente con su nombre en ingls. Son los siguientes

Para crear un estilo caracterizado por un color de texto rojo, llamado por ejemplo textorojo,
escribiramos con el NotePad en la Hoja de Estilo la siguiente Regla de CSS:

.textorojo { color:red ; }

donde por supuesto, podis cambiar lo de textorojo por el nombre que queris.

Esta forma de indicar el color nos limita a usar solamente esos 16 colores, pero es posible
definir otros muchos mediante lo que se llama el Valor Hexadecimal, que indica la cantidad de
rojo, verde y azul que contiene un color. Por este mtodo pueden definirse hasta 16 millones
de colores. Os pondra la lista de los 16 millones de colores y sus respectivos valores, pero casi
mejor os la imaginais, vale? je je je.

La forma de definir colores mediante su valor hexadecimal es la siguiente:

.textorojo { color| ;}

Es algo pesado aprenderse los 16 millones de cdigos de cada color, no? Hay programas de
dibujo e incluso editores de HTML que te permiten elegir el color deseado de entre esos 16
millones y te muestran su cdigo hexadecimal. Podis usar esos programas para obtener el
valor del color que buscais y as ponerlo en la hoja de estilo tal y como os acabo de apuntar. De
todas formas, con los 16 colores estandar hay mas que suficientes, no? Exite alguna que otra
forma de especificar los colores pero con esto tenis mas que suficiente. Para aprender ms,
acudir a los enlaces recomendados al final.

Tened en cuenta tambin que no todo el mundo tiene un peaso de targeta grfica con un
puao de colores, de modo que si escogis alguno raro, es posible que esa gente no lo vea
correctamente.