Glidea Guia Basica Css 140214061433 Phpapp02

Guia- BASICA
CSS
Realizacin
Glidea Agencia Web
www.glidea.com.ar
https://www.facebook.com/agencia.glidea
Glidea. Todos los derechos reservados. Gua de distribucin gratuita. Prohibida su venta.
GUIA BASICA de CSS
www.glidea.com.ar/blog
Acerca de esta gua

Te doy la bienvenida al extraordinario mundo del CSS.
Con esta gua pretendo ayudarte en las cuestiones bsicas sobre este tema y
darte el envin inicial necesario para que luego puedas seguir aprendiendo
por tu cuenta.
Nota: Esta gua ir evolucionando con el tiempo. Se trata de la primer versin

y me parece que an queda mucho por mejorar.
Para eso necesitar tu ayuda y pods enviarme tu opinin, comentarios o
sugerencias escribiendo a: mariano@glidea.com
Contenidos de la gua
Descubriendo el potencial del CSS

Etiquetas y elementos bsicos de HTML
Propiedades que ms utilizo en CSS
Ejemplos
Referencias
El cdigo HTML lo vers en color celeste.
<div class=menu></div>
El cdigo CSS aparecer sin embargo en color verde.

p {
color: #fff;
}
Material de descarga (de los ejemplos del final)

http://www.glidea.com.ar/sites/default/files/ejemplos-guia.zip
Glidea . Todos los derechos reservados. Gua de distribucin gratuita. Prohibida su venta.
Pgina 2
GUIA BASICA de CSS
Acerca del autor

Hola, mi nombre es Mariano y trabajo en
Glidea, una Agencia Web que ayuda a las
empresas a crecer en Internet.
Soy diseador grfico de la UBA, 31 aos,

me gusta el deporte y viajar, y he
trabajado en varios proyectos web tanto
en el diseo grfico (etapa de mockups)
como en la implementacin del mismo (maquetado, css, seo)
Si bien no me puedo considerar un experto ni un gur del CSS, debo
admitir que luego de 10 aos de experiencia, algo he aprendido sobre el
tema.
Implementar un diseo y verlo correctamente en los navegadores no es algo
para nada sencillo. Requiere tener un dominio completo de CSS, entender de
HTML y tener el ojo entrenado para poder pasar de la manera ms fiel
posible el diseo que se ve en JPG a un navegador.
Si sos diseador grfico profesional probablemente tengas ms desarrollada
esta habilidad y te ser fcil. Si no lo sos, te llevar ms tiempo y prctica. Y
no estoy hablando de disear. Simplemente pasar un diseo armado a
tecnologa web.
Cada da pienso en si no habr una forma ms rpida de implementar un
diseo en un sitio. A veces se vuelve todo muy tedioso y frustrante. Creo que
debera ser todo ms fcil.
Pgina 3
GUIA BASICA de CSS
De que te llevar tiempo y esfuerzo. Pero vale la pena dominar el arte del CSS
si vas a trabajar de esto.
Te doy la bienvenida nuevamente a esta gua y espero serte de ayuda.
Pgina 4
GUIA BASICA de CSS
Descubriendo el potencial del CSS

El CSS es algo realmente poderoso. Y una vez que logres dominarlo, sentirs
que tienes el poder. Sers capaz de implementar casi cualquier diseo en
casi cualquier navegador.
Manejar y dominar CSS te permitir:

Tener el control de la apariencia visual de un sitio web.
Implementar un diseo y hacer que se vea correctamente en los
navegadores.
Realizar cambios y adaptaciones sobre un Template existente.
Mejorar la calidad de tus trabajos.
Ganar ms dinero?
Pgina 5
GUIA BASICA de CSS
Dando los primeros pasos de beb

Para entender mejor de que se trata todo esto, es indispensable que sepas
algo de HTML bsico, necesitars aprender cules son las etiquetas
principales y en qu ocasiones se utilizan.
Luego desde el cdigo HTML vamos a llamar a un archivo .CSS que contendr
las propiedades de cada elemento que quieras estilizar.
Etiquetas y elementos bsicos de HTML

