Hojas de estilos CSS

Contenido
Uso de Capas ................................................................................................................................ 2 Diferencia entre Id y Clases....................................................................................................... 3 Uso del SPAN ............................................................................................................................ 3 Tags definidos y creados ........................................................................................................... 3 CSS Resets ............................................................................................................................... 4 Capa Wrapper............................................................................................................................ 4 Box Model(caja modelo) ............................................................................................................ 4 Border:.................................................................................................................................... 5 Margin: ................................................................................................................................... 5 Padding: ................................................................................................................................. 5 Ejemplo Margin: ..................................................................................................................... 7 Ejemplo de Padding: .............................................................................................................. 9 PRACTICA DE EJEMPLO................................................................................................ 12 Maquetacion Web: Planeacion .................................................................................................... 12 Qu es la maquetacin? ........................................................................................................ 12 MiniProyecto ............................................................................................................................ 12 Cabecera: ............................................................................................................................. 12 Contenido: ............................................................................................................................ 12 Barra lateral: ......................................................................................................................... 12 Pie de Pgina: ...................................................................................................................... 12 Ubicacin de los Archivos .................................................................................................... 13 Creando el Codigo ................................................................................................................... 13 WRAPPER ........................................................................................................................... 14 CABEZERA .......................................................................................................................... 15 CONTENIDO ........................................................................................................................ 15 BARRA LATERAL ................................................................................................................ 16 PIE DE PGINA ................................................................................................................... 16

Conceptos Iniciales

Pgina 1

Hojas de estilos CSS

Conceptos Bsicos sobre CSS

Ahora revisaremos algunos conceptos importantes sobre el lenguaje CSS, no son todos, pero por lo menos los ms importantes.

Uso de Capas
Antes de la llegada de CSS, los diseadores web tenan la necesidad de usar tablas para poder estructurar el contenido de una web, ahora con CSS todo se maneja en base a capas, divs o Layouts (en ingls), que por medio de cdigo CSS se les da tamao, se les fija su posicin, se les agrega color de fondo, color de borde, entre otras cosas. Parte de esto es lo que se ha venido trabajando en las prcticas anteriores. Al final de estas prcticas debe crear su curriculum como proyecto para poder aplicar cada uno de los conceptos ac descritos. Las maneras de declarar una capa, son por medio de las siguientes formas: <div id = nombre> <div class = nombre> Y una especial llamada span: <span class = nombre> En el archivo CSS, dependiendo si usamos id o class para declarar el nombre de la capa ser la forma en como lo llamaremos en el CSS. Por ejemplo si usamos el siguiente cdigo: <div id = cabezera> </div> En el archivo CSS lo llamaremos de la siguiente forma: #cabezera { } Como se pudo observar, para llamar a la capa, se utiliz el smbolo de numero [#] y el nombre procedido por corchetes que se abren y cierran. Ahora, si usamos un class, como en el ejemplo: <div class = cabezera> </div> La llamada en CSS seria de la siguiente manera: .cabezera { } En este caso se us un punto [.], para llamar a la capa.

Conceptos Iniciales

Pgina 2

Hojas de estilos CSS

Diferencia entre Id y Clases.
Hasta el momento todo bien, pero, cul es la diferencia entre usar uno y el otro? Muchas veces, esto se vuelve un poco complicado de entender cuando se esta en el nivel de aprendizaje, as que se tratara de explicar esto de manera sencilla y concisa. La diferencia radica en que, si declaramos una capa y se le asign un nombre por medio de un id, el nombre utilizado ya no se podr volver a utilizar en el resto del documento actual. En cambio con class, ese mismo nombre podr ser utilizado las veces que sea neceara en todo el documento, claro est, usando el class con el mismo nombre.

Uso del SPAN

El tag SPAN sirve para marcar bloques de texto. Un bloque span, puede colocarse dentro de otro bloque SPAN. Su implementacin es de la siguiente forma: <span class = nombre> </span> Como se observa, esta vez se usa span en lugar de div y el nombre se declara con un class, lo que significa que se puede usar varias veces en todo el documento actual.

Tags definidos y creados

En HTML tenemos Tags definidos por HTML, los cuales ya tiene un estilo predefinido, por ejemplo: h1, h2, h3, p, body, entre otros. Pero con la potencia de CSS, podemos resetear y modificar los valores de estos Tags, lo cual es muy fcil de hacer, por ejemplo, para modificar los valores de h1, seria de la siguiente forma: h1{ } O del mismo body: body{ } Y as podramos modificar todos los que queramos de acuerdo a nuestras necesidades.

Conceptos Iniciales

Pgina 3

