Ventajas de usar estilos CSS en las pginas web

Separa la estructura de un documento de su presentacin esttica. Limpia y hace ms sencilla y fcil de entender y modificar el cdigo HTML de las pginas. Facilita cambiando los valores de un solo archivo (en caso de que el estilo CSS se encuentra en un archivo externo) modificar el estilo de varias pginas a la misma vez. Una pgina web puede tener distintos estilos, para ser usada y vista de forma adecuada en equipos diferentes, ya sea una PC de escritorio, una TabletPC o un telfono celular.

Como utilizar estilos CSS en las pginas web

El estilo CSS se emplea de varias formas, cada una tiene sus ventajas y desventajas, en ocasiones se usan hasta las tres siguientes simultneamente. 1- Encerrado entre las etiquetas STYLE en el rea del encabezado o HEAD de la pgina, de este modo se asegura que al navegador representar el rea de cuerpo o BODY, todas las instrucciones estn debidamente cargadas en la memoria. 2- Inline, insertando de forma independiente las instrucciones del estilo en cada bloque del cdigo HTML. Los dos mtodos anteriores dan la ventaja de que de usarse el archivo de la pgina de forma independiente se muestre con el estilo deseado, adems permite que distintas paginas usen un estilo diferente. 3- Utilizar las instrucciones escritas en un archivo externo al que se hace referencia mediante un link insertado en el rea del HEAD de la pgina. El archivo de estilo se trata de un simple archivo de texto con la extensin CSS. El link necesario para hacer referencia a dicho archivo es similar al siguiente: <link href="../style/stylegreen.css" rel="stylesheet" type="text/css" media="screen" /> La ventaja de este mtodo es que al vincular varias pginas a un nico archivo CSS, se agiliza la carga de estas ya que el navegador lee el archivo CSS solo una vez y lo mantiene en memoria.

Como definir el estilo de un elemento mediante CSS

La sintaxis que se emplea para definir el estilo de un elemento es la siguiente:

Elemento{atributo:valor;}
Es muy simple, primero se coloca el selector o elemento, luego se abre una llave { y se empiezan a colocar los atributos o propiedades, seguidos de dos puntos : y luego el valor seguido de punto y coma ; al final se cierra el estilo para el selector con el cierre de llave }. Se pueden definir tantos atributos con sus respectivos valores como se desee, separndolos con un espacio o un salto de lnea. Muy importante, en CSS se deben escribir los atributos y valores solo con minsculas.

Ejemplos de como usar CSS para definir como se debe mostrar un elemento
Para definir el estilo de los elementos que se encuentren encerrados en un bloque (DIV, SPAN, A, etc) primeramente se le asigna una identidad nica con la etiqueta ID, por ejemplo: id="caso1", entonces usa: #caso1{font-size:22px;color:blue;} Para definir el estilo de forma simultnea de varios elementos que se encuentren encerrados en distintos bloques (DIV, SPAN, A, etc), asgnales a todos la misma clase, por ejemplo class="caso2", entonces usa: .caso2{font-size:22px;color:blue;} Definir el estilo de los elementos de una tabla: table{width:400%;} td{padding:4px;} td{background-color:yellow;} Definir el estilo de todos los vnculos en la pgina (el color normal y al posicionar el ratn encima): a{color:blue;} a:hover{color:red;}

Como definir el estilo de un elemento con el mtodo inline

Para definir el estilo de un elemento con el mtodo inline es necesario usar el atributo STYLE dentro del elemento. Ejemplos: <div style="color:green;">elemento</div> <span style="color:green;">element</span> <table style="width:700px;"> <a style="cursor:crosshair" href="http://norfipc.com">Vnculo</a>

Atributos o propiedades de los estilos CSS

Atributos son los mtodos que le indican al navegador los valores a modificar en el estilo, es enorme la cantidad de ellos que se pueden emplear en CSS y que validan correctamente con las especificaciones, en la siguiente pgina de: CSS Reference puedes ver una tabla con todos. En esta pgina de forma modesta solo se explica y se ofrecen ejemplos y referencias de los ms comunes y que con ms frecuencia tenemos necesidad de utilizar en la prctica.

Tabla de atributos para definir el estilo del texto