En la mayora de los sitios web te econtrars con las siguientes etiquetas
HTML. Veremos con ejemplos como se traduce cada una en el navegador.
<div></div>
De ahora en ms vers divs por todos lados. Por eso es mejor que te
familiarices cuanto antes con esta palabra. Es dificil definir un <div> pero
para m es como una caja imaginaria en donde podrs meter contenido,
separarlo y aplicarle estilos.
<a></a>
Define un link que por default el navegador lo pone en color azul y
subrayado.
<h1></h1>
Para los ttulos de la pgina. Segn la jerarqua puede haber h2, h3, h4, h5 y
hasta h6.
<ul></ul>
Es el contenedor de una lista a modo de vietas. En su interior contendr
etiquetas <li></li>.
<li></li>
Indica que el elemento pertenece a una lista.
<p></p>
Indica que se trata de un prrafo.
Pgina 6
GUIA BASICA de CSS
<img></img>
Etiqueta que permite insertar una imagen.
<table></table>
Para insertar una filas y columnas.
<tr></tr>
Define una fila dentro de la tabla
<td></td>
Define una celda dentro de una fila
Ejemplo:
Veremos ahora estas etiquetas en accin a travs del siguiente cdigo:
<div>
<img src=foto-ayuda.jpg />
<h2>Ttulo del artculo 1</h2>
<p>Prrafo de resumen sobre el contenido del artculo y los
beneficios de leerlo</p>
<ul>
<li>Beneficio 1</li>
</ul>
<a href=/articulo-completo>Leer ms</a>
</div>
En el navegador esto ser ver de la siguiente forma. Vale aclarar que no hay
ningn estilo CSS aplicado y solo se muestra como se refleja el cdigo de que
reune la mayora de las etiquetas mencionadas arriba.
Pgina 7
GUIA BASICA de CSS
A esta altura no tiene sentido seguir inundando tu cerebro con ms etiquetas

HTML. No faltar aquel que me diga pero te olvidaste poner la etiqueta
<body>, y qu hay de la etiqueta <strong>??
Es cierto que faltan muchas ms etiquetas y la idea de esta gua no es
abordarlas todas al mismo tiempo. Pero s te puedo dejar un enlace con
informacin complementaria sobre el tema (cuando veas de que se trata me
entenders mejor): http://www.w3schools.com/tags/
Pgina 8
GUIA BASICA de CSS
Las primeras palabrasbagraun, displei, aidi

A medida que vayas practicando HTML, vers que cada elemento o etiqueta
puede tener asignado un ID o una clase que luego se referenciar desde el
archivo CSS.
Cundo usar ID?

El ID se utiliza para referenciar a un elemento que ser nico en todo el sitio
web. Es muy comn usar ID para una regin de la estructura del sitio (header,
columna lateral, contenido principal, footer). Pero tambin puede utilizarse
para referenciar otros elementos que sern nicos en el sitio.
Por ejemplo:
<div id=header>
</div>
<div id=main-content>
</div>
<div id=footer>
</div>
En el cdigo CSS luego se referenciar a un ID mediante el smbolo #

Por ejemplo:
#header {
background:#000;
}
#main-content {
background:#FFF;
}
#footer {
background:#ccc;
}
Pgina 9
GUIA BASICA de CSS
Cundo usar Class?

Desde el cdigo HTML se usar class para el resto de los elementos que
compartirn los mismos estilos.
Por ejemplo:
<div class=bloque>
<p>Contenido del bloque 1</p>
</div>
<div class=bloque>
</div>
<div class=bloque>
</div>
En el cdigo CSS luego se referenciar a un class mediante un punto .

Por ejemplo
.bloque {
background: #fff;
width:250px;
}
Cmo referenciar a una etiqueta HTML desde el CSS?

Adems de usar ID y Class, podrs referenciar directamente a etiquetas
HTML para generalizar algunos estilos.
Por ejemplo para hacer que todos los links del sitio por default se vean de
color blanco, el cdigo CSS sera:
a {
color: #fff;
}
Donde a responde a la etiqueta <a></a>
Pgina 10
GUIA BASICA de CSS
Para estilizar todos los prrafos el cdigo sera

p {
font-size:12px;
}
Donde p responde a la etiqueta <p></p>
Cmo referenciar a un elemento especfico?