Hojas de estilos CSS

CSS Resets
Esta es una tcnica para tener mayor control sobre los estilos ya definidos por los navegadores. Consiste en eliminar todos los estilos y dejar toda una hoja de estilos en blanco, para posteriormente empezar a definirlas por medio de CSS propio. Ejercicio Buscar ms informacin sobre este tema, en Google y enviarla al correo en formato PDF.

Capa Wrapper
Por ltimo, tenemos la capa Wrapper, el cual viene a ser una capa estndar que se implementa en el diseo de una pgina web y sirve para poder definir el tamao total que tendr la misma, al mismo tiempo que se le pueden asignar propiedades que tendr la pgina en general, como la posibilidad de centrar todo el contenido de la pgina, no importando el tamao de la pantalla donde se est representando la pgina web. Como ya se hace mencin, este viene siendo un estndar entre los diseadores para poder tener un mejor entendimiento del cdigo, en caso de que alguien ms vea tu cdigo CSS.

Estos son algunos conceptos y cosas que se debe saber sobre CSS, en un nivel principiante, lo dems se aprende con la prctica y leyendo la infinidad de artculos que existen en internet.

Box Model(caja modelo)

Tiene como objetivo describir el uso de las propiedades: Margin, Padding y Border. El siguiente diagrama muestra la ubicacin de cada una de estas propiedades con sus respectivas simbologas, por as llamarlo.

Conceptos Iniciales

Pgina 4

Hojas de estilos CSS

El Margin, Padding y Border pueden ser desglosadas en: top, right, bottom, left, donde: Top: Es la parte de arriba del cuadro. Right: La parte derecha de cuadro. Bottom: Es la parte de abajo del cuadro. Left: Es la parte izquierda del cuadro. A continuacin se definir cada una de las propiedades antes mencionadas:

Border:
Border es el contorno (borde) que rodea al rectngulo segn sea su tamao, dado por width y height, en la imagen superior est representado por la lnea gruesa color negro.

Margin:
Dado el borde, el Margin representa o crea un espacio que empieza desde el borde del cuadro hacia afuera, donde el espacio est dado por el valor que se le de a esta propiedad, en la imagen superior el Margin est dado por la lnea gruesa punteada color negro.

Padding:
El padding vendra siendo lo mismo que el Margin, solo que ahora el espacio creado por esta propiedad va hacia el interior del cuadro, en la imagen superior el Padding est dado por la lnea gris delgada y punteada. Ejemplo de Border. 1. realizaremos un ejemplo para comprender mejor esta propiedad. Para nuestro ejemplo se creara un documento HTML y un documento CSS. Para ligar el documento HTML a la hoja de estilos CSS, se introduce el siguiente cdigo: <link rel="stylesheet" href="style.css" type="text/css" /> Donde style.css puede variar dependiendo del nombre del archivo CSS, adems este cdigo debe de ir entre las etiquetas <head> este tema ya se ha trabajado enlazando una hoja de estilos al documento CSS. Lo siguiente es crear un div o capa en el HTML y posteriormente agregarle algunas propiedades. Creacin de capa ej-border en HTML: <div id = ej-border></div> Ahora procedemos con el CSS, en el archivo style.css, o como le halla llamado se pondr el siguiente cdigo: #ej-border{ width: 300px;height: 300px;background: #bcf9fe; } Primero le dimos un tamao fijo y un color de fondo a la capa, ya que de lo contrario sin estas propiedades no podramos visualizar la capa. Dnde: Conceptos Iniciales Pgina 5

Hojas de estilos CSS

Width: Es el ancho que la capa tendr. Height: Es la altura que tendr la capa, aunque este valor se puede omitir si queremos que vaya creciendo conforme al contenido que se introduzca dentro de ella. Background: El color de fondo que se le asignara a la capa, el color por default es el color blanco. Ahora se proceder a agregarle la propiedad Border y ver cmo funciona. Esta propiedad permite poner un color al borde de la capa, ya que por inicialmente la capa no tiene esta propiedad visible, y con esta propiedad podemos definir el tipo de borde, el color y el ancho del mismo. Los parmetros son: Boder: 5px solid #000000;; Dnde: 1. El primer parmetro es el ancho que tendr el borde, en este caso son 5px (pixeles). 2. El segundo parmetro es el tipo de borde, en este caso es slido, o sea una simple lnea, pero se pueden usar los siguientes tipos: Dotted: Dashed: Groove: existen otros ms 3. El tercer parmetro es el color que va a tener dicho borde, para declarar un color se pone el signo de nmero (#) y posteriormente el color en formato hexadecimal. Con las propiedades completas tendramos algo como esto: #ej-border{width: 300px; height: 300px;background: #bcf9fe;border: 5px solid #000000; } Resultado:

