Como dar formato a un archivo XHTML con CSS

Como darle formato a una página XHTML.

Para este ejemplo usaremos el archivo xhtmlSinFormato.html. Para empezar copiaremos el código lo pegaremos en un bloc de notas (o el programa que uses para crear tus páginas Web) y lo renombraremos como xhtmlConFormato.html. Para darle formato es necesario utilizar CSS.

Empecemos con el CSS:

Lo más importante bajo mi punto de vista es comentar siempre lo que vas a hacer, quizá al principio no le des mucha importancia porque solo tengas un par de capas pero si generas un portal Web con mas de 200 capas estaría bien saber que dice cada cosa. Para comentar en css se utiliza este formato.

/*lo que desees comentar*/

Apartir de aquí pasteo el codigo que se va a utilizar con nuestra página Web.

/* CSS Document * por Ignacio Santos para Web Space Site si deseas copiar este contenido

por favor lee la licencia Copyleft en http://creativecommons.org/licenses/by-nd/2.5/es/.*/

body {

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

font-size:10px;

background-color: #99CCFF;

margin-left: 75px;

margin-bottom: 150px;

}

/*generamos espacio para una foto*/

#foto {

margin-top: 50px;

margin-bottom: 100px;

border-top-color:#000000;

border-top-style:so lid;

border-top-width:thin;

border-left-color:#00000 0;

border-left-style:solid;

border-left-width:thin;

b order-right-color:#000000;

border-right-style:solid ;

border-right-width:thin;

border-bottom-color:#0000 00;

border-bottom-style:solid;

border-bottom-width:t hin;

width: 250px;

height: 100px;

}

/*enlaces*/

.a {

color:#663333;

}

Comenzamos la explicación, no voy a explicar los atributos uno a uno es preferible visitar http://www.tejedoresdelweb.com/307/article-1061.html, es un sitio recomendado por el W3C donde aprender CSS.

Lo que si vamos a explicar es para que sirve.

Empecemos por

body {

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

font-size:10px;

background-color: #99CCFF;

margin-left: 75px;

margin-bottom: 150px;

}

Lo que aquí estamos modificando es el cuerpo (body) de la página, sin modificar los atributos que da el W3C.

• Font-family: Le ponemos una fuente Arial, si esa no estuviera en el sistema de los visitantes usariamos una Helvetica y si ocurriera lo mismo una sans-serif.

• Font-size: Tamaño predeterminado de la fuente

• Background-Color: Color que vamos a utilizar de fondo

• Margin-left: Cuanto margen izquierdo usaremos

• Margin-Bottom: Un margen hacia abajo.

#foto {

margin-top: 50px;

margin-bottom: 100px;

border-top-color:#000000;

border-top-style:so lid;

border-top-width:thin;

border-left-color:#00000 0;

border-left-style:solid;

border-left-width:thin;

b order-right-color:#000000;

border-right-style:solid ;

border-right-width:thin;

border-bottom-color:#0000 00;

border-bottom-style:solid;

border-bottom-width:t hin;

width: 250px;

height: 100px;

}

Esta parte es una capa (div) creada para añadir una foto o imagen. De esta parte solo explicare atributos que no hayamos visto hasta ahora.

• Border: Añade un borde lo podemos poner arriba (top), abajo (bottom), izquierda (left), o derecha (right). Ejem: border-left-style: solid.

• Border-top-color: Pondré este como ejemplo, pues os podeis imaginar como sería a la derecha o a la izquierda o abajo esto añadiría un color a ese borde

• Border-top-width: Este atributo añade el grosor del borde

• Border-top-style: Que estilo vas a usar solido (solid), punteado (dashed), etc…

• Width: Anchura de la capa (div)

• Height: No creo que haga falta ni decirlo… Bueno venga es la altura de la capa.

Por ultimo pero no por ello menos importante podemos crear clases (class) para sustituir atributos que vengan por defecto o crear nosotros mismos atributos nuevos.

a {

color:#663333;

}

Estamos creando un atributo nuevo que es “.a”, y que le hemos dado un color este atributo sustituirá a la frase “Mi nombre es Ignacio Santos y mi pagina web es http://www.webspacesite.com”, poniendo el enlace de otro color al del resto de la frase.

Esto mismo se podría haber conseguido modificando el atributo “a”, que viene por defecto en XHTML, que sirve para modificar los enlaces.

Por ultimo añadimos esto en el <head> de la página xhtmlConFormato.php.

<link href="../CSS/css.css" rel="stylesheet" type="text/css" />

Ver ejemplo en funcionamiento.

Ver archivo css

Autor: Ignacio Santos

Artículo escrito para: http://www.webspacesite.com