Supongamos que definiste un color verde para todos los links de tu sitio, pero
necesits que en el footer los mismos tengan color azul. Cmo sera el
cdigo?
a {
color: blue;
}
#footer a {
color: green;
}
Lo que hace la segunda parte del cdigo es decir que todos los links que se
encuentren en la regin del footer, tengan color verde.
Ahora si por ejemplo contamos con el siguiente cdigo:
#footer ul li a {
color: red;
}
Esto se leera de la siguiente manera: Todos los links que se encuentran

dentro de la etiqueta li que a su vez se encuentren en el footer, que tengan
un color rojo.
En este sentido se puede ser tan especfico como la estructura del cdigo
HTML te lo permita. Por eso cuanto ms jerarquizado est tu cdigo, ms
control tendrs sobre la visualizacin de cada elemento.
Pgina 11
GUIA BASICA de CSS
Las propiedades que utilizo en CSS

As como anteriormente solo di un pantallazo de las etiquetas HTML, no es la
idea tampoco mencionar todas las propiedades CSS. Pero s voy a intentar
mencionar las que ms utilizo.
Nota: Si tens conocimiento bsico de ingls la mayora de las propiedades se
deducen de su significado. Esto te ayudar a entender mejor de que trata
cada una.
Propiedades para darle estilo a la tipografa