Conceptos Iniciales

Pgina 6

Hojas de estilos CSS

Ejemplo Margin:
Como ya se mencion anteriormente el Margin permite crear un espacio alrededor de la capa, la cual ser de color invisible y empieza a partir del borde. Para usar margin se usa el siguiente cdigo, de forma general: Margin: 5px 5px 5px 5px; Donde cada uno de los valores representa cada lado del cuadro y estn ordenados de la siguiente forma: Margin: Arriba, derecha, abajo, izquierda;

Y si no se quiere agregar esta propiedad a unos de los lados, solo se deja en cero. Por ejemplo, no se aplicara la propiedad a la parte de debajo de la capa: Margin: 5px 5px 0 5px; Se dej en cero el tercer valor, ya que el tercer valor representa la parte de debajo (down) de la capa. A continuacin se tienen las siguientes capas:

Se han declarado tres capas: ej-mar, ej2-mar, ej3-mar, Con las siguientes propiedades: float: left;width: 300px;height: 300px;background: #FF6633;border: 5px solid #000000; Como observaran a este cdigo se le agrego float, el cual permite alinear a cierto lado la capa, en este caso a todas las capas se alinearon a la izquierda usando left, para que se pusieran una tras otra, ya que de los contrario se alinearan una debajo de la otra:

Conceptos Iniciales

Pgina 7

Hojas de estilos CSS

A esta propiedad float se le pueden agregar los siguientes valores: Left: Alineacin a la izquierda Right: Alineacin a la derecha.

Ahora agregaremos la propiedad Margin a la capa que se encuentra en medio de las tres, la de color azul cielo: Margin: 50px 0 0 0; Se le agrego 50px (pixeles) a la parte de arriba (Top) y los dems lados se dejaron en cero, como observaran la capa se ha separado 50px del bode del documento HTML.

Ahora se han usaran los siguientes valores: Margin: 50px 0 0 15px; La capa se ha separado 15px de la otra capa que tiene a la izquierda.

Bsicamente as es cmo funciona Margin, y lo dems depende de cmo quiera tener ordenada Sus capas. Adicionalmente se puede usar el Margin por cada lado: Margin-top: arriba de la capa. Margin-right: derecho de la capa. Margin-down: debajo de la capa. Margin-left: izquierda de la capa. Pgina 8

Conceptos Iniciales

Hojas de estilos CSS

Ejemplo de Padding:
En este caso se usaran la capa ej-pad con los siguientes valores: #ej-pad{ width: 300px;height: 300px;background: #FF6633;border: 5px solid #000000; } Posteriormente se le agrego texto aleatorio a la capa y queda del siguiente modo:

Como se observa, el texto est pegado al borde del cuadro y muchas veces eso no es bueno, as que es conveniente aplicar esta propiedad llamada Padding. La forma de uso es la misma que la de la propiedad Margin: Padding: 5px 5px 5px 5px; Donde cada uno de los valores representa cada lado del cuadro y estn ordenados de la siguiente forma: Padding: Arriba, derecha, abajo, izquierda; Ahora, se le agregara esta propiedad a lado izquierdo (left) y de arriba (top) de la capa. Padding: 15px 0 0 15px; Y as el texto se separara del borde de la capa 15px:

Conceptos Iniciales

Pgina 9

Hojas de estilos CSS

Si tuviramos ms texto, de tal forma que abarcara toda la capa, por ejemplo:

Solo faltara agregar la propiedad Padding a la parte de abajo (down) y a la parte de la derecha (right), de la siguiente forma: Padding: 15px 15px 15px 15px; Quedara de la siguiente forma:

Finalmente existe un detalle muy importante a tomar en cuenta en el tamao total que se agrega cuando se usa esta propiedad. Cuando se usa esta propiedad y se agregan valores como los siguientes: #ej-pad{width: 300px;height: 300px;background: #FF6633;border: 5px solid #000000;padding: 10px 25px 15px 20px; } Del valor total establecido con width y height se le suman los valores establecidos en padding, segn sea el caso. Por ejemplo, tenemos un ancho (width) total de 300px, pero tenemos que agregarle los valores adicionales de padding de los lados derecho (right) e izquierdo (left), donde finalmente el ancho total seria la suma de los lados entes mencionados que seran: Right: 25px. Left: 20px 25 + 20 = 45. A los 300px se le suman los 45px adicionales y obtendramos 345px de ancho total.

Conceptos Iniciales

Pgina 10

Hojas de estilos CSS