De la amplia variedad de atributos que existe para definir el estilo del texto, los mas utilizados son los siguientes: Atributo Descripcin

font

Especifica todos los atributos en una sola declaracin usando el siguiente orden: font-style font-variant font-weight fontsize/line-height font-family, por ejemplo: "font:15px arial,sans-serif;" "font:italic bold 18px Georgia, serif;"

font-family

Especifica el tipo de fuente a emplear, utiliza el vnculo para leer mas informacin

font-size

Permitir definir con toda exactitud el tamao de las fuentes del texto contenido en un bloque especificando su tamao en pixeles, por ejemplo: "font-size:12px;"

Otra forma de definirlo es usando los siguientes valores: xx-small, x-small, small, medium, large, x-large, xx-large, smaller y larger

Tambin para establecer la medida del texto se utiliza la unidad "em", 1em es la fuente predeterminada en una pgina, la relacin entre em y pixeles se calcula con las siguientes frmulas: em = pixeles/16 o pixeles= em X 16 Por ejemplo: Una fuente de 2em = 32px Una fuente de 24px = 1.5em

font-style

Estilo de la fuente del texto, valores: "font-style:italic;" estilo en itlica "font-style:oblique;"

font-weight

Especifica el grosor o no de la fuente: "font-weight:normal;" grueso normal "font-weight:bold;" grueso, conocido como negrita "font-weight:bolder;" grueso mas grueso "font-weight:lighter;" (100 a 900)

@font-face

Permite impregnar fuentes disponibles en internet en el cdigo HTML de la pgina

color

Establece el color del texto, utiliza el vnculo para leer mas

informacin

direction

Especifica la direccin del texto

letter-spacing

Incrementa o reduce el espacio entre caracteres, se expresa en pixeles, es posible usar valores negativos

line-height

Interlineado, es el espacio entre lneas definido en pixeles. Se usa para disminuir o aumentar el espacio entre las lneas de texto, el valor normal o predeterminado es el mismo que se utilice en font-size

text-align

Especifica la alineacin horizontal del texto de la siguiente forma: "text-align:left;" texto a la izquierda "text-align:center;" texto centrado "text-align:right;" texto a la derecha

text-decoration

Especifica la decoracin del texto de la siguiente forma: "text-decoration:none;" texto normal "text-decoration:underline" lnea bajo el texto "text-decoration:overline" lnea sobre el texto "text-decoration:line-through" texto tachado "text-decoration:blink" texto parpadeante

text-indent

Indentacin significa mover un bloque de texto hacia la derecha insertando espacios para separarlo del borde, lo que se conoca como sangra. Se puede expresar en pixeles o en porciento relativo a la pantalla

text-transform

Controla la transformacin del texto, por ejemplo: "text-transform:capitalize;" La Primera Letra De Cada Palabra En Maysculas "text-transform:uppercase;" TODO EL TEXTO EN MAYSCULAS "text-transform:lowercase;" texto en minsculas

vertical-align

Alinea en el eje vertical un elemento, los valores son: valor en pixeles, %, sub, super, top, text-top, middle, bottom, text-bottom

white-space

Especifica el espacio en blanco en el elemento, los valores pueden ser: normal, nowrap, pre, pre-line, pre-wrap

word-spacing

Especifica que el espacio entre palabras en un prrafo debe ser de 30 pixeles. Incrementa o reduce el espacio entre palabras en el texto usando pixeles, pt, cm, em, es posible usar valores negativos

text-overflow

Especifica que pasa cuando el texto sobrepasa el espacio que lo contiene

text-shadow

Agrega sombra al texto, se usa con dos valores en pixeles seguidos del color, por ejemplo: "text-shadow: 2px 2px blue;"

word-wrap

Permite que palabras largas sean divididas y salten a la siguiente lnea, se usa: "word-wrap:break-word;"

Como definir el color del texto con CSS

Podemos asignar al texto el color que deseemos mediante el atributo "color:color;". Por ejemplo: "color:blue;" Los colores se pueden especificar en las pginas HTML de dos maneras una especificando el nombre del color en ingles y la otra usando una numeracin para denotar un valor de color del sistema RGB. Usando el nombre del color en ingls.