color
Para definir el color. Si bien para algunos colores se puede definirlo mediante
la palabra white o black, tendrs que usar en la mayora de los casos el
cdigo hexadecimal (#000 para negro, #fff para blanco, etc)
En el ejemplo aplico un color rojo para los prrafos y un color celeste para los
links. Como vers se referencia a la etiqueta HTML directamente.
p {
color: #990000;
}
a {
color: #0066CC;
}
Pgina 12
GUIA BASICA de CSS
font-family
Para elegir la familia tipogrfica. Arial, Verdana, Trebuchet, Tahoma. Por lo
general utilizo entre dos y tres tipos de familias tipogrficas como mximo en
cada sitio. Para lo que es prrafo me concentro de que la tipografa tenga
buen legibilidad entonces tambin trato de elegir un tamao adecuado segn
cada tipografa
H2 {
font-family: Arial;
}
.texto {
font-family: Verdana;
}
Nota: Con la llegada de Google Web Fonts, se hizo ms sencillo poder incluir
tipografas diferentes a las clsicas permitidas en la Web. Si vas a usar este
servicio te recomiendo elegir con cuidado la tipografa especial y a lo sumo
usar mximo dos para no empezar a afectar la performance del sitio.
http://www.google.com/fonts
font-size
Define el tamao de la tipografa. Por lo general lo fijo en pixeles pero
tambin se puede hacer por porcentaje.
H2 {
font-size: 16px;
}
.texto {
font-size: 12px;
}
Pgina 13
GUIA BASICA de CSS
font-weight
Texto normal o en negrita. Por default es normal salvo en la etiqueta de los
headings <h1>, <h2>. Con esta propiedad podrs darle peso a la tipografa y
enfatizar lo que necesites.
p {
font-weight: normal;
}
H3 {
font-weight: bold;
}
line-height
Define el espacio entre cada lnea de texto. Esto se aprecia especialmente en
un prrafo. La medida puede ser expresada en pixeles o en porcentajes.
p {
line-height: 120%;
}
p {
Pgina 14
GUIA BASICA de CSS
line-height:150%;
}
text-decoration
Especialmente la utilizo para agregar un quitar un subrayado en los links.
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
text-transform
La uso cuando quiero poner un texto en mayscula. Algunos ttulos de
bloques pueden quedar muy bien con este estilo si se le da el tamao
adecuado.
h2 {
Pgina 15
GUIA BASICA de CSS
text-transform: normal;
}
h2 {
text-transform: uppercase;
}
Nota: Recordar que cuando se usa la misma propiedad para el mismo

elemento, el cdigo tomar como vlido solo la que aparece al final.
Con esto quiero decir que si en tu archivo CSS escribs el mismo cdigo de
arriba, vers los ttulos <h2> en mayscula.
Pgina 16
GUIA BASICA de CSS
Propiedades de espaciado y tamao

margin
Define el espacio o separacin entre dos cajas o bloques de contenido. Es un
espacio que funciona hacia afuera del <div>
<div class=bloque></div>
.bloque {
margin-right: 20px
width: 200px;
}
Nota: Para este ejemplo agregu solamente un margen a la derecha de la

caja para mostrar cmo se produce el espaciado. Repasemos el resto de las
posibilidades:
margin-top (agrega un espacio en la parte superior de la caja)

margin-bottom (agrega un espacio en la parte inferior de la caja)
margin-left (agrega un espacio en el lado izquierdo de la caja)
margin-right (agrega un espacio en el lado derecho de la caja)
Pgina 17
GUIA BASICA de CSS
Si quers agregar un margen nico igual para todos los lados, no es necesario
que agregues cada propiedad una debajo de la otra. Pods escribir el
siguiente cdigo:
.bloque {
margin: 20px;
}
Esto agrega un margen de 20px para cada lado y es lo mismo que si se

escribiera lo siguiente:
.bloque {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
Siempre que puedas simplific y escrib la menor cantidad de cdigo posible.

Lo ltimo y ya termino con la propiedad margin. Supongamos que
necesits que el que el margen superior e inferior sea de 10px pero que el
margen izquierdo y derecho sea de 20px. Cmo se escribe eso?
.bloque {
margin: 10px 20px;
}
En la imagen a continuacin muestro cmo se produce el margin mencionado

arriba. Como vers, los mrgenes no se suman y en el medio de las dos cajas
el espacio resultante es de 20px en lugar de 40px.
Pgina 18
GUIA BASICA de CSS
padding
Permite definir un espacio hacia adentro de la caja o bloque de contenido.
<div class=bloque>
<p>Prrafo de texto. Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque.
<p>
</div>
.bloque {
Pgina 19
GUIA BASICA de CSS
padding: 20px
width: 200px;
}
Esta propiedad es realmente til y se usa bastante junto con la propiedad

margin para definir espaciados tanto hacia adentro como hacia afuera.
La complejidad adicional que le encuentro al padding es que cuando fijs un
ancho de por ejemplo 200px y le agregs un padding a ambos lados de 20px,
el ancho resultante de la caja terminar siendo de 240px (suma 20px de cada
lado)
Para solucionar esto lo que suelo hacer desde el cdigo HTML es agregar un
div intermedio entre el contenedor general y el contenido, y luego a ese
<div> le agrego una clase con el padding.
<div class=bloque>
<div class=inner>
<p>Prrafo de texto. Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque.
<p>
</div>
</div>
Pgina 20
GUIA BASICA de CSS
.bloque {
width: 200px;
}
.bloque .inner {
padding: 20px;
}
De esta manera por un lado logrs el espaciado interno que necesits y por el
otro mantens el ancho final de la caja a 200px.
width
Define el ancho de una caja o bloque de contenido. El valor puede estar
expresado en pixeles o en porcentaje.
.bloque {
width: 200px;
}
La propiedad width se utiliza bastante especialmente para definir la

estructura del sitio y la visualizacin. Has odo hablar de ancho fijo o ancho
fludo por ejemplo?
Con la llegada de los dispositivos mviles cada vez se le presta ms atencin a
que el diseo se adapte al formato de la pantalla. En este sentido es comn
trabajar bastante con porcentajes en lugar de fijar los anchos en pixeles.
En lo personal soy partidario de tratar de no usar un ancho fijo en pixeles
salvo algunos para algunos bloques o regiones particulares.
Por ejemplo
<div id=sidebar>
</div>
Pgina 21
GUIA BASICA de CSS
Si fijamos el ancho del sidebar (columna lateral), luego no es necesario

andar fijando el ancho de cada bloque que se encuentra adentro (y menos en
pixeles) y si hay alguna distancia que cumplir se le puede agregar un margin a
dichos bloques.
height
Define el alto de una caja o bloque de contenido. El valor puede estar
expresado en pixeles o en porcentaje.
.bloque {
height: 100%;
}
Por lo general no se fija un alto en pixeles ya que suele condicionar una

futura actualizacin en los contenidos. Puede haber algunas zonas que si
presenten un alto en porcentaje pero en pixeles solo se da para algunos
casos. Al menos en mi experiencia.
Lo que si a veces pods utilizar y recomiendo es la propiedad min-height
que define un alto mnimo y si el da de maana hay ms contenido, la caja
de desplazar hacia abajo.
Pgina 22
GUIA BASICA de CSS
Como observars en la imagen si fijamos un height en pixeles tomamos un

riesgo de que si el contenido excede el alto, no sea vea correctamente.
Propiedades para estilizar un bloque

background
Para definir un fondo. Puede ser un color slido, un degrad, para definir
botones a modo de conos, etc. Esta propiedad es importante que aprendas a
dominarla en toda su dimensin.
Para usar un color de fondo slido es lo ms sencillo y sera algo como lo
siguiente:
.bloque {
background: #990000;
}
Para usar un fondo en degrad en un men principal por ejemplo el cdigo

podra ser algo como lo siguiente:
<div id=menu-principal>
</div>
Pgina 23
GUIA BASICA de CSS
#menu-principal {
background: url(images/bg.jpg) repeat-x top left;
}
Esto significa que para el fondo utilice una imagen que se encuentra en la
ruta especificada, luego repita la imagen en el eje x y la posicione arriba a la
izquierda.
Se utiliza mucho este recurso para hacer un men principal y tambin para
los botones.
border
Para hacer un borde en la caja o bloque de contenido. Puede ser en toda la
caja o sobre algn lateral (border-right, border-bottom,etc)
.bloque {
background: #ccc;
border-bottom: 2px solid #000;
}
Pgina 24
GUIA BASICA de CSS
Adems del estilo slido se le puede dar un estilo a la lnea en forma de

puntos o guiones (dotted y dashed respectivamente).
La propiedad border la necesitars especialmente cuando quieras delimitar
por ejemplo un listado de artculos usando una lnea fina entre cada uno.
Tambin cuando quieras aplicar un borde a toda una caja o bloque para darle
una cierta sutileza a tu diseo.
Propiedades de ubicacin de un bloque

float
La utilizo cuando quiero hacer que un elemento se posicione por ejemplo a la
izquierda y est rodeado por otro elemento a su derecha. Suele ser ms
comn utilizar float: left especialmente para casos como el siguiente:
<div class=bloque>
<img src=/foto.jpg />
<p> Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium</p>
</div>
Pgina 25
GUIA BASICA de CSS
img {
float: left;
margin-right: 20px;
}
Si no estuviera la propiedad float:left asignada a la imagen, el texto se vera

directamente debajo de la foto. Cuando en un footer ves tambin un bloque
al lado del otro con diferente informacin, probablemente cada bloque tenga
asignada la propiedad float:left;
position
Lo ms comn es utilizar relative como valor por default, pero hay ocasiones
en donde necesitamos posicionar un elemento de forma absoluta para lograr
ubicarlo donde queremos. En ese caso dejamos position:absolute.
Finalmente otro valor usado es el de fixed. Muy comn verlo hoy en da al
ingresar a leer un artculo de blog en donde los conos de social media te
siguen a medida que vas haciendo scroll hacia abajo.
Tambin hay sitios en donde utilizan fixed para fijar una barra de
navegacin superior y mantenerla siempre visible.
text-align
Para determinar la ubicacin de un texto. Por default el texto se alinea a la
izquierda, pero hay veces en donde se requiere alinearlo al centro (como
pasa en la informacin del copy que aparece en el footer de muchos sitios)
Pgina 26
GUIA BASICA de CSS
Hojita resumen de las propiedades CSS

A continuacin te dejo una tablita con las propiedades vistas arriba para que
puedas imprimirla y tenerlas a mano.
Pgina 27
GUIA BASICA de CSS
Ejemplos
La prctica hace al maestro. Si bien en esta gua doy algunos pocos ejemplos
(solo 3), lo importante es que puedas practicar por tu cuenta y empezar a
experimentar un rato. Una buena idea sera descargarte templates gratuitos
en CSS para ver cmo est conformado el cdigo y aprender desde all.
Record que pods descargarte los ejemplos desde:

www.glidea.com.ar/sites/default/files/ejemplos-guia.zip
Pgina 28
GUIA BASICA de CSS
Ejemplo 1 Men Principal

El men principal se encuentra por lo general en el rea del encabezado de
todo sitio Web. Se mantiene visible en todas las pginas dado que contiene
los links a las secciones principales del sitio.
Ms all de los colores y los estilos particulares que se pueden aplicar a cada
men, suele haber una base en el cdigo CSS que se repite. Por ejemplo el
hecho de hacer que cada item del men se vea uno al lado del otro.
Antes (solo HTML)

El cdigo bsico para un men en HTML puede ser algo como lo siguiente:
<div id="menu-principal">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/quienes-somos">Quienes Somos</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</div>
RESULTADO PARCIAL
Pgina 29
GUIA BASICA de CSS
Por default el navegador le agrega una vieta a cada elemento <li> del cdigo
HTML y tambin le agrega un color y un subrayado a cada link definido con la
etiqueta <a>
Al momento de estilizar, la idea ser entonces remover estos estilos definidos
por default para aplicar el diseo correspondiente.
Despus (HTML con CSS)
RESULTADO FINAL
Vemos ahora la gran diferencia que hay en el diseo luego de aplicar los
estilos correspondientes. Este estilo de barra de navegacin puede verse hoy
en da en una gran cantidad de sitios en donde los ajustes estarn en los
colores, tipografa, espaciados, etc.
El ejemplo te servir para tener una base con la cual puedas empezar a
trabajar.
Ahora vamos a ver el cdigo CSS utilizado para que la barra de men haya
quedado de esa forma:
Paso 1: Barra general - #menu-principal
En funcin del HTML, llamamos al contenedor general con ID=menuprincipal
#menu-principal {
background: #000;
width: 960px;
margin:auto;
font-family: Arial;
font-size:12px;
}
Pgina 30
GUIA BASICA de CSS
Le aplicamos un fondo de color negro a toda la barra, un ancho en pxeles, y