Lo mismo seria para el alto (height), se suman los lados de arriba (top) y abajo (down). Top: 10px Down: 15px. 10 + 15 = 25. Ahora el alto (height) seria de 325px totales. Esto es necesario tomarlo en cuanta cuando se necesiten valores exactos para maquetar alguna pgina web. Adicionalmente se pueden usar el Padding por cada lado: Padding-top: arriba de la capa. Padding-right: derecho de la capa. Padding-down: debajo de la capa. Padding-left: izquierda de la capa.

El objetivo de la teora y ejemplos anteriores es el mostrar los principios bsicos para el buen uso de CSS.

Conceptos Iniciales

Pgina 11

Hojas de estilos CSS

PRACTICA DE EJEMPLO
Luego deber aplicar estos elementos al curriculum que viene realizando

Maquetacion Web: Planeacion

La creacin de una pgina web es un proceso donde intervienen varios tipos de conocimientos, como son la Programacin Web y el Diseo Web. con esta prctica vamos a tocar uno de los aspectos en cuanto al diseo web que es la Maquetacin Web. En cuanto a la Maquetacin, se requiere de conocimientos de XHTML y CSS, adems de algunos conceptos extras importantes a tomar en cuenta.

Qu es la maquetacin?
Luego de que ya tenemos nuestro diseo en Photoshop o en otro medio, es tiempo de pasarlo a cdigo HTML, o sea de poner cada elemento en su lugar, tales como: Cabecera, Barra Lateral, Pie de Pgina, entre otras. Cabe mencionar que el HTML utilizado es bsico, pero en lo que se refiere a CSS si se requiere conocimientos un poco ms avanzados, ya que el cdigo CSS es lo que nos permitir poner cada elemento en su lugar dentro de la pantalla. La maquetacin no es solo ubicar los elementos en un lugar especfico y ya, si no de ubicarlo de forma estratgica para que el usuario pueda interactuar con ella de manera fcil y clara.

MiniProyecto
En esta ocasin vamos a realizar la maquetacin de una pgina web de forma bsica, con la ayuda de HTML y CSS. Pondremos y necesitamos algo bsico sobre CSS. Tomaremos en cuenta la siguiente estructura:

Cabecera:
Este elemento contiene informacin de la pgina web, tales como el logo, el lema, e informacin adicional de manera resumida.

Contenido:
Aqu se muestra el material a presentar al usuario.

Barra lateral:
En este elemento se agrupa informacin extra al usuario, tales como comentarios recientes, ltimas entradas, tambin es comn implementar anuncios publicitarios en este elemento, entre otros elementos.

Pie de Pgina:
Algunas web han optado por no utilizar este elemento, algunos solo lo utilizan para mostrar informacin sobre el creador de la web o sobre que plataforma est trabajando la pgina. Sin embargo algunas pginas web tambin lo usan para presentar informacin extra del mismo modo que en la Barra Lateral. El uso de este elemento depende del diseador y la cantidad de informacin a mostrar y su organizacin.

Conceptos Iniciales

Pgina 12

Hojas de estilos CSS

Como se observa, es la misma estructura que la de la mayora de las webs presentes en la red.

Ubicacin de los Archivos

Los archivos a utilizar son solo dos: Index.html: Aqu ira el cdigo HTML con las capas a utilizar para la web. Style.css: Cdigo CSS para ubicar cada elemento de la pgina en su lugar.

Este solo fue la planeacin

Creando el Codigo
A continuacin, vamos a realizar la maquetacin de lo que puede ser un sitio web con los elementos tradicionales, tales como: cabecera, pie de pgina, etc. Antes de empezar a construir una pagina web, la maquetacin es algo importante porque as acomodamos cada elemento en el lugar correcto, todo esto lo vamos a lograr usando dos lenguajes de programacin web, como son: CSS y HTML. utilizaremos dos archivos, que son: style.css y maquetacin.html.

Empezaremos tocando el archivo maquetacin.html, lo primero ser poner el cdigo que permitir identificar a este archivo como una pgina web, esto es el cdigo de la estructura HTML. <html> <head> <title> Mini Proyecto </title> <link rel="stylesheet" href= style.css type="text/css" media="screen" /> </head> <body> <p>Aqu pondremos el cdigo para establecer los contenedores de la pgina. </body> </html> Dentro de las etiquetas <body> y </body> declararemos los contenedores a utilizar. Nota: Los contenedores pueden llamarse tambin capas, layouts, contenedores, entre otros.

Conceptos Iniciales

Pgina 13

Hojas de estilos CSS