Algunos de los nombres de colores en ingls que se pueden emplear son los siguientes: red, magenta, purple, blue, navy, green, lime, yellow, olive, cyan, brown, black, gray, teal y white que mostrar el texto en blanco. Usando el valor hexadecimal del color. Un valor del color del RGB consiste en tres nmeros hexadecimales de dos dgitos que especifican la intensidad del color correspondiente. Por ejemplo, el valor #FF0000 es color rojo. Utiliza el siguiente selector de colores.

Selector de colores en valores hexadecimal

Mueve el ratn encima de la imagen y da un clic en el color a seleccionar, el cuadro al lado mostrar y permitir copiar el valor hexadecimal que le corresponde.

Todos los cdigos hexadecimales de los colores que se pueden emplear se muestran en la siguiente tabla, oprime el botn para expandirla. 000000 00001E 00003C 00005A 000078 000096 0000B4 0000D2 0000F0

001E00 001E1E 001E3C 001E5A 001E78 001E96 001EB4 001ED2 001EF0

003C00 003C1E 003C3C 003C5A 003C78 003C96 003CB4 003CD2 003CF0 005A0 0 007800 009600 005A1 E 00781E 00961E 005A3 C 00783C 00963C 005A5 A 00785A 00965A 005A7 8 007878 009678 005A9 6 007896 009696 005AB 4 0078B4 0096B4 005AD 2 0078D2 0096D2 005AF 0 0078F0 0096F0

00B400 00B41E 00B43C 00B45A 00B478 00B496 00B4B4 00B4D2 00B4F0 00D20 0 00F000 00D21 E 00F01E 00D23 C 00F03C 00D25 A 00F05A 00D27 8 00F078 00D29 6 00F096 00D2B 4 00F0B4 00D2D 2 00F0D2 00D2F 0 00F0F0

1E0000 1E001E 1E003C 1E005A 1E0078 1E0096 1E00B4 1E00D2 1E00F0 1E1E0 0 1E3C0 0 1E5A0 0 1E1E1 E 1E3C1 E 1E5A1 E 1E1E3 C 1E3C3 C 1E5A3 C 1E1E5 A 1E3C5 A 1E5A5 A 1E1E7 8 1E3C7 8 1E5A7 8 1E1E9 6 1E3C9 6 1E5A9 6 1E1EB 4 1E3CB 4 1E5AB 4 1E1ED 2 1E3CD 2 1E5AD 2 1E1EF 0 1E3CF 0 1E5AF 0

1E7800 1E781E 1E783C 1E785A 1E7878 1E7896 1E78B4 1E78D2 1E78F0 1E9600 1E961E 1E963C 1E965A 1E9678 1E9696 1E96B4 1E96D2 1E96F0 1EB40 0 1ED20 0 1EB41 E 1ED21 E 1EB43 C 1ED23 C 1EB45 A 1ED25 A 1EB47 8 1ED27 8 1EB49 6 1ED29 6 1EB4B 4 1ED2B 4 1EB4D 2 1ED2D 2 1EB4F 0 1ED2F 0

1EF000 1EF01E 1EF03C 1EF05A 1EF078 1EF096 1EF0B4 1EF0D2 1EF0F0 3C0000 3C001E 3C003C 3C005A 3C0078 3C0096 3C00B4 3C00D2 3C00F0 3C1E0 0 3C3C0 0 3C5A0 0 3C1E1 E 3C3C1 E 3C5A1 E 3C1E3 C 3C3C3 C 3C5A3 C 3C1E5 A 3C3C5 A 3C5A5 A 3C1E7 8 3C3C7 8 3C5A7 8 3C1E9 6 3C3C9 6 3C5A9 6 3C1EB 4 3C3CB 4 3C5AB 4 3C1ED 2 3C3CD 2 3C5AD 2 3C1EF 0 3C3CF 0 3C5AF 0

3C7800 3C781E 3C783C 3C785A 3C7878 3C7896 3C78B4 3C78D2 3C78F0