definimos un margin auto que centrar la barra en el navegador.
Nota: Defin una tipografa y un tamao para todo el men, pero esto puede
hacerse a nivel general para todo el sitio. Por ejemplo en el archivo CSS
pods definirlo as:
body {
font-family: Arial;
font-size: 12px;
}
Paso 2: Llamada al elemento li - #menu-principal ul li

#menu-principal ul li {
float:left;
list-style-type:none;
list-style-image:none;
}
El elemento li se utiliza por lo general para definir listas dentro de un prrafo.

Por default el navegador le agrega vietas a cada elemento y lo muestra uno
debajo del otro.
Por eso en el cdigo CSS lo que buscamos es por un lado quitarle las viteas
con la propiedad list-style-image y list-style-type.
Finalmente y lo ms importante hacer que un elemento se muestre al lado
del otro con la propiedad float. Si quitramos esta propiedad del cdigo, el
men se vera de la siguiente forma:
Pgina 31
GUIA BASICA de CSS
Paso 3: Llamada al link - #menu-principal ul li a

#menu-principal ul li a{
display:block;
padding: 15px 30px;
text-decoration:none;
color:#efefef;
border-right:solid 1px #333;
}
#menu-principal ul li a:hover{
background: #059BD8;
}
Para acceder desde el men a una seccin principal del sitio, es necesario
definir los links de acceso en el cdigo HTML con la etiqueta <a>
Luego desde el CSS vamos a referenciar y llamar a esta etiqueta para poder
aplicarle los estilos correspondientes.
La propiedad display block la suelo utilizar en los links de un men para hacer
que cada uno ocupe una caja o espacio y desde all poder trabajar luego
con el padding y las distancias.
Si por ejemplo solo quitara la propiedad display de todo el cdigo del CSS. El
men se vera de la siguiente manera (ms all de que tenga seteado un
padding):
Otra propiedad aplicada para los estilos es la de border-right en donde se le