En nuestro caso vamos a necesitar tener 4 elementos donde organizaremos nuestra informacin de la pgina web, los cuales son: o o o o Cabecera (banner). Contenido(contenedor). Barra Lateral (sidebar). Pie de Pagina (footer).

Lo que indica que ocuparemos 4 contenedores, los cuales llevaran los mismos nombres indicados en parntesis. Nota: De ahora en adelante mientras trabajemos en este archivo todo se realizara entre las etiquetas <body> y </body>. <!-- Demas cdigo HTML--> <div id = "wrapper"> <div id = "banner"> <h1>Titulo Pgina</h1> </div> <div id = "contenedor"> Contenedor que tiene Entradas </div> <div class = "sidebar"> Sidebar </div> <div id = "footer"> Maquetacion con CSS. Creado por(escriba su nombre). </div> </div> <!--Fin de Wrapper !--> <!-- Demas cdigo HTML --> Primero ocupamos un div al que vamos a llamar wrapper el cual contendr todos los dems contenedores y que debe declararse justo despus del <body> y se debe de cerrar justo antes del tag </body>, dentro de este div ir el resto del cdigo donde declaramos los dems contenedores. Posteriormente se agregan los dems contenedores, no importando el orden como se vayan declarando. Ahora veamos el cdigo CSS para poder acomodar cada elemento en su lugar.

WRAPPER
En primer lugar vamos a dar estilo al contendor que hemos llamado Wrapper el cual es el principal y que contiene a todos los dems elementos. #wrapper{ width: 1004px; margin: 0 auto 0 auto; text-align: left; } Width: Con width estamos dndole un ancho de 1004px, en este caso el tamao de una pantalla de ese tamao y de la mayora de las pantallas. Margin: Se le da un margen al contenedor y los valores right y left se declaran como automticos, esto para centrar el div en medio de la pantalla no importando la resolucin de esta. Text-align: Con este se alinea el texto hacia la izquierda. Conceptos Iniciales Pgina 14

Hojas de estilos CSS

CABEZERA
Ahora vamos con la cabecera, que es un elemento que debe de posicionarse en la parte posterior de la pgina web. Este elemento no vamos a necesitar indicar su posicin ya que ocupa todo el ancho de la pagina. #banner{ width: 1004px; height: 100px; background: #d4fcfb; border: 1px solid #aefaf7; padding: 0 0 0 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } Width, Hight: Se le da un tamao especifico al div, con width damos un ancho de 1004px, y con height damos una altura de 100px. Background: Damos un color de fondo usando el siguiente color: #d4fcfb; Border: Se le da un borde de 1px de tipo Solido y se le asigna el color: #aefaf7. border-radius, -moz-border-radius: Se redondean las esquinas del div, esto para dar mayor presentacin. Aqu puedes encontrar ms informacin sobre Crear Esquinas Redondas con CSS.

CONTENIDO
En este espacio es donde se ubicara el contenido a mostrar, aqu vamos a indicarle al div que flote o que se alinee hacia la izquierda. #contenedor{ height: 300px; width: 723px; float: left; background: #d4fcfb; border: 1px solid #aefaf7; padding: 5px 5px 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 10px; } Float: Con este pedazo de cdigo estamos indicando que el div se alinee a la izquierda. Padding: Con la ayuda del padding dejamos un espacio entre el borde del div y el contenido dentro del div, en este caso de 5px. Margin-Top: Dejamos un espacio de 10px entre el div y algn otro elemento que se encuentre cerca de este div. El resto del cdigo ya se ha explicado en lo puntos anteriores.

Conceptos Iniciales

Pgina 15

Hojas de estilos CSS

BARRA LATERAL
Tambin llamado Sidebar, este debe ir alineado con el div que hemos llamado Contenido(contenedor), pero del lado Derecho. .sidebar { height: 300px; width: 250px; float: right; background: #5deafb; border: 1px solid #47e1f3; margin: 5px 0 5px 0px; padding: 5px 5px 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 10px; } Float: Indica la alineacin que debe de tomar el div, en este caso es del lado Derecho.

PIE DE PGINA
El pie de pagina debe de ir justo debajo del div Contenido(contendor) y del div Barra Lateral(sidebar). #footer{ width: 1004px; height:50px; float:left; clear: both; background: #afeafd; border: 1px solid #96e0f8; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 10px; } Float: Hacemos que el contendor flote hacia la izquierda. Clear: Usamos la propiedad both que evita que haya capas flotantes en cualquiera de los lados del div.

Aplicar dichos conocimientos en la elaboracin del archivo de curriculum que se encuentra realizando. Subir en su hosting y publicarlo.

Conceptos Iniciales

Pgina 16