3C9600 3C961E 3C963C 3C965A 3C9678 3C9696 3C96B4 3C96D2 3C96F0 3CB40 0 3CD20 0 3CF00 0 5A000 0 5A1E0 0 5A3C0 0 5A5A0 0 5A780 0 5A960 0 5AB40 0 5AD20 0 5AF00 0 780000 3CB41 E 3CD21 E 3CF01 E 5A001 E 5A1E1 E 5A3C1 E 5A5A1 E 5A781 E 5A961 E 5AB41 E 5AD21 E 5AF01 E 78001E 3CB43 C 3CD23 C 3CF03 C 5A003 C 5A1E3 C 5A3C3 C 5A5A3 C 5A783 C 5A963 C 5AB43 C 5AD23 C 5AF03 C 78003C 3CB45 A 3CD25 A 3CF05 A 5A005 A 5A1E5 A 5A3C5 A 5A5A5 A 5A785 A 5A965 A 5AB45 A 5AD25 A 5AF05 A 78005A 3CB47 8 3CD27 8 3CF07 8 5A007 8 5A1E7 8 5A3C7 8 5A5A7 8 5A787 8 5A967 8 5AB47 8 5AD27 8 5AF07 8 780078 3CB49 6 3CD29 6 3CF09 6 5A009 6 5A1E9 6 5A3C9 6 5A5A9 6 5A789 6 5A969 6 5AB49 6 5AD29 6 5AF09 6 780096 3CB4B 4 3CD2B 4 3CF0B 4 5A00B 4 5A1EB 4 5A3CB 4 5A5AB 4 5A78B 4 5A96B 4 5AB4B 4 5AD2B 4 5AF0B 4 7800B4 3CB4D 2 3CD2D 2 3CF0D 2 5A00D 2 5A1ED 2 5A3CD 2 5A5AD 2 5A78D 2 5A96D 2 5AB4D 2 5AD2D 2 5AF0D 2 7800D2 3CB4F 0 3CD2F 0 3CF0F 0 5A00F 0 5A1EF 0 5A3CF 0 5A5AF 0 5A78F 0 5A96F 0 5AB4F 0 5AD2F 0 5AF0F 0 7800F0

781E00 781E1E 781E3C 781E5A 781E78 781E96 781EB4 781ED2 781EF0 783C00 783C1E 783C3C 783C5A 783C78 783C96 783CB4 783CD2 783CF0 785A0 0 787800 789600 785A1 E 78781E 78961E 785A3 C 78783C 78963C 785A5 A 78785A 78965A 785A7 8 787878 789678 785A9 6 787896 789696 785AB 4 7878B4 7896B4 785AD 2 7878D2 7896D2 785AF 0 7878F0 7896F0

78B400 78B41E 78B43C 78B45A 78B478 78B496 78B4B4 78B4D2 78B4F0 78D20 0 78F000 960000 78D21 E 78F01E 96001E 78D23 C 78F03C 96003C 78D25 A 78F05A 96005A 78D27 8 78F078 960078 78D29 6 78F096 960096 78D2B 4 78F0B4 9600B4 78D2D 2 78F0D2 9600D2 78D2F 0 78F0F0 9600F0

961E00 961E1E 961E3C 961E5A 961E78 961E96 961EB4 961ED2 961EF0 963C00 963C1E 963C3C 963C5A 963C78 963C96 963CB4 963CD2 963CF0 965A0 0 967800 969600 965A1 E 96781E 96961E 965A3 C 96783C 96963C 965A5 A 96785A 96965A 965A7 8 967878 969678 965A9 6 967896 969696 965AB 4 9678B4 9696B4 965AD 2 9678D2 9696D2 965AF 0 9678F0 9696F0

96B400 96B41E 96B43C 96B45A 96B478 96B496 96B4B4 96B4D2 96B4F0 96D20 0 96F000 96D21 E 96F01E 96D23 C 96F03C 96D25 A 96F05A 96D27 8 96F078 96D29 6 96F096 96D2B 4 96F0B4 96D2D 2 96F0D2 96D2F 0 96F0F0

B40000 B4001E B4003C B4005A B40078 B40096 B400B4 B400D2 B400F0 B41E0 0 B43C0 0 B45A0 0 B41E1 E B43C1 E B45A1 E B41E3 C B43C3 C B45A3 C B41E5 A B43C5 A B45A5 A B41E7 8 B43C7 8 B45A7 8 B41E9 6 B43C9 6 B45A9 6 B41EB 4 B43CB 4 B45AB 4 B41ED 2 B43CD 2 B45AD 2 B41EF 0 B43CF 0 B45AF 0