aplica un ligero borde de color gris a la derecha de cada elemento. Tambin
se removi el subrayado que viene por default como as tambin se le aplic
un color blanco a los enlaces.
Finalmente se utiliza la propiedad :hover para hacer que el fondo del botn
cambie de color cuando se pasa el mouse por encima. En la imagen
Resultado Final se puede ver arriba ese efecto.
Pgina 32
GUIA BASICA de CSS
Ejemplo 2 Bloque de un columna

En un blog o en un sitio web institucional es comn ver bloques con
determinados estilos ubicados en las columnas laterales del sitio, dentro del
contenido y en el footer.
Por lo general la estructura de estos bloques se compone de un ttulo y de un
contenido que puede ser un listado de los ltimos artculos, novedades,
informacin de contacto, etc.
Antes (solo HTML)

El cdigo bsico para un bloque con informacin institucional podra ser algo
como lo siguiente:
<div class="bloque">
<div class="bloque-inner">
<h2>Ttulo del bloque</h2>
<div class="contenido">
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium.</p>
<a href="/">Ver ms</a>
</div>
</div>
</div>
RESULTADO PARCIAL
Pgina 33
GUIA BASICA de CSS
RESULTADO FINAL
Qu se hizo para llegar a este diseo?

Vamos a ver el cdigo CSS utilizado para que el bloque haya quedado tan
lindo:
Paso 1: Bloque general - .bloque
En funcin del HTML, llamamos al contenedor general con clase=bloque
.bloque {
background: #efefef;
border:solid 1px #ccc;
font-family: Arial;
font-size: 12px;
width: 250px;
}
Como en el ejemplo anterior del men, aplicamos una tipografa y un tamao