B47800 B4781E B4783C B4785A B47878 B47896 B478B4 B478D2 B478F0 B49600 B4961E B4963C B4965A B49678 B49696 B496B4 B496D2 B496F0 B4B40 0 B4D20 0 B4F00 0 B4B41 E B4D21 E B4F01 E B4B43 C B4D23 C B4F03 C B4B45 A B4D25 A B4F05 A B4B47 8 B4D27 8 B4F07 8 B4B49 6 B4D29 6 B4F09 6 B4B4B 4 B4D2B 4 B4F0B 4 B4B4D 2 B4D2D 2 B4F0D 2 B4B4F 0 B4D2F 0 B4F0F 0

D2000 0 D21E0 0 D23C0 0 D25A0 0 D2780 0 D2960 0 D2B40 0 D2D20 0 D2F00 0 F00000

D2001 E D21E1 E D23C1 E D25A1 E D2781 E D2961 E D2B41 E D2D21 E D2F01 E F0001E

D2003 C D21E3 C D23C3 C D25A3 C D2783 C D2963 C D2B43 C D2D23 C D2F03 C F0003C

D2005 A D21E5 A D23C5 A D25A5 A D2785 A D2965 A D2B45 A D2D25 A D2F05 A F0005A

D2007 8 D21E7 8 D23C7 8 D25A7 8 D2787 8 D2967 8 D2B47 8 D2D27 8 D2F07 8 F00078

D2009 6 D21E9 6 D23C9 6 D25A9 6 D2789 6 D2969 6 D2B49 6 D2D29 6 D2F09 6 F00096

D200B 4 D21EB 4 D23CB 4 D25AB 4 D278B 4 D296B 4 D2B4B 4 D2D2B 4 D2F0B 4 F000B4

D200D 2 D21ED 2 D23CD 2 D25AD 2 D278D 2 D296D 2 D2B4D 2 D2D2D 2 D2F0D 2 F000D2

D200F 0 D21EF 0 D23CF 0 D25AF 0 D278F 0 D296F 0 D2B4F 0 D2D2F 0 D2F0F 0 F000F0

F01E00 F01E1E F01E3C F01E5A F01E78 F01E96 F01EB4 F01ED2 F01EF0 F03C0 0 F05A0 0 F07800 F09600 F0B40 0 F0D20 0 F03C1 E F05A1 E F0781E F0961E F0B41 E F0D21 E F03C3 C F05A3 C F0783C F0963C F0B43 C F0D23 C F03C5 A F05A5 A F0785A F0965A F0B45 A F0D25 A F03C7 8 F05A7 8 F07878 F09678 F0B47 8 F0D27 8 F03C9 6 F05A9 6 F07896 F09696 F0B49 6 F0D29 6 F03CB 4 F05AB 4 F078B4 F096B4 F0B4B 4 F0D2B 4 F03CD 2 F05AD 2 F078D2 F096D2 F0B4D 2 F0D2D 2 F03CF 0 F05AF 0 F078F0 F096F0 F0B4F 0 F0D2F 0

F0F000 F0F01E F0F03C F0F05A F0F078 F0F096 F0F0B4 F0F0D2 F0F0F0

TablaColores Bookmarklet que permite tener disponible una tabla de colores web en tu navegador, un clic en el para probarlo, para guardarlo arrstralo a la barra de marcadores, si usas Internet Explorer da un clic derecho encima, escoge "Agregar a Favoritos" y selecciona la "Barra de Favoritos".

Definir con CSS el tipo o familia de la fuente

Mediante CSS podemos fijar el tipo de fuente de cada una de las partes de nuestra pgina, mediante el atributo font-family:nombre-de-fuente;. El parmetro family puede ser cualquiera de las fuentes que se tiene instalada en el equipo. Podemos indicar varias fuentes separadas por coma para que el navegador use la que sigue, en caso de no tener instalada la primera, por ejemplo: "font-family:Comic Sans MS,Verdana;" Ejemplos de algunas fuentes disponibles en todos los Windows: Times New Roman: Fuente del tipo Serif, como la que se usa en la mayora de peridicos y revistas, y es buena para presentacin en pantalla, a pesar de que fue diseada para trabajar sobre papel. Arial: Del tipo Sans Serif, con forma aerodinmica. En tamaos pequeos puede resultar difcil su lectura en pantalla. Verdana: Fuente diseada para su visin en pantalla, por lo que da unos resultados ptimos en el diseo web. Es la usada en esta pgina. Comic Sans MS: Fuente alegre y desenfadada, de tipo Sans Serif, muy indicada para pginas de gente joven, aunque en otro tipo de pginas puede resultar poco seria y profesional. Georgia: Es de tipo Serif, y ha sido diseada igualmente para usar en computadoras, por lo que es de lectura cmoda. Posee tambin una versin de cursiva, muy atractiva.

Como combinar las fuentes para asegurar compatibilidad

Existen dos tipos de nombres de font-family, las especficas, por ejemplo: Arial, Verdana, Georgia, etc y las genricas: serif, sans-serif, cursive, fantasy y monospace. Es recomendado para asegurar la compatibilidad, comenzar especificando la fuente favorita

y a continuacin relacionar una genrica para asegurar que el navegador escoge una de estilo similar en caso de no estar disponible la primera. A continuacin una tabla con ejemplos de cmo podemos combinar las fuentes. Fuentes de la familia Serif font-family Georgia, serif Ejemplo

As luce en un encabezado
As luce en un prrafo

"Palatino Linotype", "Book Antiqua", Palatino, serif

As luce en un encabezado
As luce en un prrafo

"Times New Roman", Times, serif

As luce en un encabezado
As luce en un prrafo

Fuentes de la familia Sans-Serif font-family Arial, Helvetica, sans-serif Ejemplo

As luce en un encabezado
As luce en un prrafo

Arial Black, Gadget, sans-serif

As luce en un encabezado
As luce en un prrafo

"Comic Sans MS", cursive, sans-serif

As luce en un

encabezado
As luce en un prrafo Impact, Charcoal, sans-serif

As luce en un encabezado
As luce en un prrafo

"Lucida Sans Unicode", "Lucida Grande", sansserif

As luce en un encabezado
As luce en un prrafo

Tahoma, Geneva, sans-serif

As luce en un encabezado
As luce en un prrafo

"Trebuchet MS", Helvetica, sans-serif

As luce en un encabezado
As luce en un prrafo

Verdana, Geneva, sans-serif

As luce en un encabezado
As luce en un prrafo

Fuentes de la familia Monospace font-family "Courier New", Courier, monospace Ejemplo

As luce en un encabezado
As luce en un prrafo

"Lucida Console", Monaco, monospace

As luce en un

encabezado
As luce en un prrafo

Usos y reglas del atributo @font-face