determinado para el bloque, pero esto no es necesario hacerlo si ya est
definido anteriormente a nivel general.
Luego si fijamos un ancho, aplicamos un background y finalmente un borde
Paso 2: Llamamos al ttulo - .bloque h2
Ahora lleg el momento de estilizar el ttulo de este bloque
Pgina 34
GUIA BASICA de CSS
.bloque h2{
background: #059BD8;
color: #fff;
font-size: 14px;
margin:0px;
padding:10px 15px;
text-transform: uppercase;
}
Recordamos que la propiedad text-transform en este caso est haciendo que

el ttulo se vea todo en mayscula. Luego aplicamos un padding para generar
el espaciado apropiado y finalmente definimos algunos colores para el fondo
y el color de la tipografa.
Paso 3: Llamamos al contenido del bloque - .bloque .contenido
Luego del ttulo vamos a ajustar el diseo del contenido del bloque.
.bloque .contenido {
color: #666;
line-height:150%;
}
.bloque .contenido a{
color: #000;
}
Principalmente ac estamos modificando el color de la fuente como as

tambin el espaciado entre lneas con la propiedad line-height.
Finalmente hacemos un ajuste en el color del link y lo pasamos a color negro.
Por default va a aparecer subrayado como se ve arriba en la imagen de
Resultado Final
Pgina 35
GUIA BASICA de CSS
Ejemplo 3 Listado de artculos

En un blog es comn ver un listado de artculos uno debajo del otro. Ahora
bien, es necesario aplicar varios estilos para llegar a un resultado mas o
menos pasable.
Antes (solo HTML)

El cdigo bsico para un men en HTML puede ser algo como lo siguiente:
<div class="resumen">
<img src=foto-listado.jpg />
</div>
<div class="resumen">
<img src=foto-listado.jpg />
</div>
RESULTADO PARCIAL
Pgina 36
GUIA BASICA de CSS
Por default contamos con determinada tipografa, color de links, espaciados,

etc. Ahora vamos a tocar un poco el CSS para mejorar la presentacin de
estos contenidos
RESULTADO FINAL
Pgina 37
GUIA BASICA de CSS
Vemos ahora la gran diferencia que hay en el diseo luego de aplicar los
estilos correspondientes. No solo este tipo de diseos se puede observar en
un blog, sino que en un sitio institucional que presenta noticias, en un diario,
etc.
Ahora vamos a ver el cdigo CSS utilizado para que el listado haya quedado
de esa forma:
Paso 1: Contenedor de la noticia
En funcin del HTML, llamamos al contenedor general con class=resumen
.resumen {
background: #efefef;
border:solid 1px #ccc;
font-family: Arial;
font-size: 12px;
width: 550px;
overflow:hidden;
margin-bottom:20px;
Pgina 38
GUIA BASICA de CSS
padding:5px;
}
Aplicamos propiedades bsicas como un fondo, un borde, algunos seteos

para la tipografa, ancho y algunos espaciados.
Paso 2: Alineacin de la imagen a la izquierda del contenido
Esta es una aplicacin tpica que se realiza con la propiedad float.
img {
float:left;
margin-right:20px;
}
La imagen de esta manera permanece a la izquierda y el texto sube para ir