El atributo @font-face permite cargar una fuente de un servidor de internet. Se usa en caso que se quiera emplear en la pgina una fuente no disponible en Windows. Internet Explorer no admite cargar fuentes externas del formato TTF (True Type Font), solo las que estn en formato EOT (Embedded OpenType), por lo que se debe hacer la declaracin de la siguiente forma para que se muestre dicha pgina con la fuente indicada en todos los navegadores. Ejemplo de cmo cargar la fuente Symbola en una pgina de un servidor externo: @font-face {font-family: Symbola; src: url(http://sitioweb/carpeta/Symbola605.eot) ;} @font-face {font-family: Symbola; src: url(http:// sitioweb/carpeta /Symbola605.ttf) format("opentype");}

Atributos para definir el estilo de los bloques

Cada caja o bloque en HTML tiene un rea de contenido, ya sea texto una imagen u otro elemento y una zona circundante con 3 valores opcionales: margin, border y padding. rea del MARGIN (Transparente) rea del BORDER rea del PADDING (Transparente) CONTENIDO

Atributo

Descripcin

background-color

Establece el color del fondo de un elemento

border-style

Establece el estilo de los cuatro bordes, el parmetro estilo admite uno de los siguientes valores: "border-style:solid;" "border-style:dashed;" "border-style:double;" "border-style:groove;" "border-style:ridge;" "border-style:inset;" "border-style:outset;"

border-color

Establece el color de los cuatro bordes

border-width

Establece el ancho de los cuatro bordes definido en pixeles

border

Establece todas las propiedades del borde en una nica declaracin con el siguiente formato: "border:TAMAO ESTILO COLOR;" por ejemplo: "border:2px solid #ddd;"

Para definir un solo borde utiliza: border-top borde superior border-bottom borde inferior

border-left borde izquierdo border-right borde derecho

height

Establece la altura de un elemento expresado en pixeles

width

Establece el ancho de un elemento expresado en pixeles

margin-left

Se entiende por margen el espacio existente entre el bloque y el borde correspondiente de la pantalla activa del navegador. As que el margen izquierdo ser la distancia entre el lado izquierdo del bloque y el borde izquierdo de la pantalla del navegador. margin-left establece el margen a partir del lado izquierdo de un elemento expresado en pixeles

margin-bottom

Establece el margen a partir de la parte inferior de un elemento

margin-right

Establece el margen a partir del lado derecho de un elemento

margin-top

Establece el margen a partir de la parte superior de un elemento

margin

Establece las propiedades de todos los mrgenes en una sola declaracin de la siguiente forma. margin:SUPERIOR DERECHO INFERIOR IZQUIERDO; por ejemplo: "margin:6px 0 6px 0;"

padding

El espaciado interno (padding en ingls) fija la distancia que hay entre el bloque y el texto, imgenes, tablas,etc. que contiene. Establece las propiedades de padding en una sola declaracin, por ejemplo: "padding:6px 0 6px 0;"

Atributos para definir la posicin de elementos HTML

Atributo

Descripcin

bottom

Indica la posicin abajo

clear

Especifica el lado de un elemento en el que no esta permitido que floten otros elementos, los valores que se pueden emplear son: left, right, both, inherit (el valor se hereda del elemento anterior)

cursor

Especifica el tipo de cursor que usar el ratn, puede ser uno de los siguientes: auto, crosshair, e-resize, help, move, n-resize, ne-resize, nwresize, pointer, progress, s-resize, se-resize, sw-resize, text, wresize, wait y inherit.

display

La propiedad display establece la manera en que se muestra un elemento. Los elementos HTML son generalmente "inline" o "block", inline permiten tener contenido flotante a la derecha o a la izquierda, los elementos block ocupan la lnea completa por lo que no admiten lo anterior. Tambin la propiedad display permite mostrar o no un elemento usando display:none, similar a la propiedad visibility:hidden, la diferencia es que en visibility el elemento se oculta pero permanece en su lugar. Los valores que se pueden emplear son: block, compact, inline, none, inline-block, inline-table, list-item, marker, run-in, table

float

Especifica si un elemento debe flotar, los valores pueden ser: left, none, right, inherit

left

Indica la posicin a la izquierda

overflow

Especifica que pasa si el contenido sobrepasa los lmites del contenedor, los valores posibles son:

visible, hidden, scroll, auto

position

Define el tipo de posicionamiento usado por un elemento, valores: static, relative, absolute o fixed

right

Indica la posicin a la derecha

top

Indica la posicin encima

visibility

Especifica cuando o no un elemento es visible, valores: visible hidden collapse, (solo para uso en tablas, oculta una fila o columna)

z-index

Permite establecer el orden en que debe mostrarse los elementos, solo funciona en elementos posicionados (position:absolute, position:relative, o position:fixed), por ejemplo: "z-index:1;"

Por ltimo los archivos CSS deben validarse correctamente para asegurarse que no existe ningn error en el cdigo por mnimo que sea, ya que de ser as navegadores muy exigentes no mostrarn el estilo definido de forma adecuada, adems es definitorio para una correcta validacin de la pgina por Google ya que la validacin CSS es uno ms de los factores que se toman en cuenta para asignar el PageRank.

Modificar el estilo CSS de una pgina usando Javascript

Otra opcin es modificar el estilo de cualquier pgina desde eventos en el navegador, como son los botones, casillas o un simple clic. Esto se puede realizar utilizando Javascript, no es difcil, lee como hacerlo en la siguiente pgina:

Como cambiar y modificar el estilo CSS de las pginas web con Javascript

Herramientas en internet

Validador CSS W3 Link al Validador de estilos CSS gratis. Validar CCS. Bookmarklet para usar en la barra de marcadores del navegador web que
permite validar la pgina en la que se est navegando.