a la derecha.
Paso 3: Estilos de los textos
Finalmente se le puede ajustar el estilo a los textos. En este caso solo
modifico el color del ttulo:
h2 {
color:#990000;
}
Pgina 39
GUIA BASICA de CSS
Herramientas y recursos
A continuacin listo una serie de herramientas y recursos para que empieces
a complementar la informacin.
Para estilizar utilizo como base cualquiera de estos dos navegadores
- Firefox + Firebug (es un plugin)
- Chrome + Inspect Element (aparece con la tecla F12)
Para la parte de cdigo (HTML y CSS) utilizo un editor de notas
- Notepadd ++
Plantillas gratis para descargar y practicar
http://www.freecsstemplates.org/
Para validar tu cdigo CSS y ver que no contenga errores
http://jigsaw.w3.org/css-validator/
Listado ms completo de las propiedades CSS
http://htmldog.com/reference/cssproperties/
Pgina 40
GUIA BASICA de CSS
Llegando al final
Estamos terminando esta gua bsica de CSS. Te he enseado una nocin
muy bsica sobre el tema y ahora es momento de seguir aprendiendo.
Si crees que esta gua sirvi de algo, pods hacer lo siguiente. Te estar
enormemente agradecido:
1. Recomendarla a algn amigo o conocido

2. Dejar un link en tu sitio o blog referencindola
www.glidea.com.ar/blog/guia-basica-de-css
3. Hacerte fan en la pgina de Glidea
4. Visitar cada tanto nuestro sitio web y blog
5. Enviarme algn comentario a mi email: mariano@glidea.com
Gracias!
Pgina 41

Glidea Guia Basica Css 140214061433 Phpapp02

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Glidea Guia Basica Css 140214061433 Phpapp02

Cargado por

Copyright:

Formatos disponibles

Guia- BASICA

GUIA BASICA de CSS

Acerca de esta gua

Nota: Esta gua ir evolucionando con el tiempo. Se trata de la primer versin

Descubriendo el potencial del CSS

El cdigo CSS aparecer sin embargo en color verde.

Material de descarga (de los ejemplos del final)

GUIA BASICA de CSS

Acerca del autor

Soy diseador grfico de la UBA, 31 aos,

GUIA BASICA de CSS

GUIA BASICA de CSS

Descubriendo el potencial del CSS

Manejar y dominar CSS te permitir:

GUIA BASICA de CSS

Dando los primeros pasos de beb

Etiquetas y elementos bsicos de HTML

GUIA BASICA de CSS

GUIA BASICA de CSS

A esta altura no tiene sentido seguir inundando tu cerebro con ms etiquetas

GUIA BASICA de CSS

Las primeras palabrasbagraun, displei, aidi

Cundo usar ID?

En el cdigo CSS luego se referenciar a un ID mediante el smbolo #

GUIA BASICA de CSS

Cundo usar Class?

En el cdigo CSS luego se referenciar a un class mediante un punto .

Cmo referenciar a una etiqueta HTML desde el CSS?

Donde a responde a la etiqueta <a></a>

GUIA BASICA de CSS

Para estilizar todos los prrafos el cdigo sera

Donde p responde a la etiqueta <p></p>

Cmo referenciar a un elemento especfico?

Esto se leera de la siguiente manera: Todos los links que se encuentran

GUIA BASICA de CSS

Las propiedades que utilizo en CSS

Propiedades para darle estilo a la tipografa

GUIA BASICA de CSS

GUIA BASICA de CSS

GUIA BASICA de CSS

GUIA BASICA de CSS

Nota: Recordar que cuando se usa la misma propiedad para el mismo

GUIA BASICA de CSS

Propiedades de espaciado y tamao

Nota: Para este ejemplo agregu solamente un margen a la derecha de la

margin-top (agrega un espacio en la parte superior de la caja)

GUIA BASICA de CSS

Esto agrega un margen de 20px para cada lado y es lo mismo que si se

Siempre que puedas simplific y escrib la menor cantidad de cdigo posible.

En la imagen a continuacin muestro cmo se produce el margin mencionado

GUIA BASICA de CSS

GUIA BASICA de CSS

Esta propiedad es realmente til y se usa bastante junto con la propiedad

GUIA BASICA de CSS

La propiedad width se utiliza bastante especialmente para definir la

GUIA BASICA de CSS

Si fijamos el ancho del sidebar (columna lateral), luego no es necesario

Por lo general no se fija un alto en pixeles ya que suele condicionar una

GUIA BASICA de CSS

Como observars en la imagen si fijamos un height en pixeles tomamos un

Propiedades para estilizar un bloque

Para usar un fondo en degrad en un men principal por ejemplo el cdigo

GUIA BASICA de CSS

GUIA BASICA de CSS