Guía Básica de CSS

Guia- BASICA

CSS

Realización
Glidea – Agencia Web
www.glidea.com.ar
https://www.facebook.com/agencia.glidea
Glidea. Todos los derechos reservados. Guía de distribución gratuita. Prohibida su venta.

GUIA BASICA de CSS

www.glidea.com.ar/blog

Acerca de esta guía
Te doy la bienvenida al extraordinario mundo del CSS.
Con esta guía pretendo ayudarte en las cuestiones básicas sobre este tema y
darte el envión inicial necesario para que luego puedas seguir aprendiendo
por tu cuenta.

Nota: Esta guía irá evolucionando con el tiempo. Se trata de la primer versión
y me parece que aún queda mucho por mejorar.
Para eso necesitaré tu ayuda y podés enviarme tu opinión, comentarios o
sugerencias escribiendo a: mariano@glidea.com

Contenidos de la guía





Descubriendo el potencial del CSS
Etiquetas y elementos básicos de HTML
Propiedades que más utilizo en CSS
Ejemplos

Referencias
El código HTML lo verás en color celeste.
<div class=”menu”></div>

El código 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. Guía de distribución gratuita. Prohibida su venta.

Página 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 diseñador gráfico de la UBA, 31 años,
me gusta el deporte y viajar, y he
trabajado en varios proyectos web tanto
en el diseño gráfico (etapa de mockups)
como en la implementación del mismo (maquetado, css, seo)
Si bien no me puedo considerar un experto ni un “gurú” del CSS, debo
admitir que luego de 10 años de experiencia, algo he aprendido sobre el
tema.
Implementar un diseño 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 más fiel
posible el diseño que se ve en JPG a un navegador.
Si sos diseñador gráfico profesional probablemente tengas más desarrollada
esta habilidad y te será fácil. Si no lo sos, te llevará más tiempo y práctica. Y
no estoy hablando de diseñar. Simplemente pasar un diseño armado a
tecnología web.
Cada día pienso en si no habrá una forma más rápida de implementar un
diseño en un sitio. A veces se vuelve todo muy tedioso y frustrante. Creo que
debería ser todo más fácil.


Página 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 guía y espero serte de ayuda.


Página 4

GUIA BASICA de CSS


Descubriendo el potencial del CSS
El CSS es algo realmente poderoso. Y una vez que logres dominarlo, sentirás
que “tienes el poder”. Serás capaz de implementar casi cualquier diseño en
casi cualquier navegador.

Manejar y dominar CSS te permitirá:
 Tener el control de la apariencia visual de un sitio web.
 Implementar un diseño y hacer que se vea correctamente en los
navegadores.
 Realizar cambios y adaptaciones sobre un Template existente.
 Mejorar la calidad de tus trabajos.
 ¿Ganar más dinero?


Página 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 básico, necesitarás aprender cuáles son las etiquetas
principales y en qué ocasiones se utilizan.
Luego desde el código HTML vamos a llamar a un archivo .CSS que contendrá
las propiedades de cada elemento que quieras estilizar.

Etiquetas y elementos básicos de HTML
En la mayoría de los sitios web te econtrarás con las siguientes etiquetas
HTML. Veremos con ejemplos como se traduce cada una en el navegador.
<div></div>
De ahora en más verás 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 podrás 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 títulos de la página. Según la jerarquía puede haber h2, h3, h4, h5 y
hasta h6.
<ul></ul>
Es el contenedor de una lista a modo de viñetas. 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 párrafo.

Página 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 acción a través del siguiente código:
<div>
<img src=”foto-ayuda.jpg” />
<h2>Título del artículo 1</h2>
<p>Párrafo de resumen sobre el contenido del artículo y los
beneficios de leerlo</p>
<ul>
<li>Beneficio 1</li>
</ul>
<a href=”/articulo-completo”>Leer más</a>
</div>

En el navegador esto ser verá de la siguiente forma. Vale aclarar que no hay
ningún estilo CSS aplicado y solo se muestra como se refleja el código de que
reune la mayoría de las etiquetas mencionadas arriba.


Página 7

GUIA BASICA de CSS


A esta altura no tiene sentido seguir inundando tu cerebro con más 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 más etiquetas y la idea de esta guía no es
abordarlas todas al mismo tiempo. Pero sí te puedo dejar un enlace con
información complementaria sobre el tema (cuando veas de que se trata me
entenderás mejor): http://www.w3schools.com/tags/


Página 8

GUIA BASICA de CSS


Las primeras palabras…bagraun, displei, aidi
A medida que vayas practicando HTML, verás que cada elemento o etiqueta
puede tener asignado un ID o una clase que luego se referenciará desde el
archivo CSS.

¿Cuándo usar ID?
El ID se utiliza para referenciar a un elemento que será único en todo el sitio
web. Es muy común usar ID para una región de la estructura del sitio (header,
columna lateral, contenido principal, footer). Pero también puede utilizarse
para referenciar otros elementos que serán únicos en el sitio.
Por ejemplo:
<div id=”header”>
</div>
<div id=”main-content”>
</div>
<div id=”footer”>
</div>

En el código CSS luego se referenciará a un ID mediante el símbolo “#”
Por ejemplo:
#header {
background:#000;
}
#main-content {
background:#FFF;
}
#footer {
background:#ccc;
}


Página 9

GUIA BASICA de CSS


¿Cuándo usar Class?
Desde el código HTML se usará class para el resto de los elementos que
compartirán los mismos estilos.
Por ejemplo:
<div class=”bloque”>
<p>Contenido del bloque 1</p>
</div>
</div>
</div>

En el código CSS luego se referenciará a un class mediante un punto “.”
Por ejemplo
.bloque {
background: #fff;
width:250px;
}

¿Cómo referenciar a una etiqueta HTML desde el CSS?
Además de usar ID y Class, podrás 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 código CSS sería:
a {
color: #fff;
}

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


Página 10

GUIA BASICA de CSS


Para estilizar todos los párrafos el código sería
p {
font-size:12px;
}

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

¿Cómo referenciar a un elemento específico?
Supongamos que definiste un color verde para todos los links de tu sitio, pero
necesitás que en el footer los mismos tengan color azul. ¿Cómo sería el
código?
a {
color: blue;
}
#footer a {
color: green;
}

Lo que hace la segunda parte del código es decir que todos los links que se
encuentren en la región del footer, tengan color verde.
Ahora si por ejemplo contamos con el siguiente código:
#footer ul li a {
color: red;
}

Esto se leería 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 específico como la estructura del código
HTML te lo permita. Por eso cuanto más jerarquizado esté tu código, más
control tendrás sobre la visualización de cada elemento.


Página 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 más utilizo.
Nota: Si tenés conocimiento básico de inglés la mayoría 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 tipografía
color
Para definir el color. Si bien para algunos colores se puede definirlo mediante
la palabra “white o black”, tendrás que usar en la mayoría de los casos el
código hexadecimal (#000 para negro, #fff para blanco, etc)
En el ejemplo aplico un color rojo para los párrafos y un color celeste para los
links. Como verás se referencia a la etiqueta HTML directamente.
p {
color: #990000;
}
a {
color: #0066CC;
}


Página 12

GUIA BASICA de CSS


font-family
Para elegir la familia tipográfica. Arial, Verdana, Trebuchet, Tahoma. Por lo
general utilizo entre dos y tres tipos de familias tipográficas como máximo en
cada sitio. Para lo que es párrafo me concentro de que la tipografía tenga
buen legibilidad entonces también trato de elegir un tamaño adecuado según
cada tipografía
H2 {
font-family: Arial;
}
.texto {
font-family: Verdana;
}

Nota: Con la llegada de Google Web Fonts, se hizo más sencillo poder incluir
tipografías diferentes a las clásicas permitidas en la Web. Si vas a usar este
servicio te recomiendo elegir con cuidado la tipografía especial y a lo sumo
usar máximo dos para no empezar a afectar la performance del sitio.
http://www.google.com/fonts

font-size
Define el tamaño de la tipografía. Por lo general lo fijo en pixeles pero
también se puede hacer por porcentaje.
H2 {
font-size: 16px;
}

.texto {
font-size: 12px;
}


Página 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 podrás darle peso a la tipografía y
enfatizar lo que necesites.
p {
font-weight: normal;
}
H3 {
font-weight: bold;
}

line-height
Define el espacio entre cada línea de texto. Esto se aprecia especialmente en
un párrafo. La medida puede ser expresada en pixeles o en porcentajes.
p {
line-height: 120%;
}
p {

Página 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 mayúscula. Algunos títulos de
bloques pueden quedar muy bien con este estilo si se le da el tamaño
adecuado.
h2 {

Página 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 código tomará como válido solo la que aparece al final.
Con esto quiero decir que si en tu archivo CSS escribís el mismo código de
arriba, verás los títulos <h2> en mayúscula.


Página 16

GUIA BASICA de CSS


Propiedades de espaciado y tamaño
margin
Define el espacio o separación 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 cómo 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)


Página 17

GUIA BASICA de CSS


Si querés agregar un margen único igual para todos los lados, no es necesario
que agregues cada propiedad una debajo de la otra. Podés escribir el
siguiente código:
.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 código posible.
Lo último y ya termino con la propiedad “margin”. Supongamos que
necesitás que el que el margen superior e inferior sea de 10px pero que el
margen izquierdo y derecho sea de 20px. ¿Cómo se escribe eso?
.bloque {
margin: 10px 20px;
}

En la imagen a continuación muestro cómo se produce el margin mencionado
arriba. Como verás, los márgenes no se suman y en el medio de las dos cajas
el espacio resultante es de 20px en lugar de 40px.


Página 18

GUIA BASICA de CSS


padding
Permite definir un espacio “hacia adentro” de la caja o bloque de contenido.
<p>Párrafo de texto. Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque.
<p>
</div>
.bloque {

Página 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 fijás un
ancho de por ejemplo 200px y le agregás 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 código 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=”inner”>
<p>Párrafo de texto. Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque.
<p>
</div>
</div>


Página 20

GUIA BASICA de CSS


.bloque {
width: 200px;
}
.bloque .inner {
padding: 20px;
}

De esta manera por un lado lográs el espaciado interno que necesitás y por el
otro mantenés 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 visualización. ¿Has oído hablar de ancho fijo o ancho
fluído por ejemplo?
Con la llegada de los dispositivos móviles cada vez se le presta más atención a
que el diseño se adapte al formato de la pantalla. En este sentido es común
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>

Página 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 actualización 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 podés utilizar y recomiendo es la propiedad “min-height”
que define un alto mínimo y si el día de mañana hay más contenido, la caja
de desplazará hacia abajo.


Página 22

GUIA BASICA de CSS


Como observarás 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 sólido, un “degradé”, para definir
botones a modo de íconos, etc. Esta propiedad es importante que aprendas a
dominarla en toda su dimensión.
Para usar un color de fondo sólido es lo más sencillo y sería algo como lo
siguiente:
.bloque {
background: #990000;
}

Para usar un fondo en degradé en un menú principal por ejemplo el código
podría ser algo como lo siguiente:
<div id=”menu-principal”>
</div>


Página 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 también para
los botones.
border
Para hacer un borde en la caja o bloque de contenido. Puede ser en toda la
caja o sobre algún lateral (border-right, border-bottom,etc)
.bloque {
background: #ccc;
border-bottom: 2px solid #000;
}


Página 24

GUIA BASICA de CSS


Además del estilo sólido se le puede dar un estilo a la línea en forma de
puntos o guiones (dotted y dashed respectivamente).
La propiedad border la necesitarás especialmente cuando quieras delimitar
por ejemplo un listado de artículos usando una línea fina entre cada uno.
También cuando quieras aplicar un borde a toda una caja o bloque para darle
una cierta sutileza a tu diseño.

Propiedades de ubicación 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 más
común utilizar float: left especialmente para casos como el siguiente:
<img src=”/foto.jpg” />
<p> Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium</p>
</div>


Página 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 vería
directamente debajo de la foto. Cuando en un footer ves también un bloque
al lado del otro con diferente información, probablemente cada bloque tenga
asignada la propiedad float:left;

position
Lo más común 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 común verlo hoy en día al
ingresar a leer un artículo de blog en donde los íconos de social media te
siguen a medida que vas haciendo scroll hacia abajo.
También hay sitios en donde utilizan “fixed” para fijar una barra de
navegación superior y mantenerla siempre visible.
text-align
Para determinar la ubicación 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 información del copy que aparece en el footer de muchos sitios)


Página 26

GUIA BASICA de CSS


Hojita resumen de las propiedades CSS
A continuación te dejo una tablita con las propiedades vistas arriba para que
puedas imprimirla y tenerlas a mano.


Página 27

GUIA BASICA de CSS


Ejemplos
La práctica hace al maestro. Si bien en esta guía doy algunos pocos ejemplos
(solo 3), lo importante es que puedas practicar por tu cuenta y empezar a
experimentar un rato. Una buena idea sería descargarte templates gratuitos
en CSS para ver cómo está conformado el código y aprender desde allí.

Recordá que podés descargarte los ejemplos desde:
www.glidea.com.ar/sites/default/files/ejemplos-guia.zip


Página 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 páginas dado que contiene
los links a las secciones principales del sitio.
Más allá de los colores y los estilos particulares que se pueden aplicar a cada
menú, suele haber una base en el código 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 código básico 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


Página 29

GUIA BASICA de CSS


Por default el navegador le agrega una viñeta a cada elemento <li> del código
HTML y también 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 diseño correspondiente.

Después (HTML con CSS)

RESULTADO FINAL

Vemos ahora la gran diferencia que hay en el diseño luego de aplicar los
estilos correspondientes. Este estilo de barra de navegación puede verse hoy
en día en una gran cantidad de sitios en donde los ajustes estarán en los
colores, tipografía, espaciados, etc.
El ejemplo te servirá para tener una base con la cual puedas empezar a
trabajar.
Ahora vamos a ver el código CSS utilizado para que la barra de menú haya
quedado de esa forma:
Paso 1: Barra general - #menu-principal
En función del HTML, llamamos al contenedor general con ID=“menuprincipal”
#menu-principal {
background: #000;
width: 960px;
margin:auto;
font-family: Arial;
font-size:12px;
}


Página 30

GUIA BASICA de CSS


Le aplicamos un fondo de color negro a toda la barra, un ancho en píxeles, y
definimos un margin “auto” que centrará la barra en el navegador.

Nota: Definí una tipografía y un tamaño para todo el menú, pero esto puede
hacerse a nivel general para todo el sitio. Por ejemplo en el archivo CSS
podés 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 párrafo.
Por default el navegador le agrega viñetas a cada elemento y lo muestra uno
debajo del otro.
Por eso en el código CSS lo que buscamos es por un lado quitarle las viteñas
con la propiedad list-style-image y list-style-type.
Finalmente y lo más importante hacer que un elemento se muestre al lado
del otro con la propiedad float. Si quitáramos esta propiedad del código, el
menú se vería de la siguiente forma:


Página 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 sección principal del sitio, es necesario
definir los links de acceso en el código 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 código del CSS. El
menú se vería de la siguiente manera (más 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. También
se removió el subrayado que viene por default como así también se le aplicó
un color blanco a los enlaces.
Finalmente se utiliza la propiedad :hover para hacer que el fondo del botón
cambie de color cuando se pasa el mouse por encima. En la imagen
“Resultado Final” se puede ver arriba ese efecto.


Página 32

GUIA BASICA de CSS


Ejemplo 2 – Bloque de un columna
En un blog o en un sitio web institucional es común 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 título y de un
contenido que puede ser un listado de los últimos artículos, novedades,
información de contacto, etc.

Antes (solo HTML)
El código básico para un bloque con información institucional podría ser algo
como lo siguiente:
<div class="bloque">
<div class="bloque-inner">
<h2>Título del bloque</h2>
<div class="contenido">
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium.</p>
<a href="/">Ver más</a>
</div>
</div>
</div>

RESULTADO PARCIAL


Página 33

GUIA BASICA de CSS



RESULTADO FINAL

¿Qué se hizo para llegar a este diseño?
Vamos a ver el código CSS utilizado para que el bloque haya quedado tan
lindo:
Paso 1: Bloque general - .bloque
En función 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 tipografía y un tamaño
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 título - .bloque h2
Ahora llegó el momento de estilizar el título de este bloque


Página 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 título se vea todo en mayúscula. Luego aplicamos un padding para generar
el espaciado apropiado y finalmente definimos algunos colores para el fondo
y el color de la tipografía.
Paso 3: Llamamos al contenido del bloque - .bloque .contenido
Luego del título vamos a ajustar el diseño 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í
también el espaciado entre líneas 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”


Página 35

GUIA BASICA de CSS


Ejemplo 3 – Listado de artículos
En un blog es común ver un listado de artículos uno debajo del otro. Ahora
bien, es necesario aplicar varios estilos para llegar a un resultado mas o
menos pasable.

Antes (solo HTML)
El código básico 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


Página 36

GUIA BASICA de CSS


Por default contamos con determinada tipografía, color de links, espaciados,
etc. Ahora vamos a tocar un poco el CSS para mejorar la presentación de
estos contenidos


RESULTADO FINAL


Página 37

GUIA BASICA de CSS


Vemos ahora la gran diferencia que hay en el diseño luego de aplicar los
estilos correspondientes. No solo este tipo de diseños se puede observar en
un blog, sino que en un sitio institucional que presenta noticias, en un diario,
etc.
Ahora vamos a ver el código CSS utilizado para que el listado haya quedado
de esa forma:
Paso 1: Contenedor de la noticia
En función 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;

Página 38

GUIA BASICA de CSS


padding:5px;
}

Aplicamos propiedades básicas como un fondo, un borde, algunos seteos
para la tipografía, ancho y algunos espaciados.
Paso 2: Alineación de la imagen a la izquierda del contenido
Esta es una aplicación típica 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 título:
h2 {
color:#990000;
}


Página 39

GUIA BASICA de CSS


Herramientas y recursos
A continuación listo una serie de herramientas y recursos para que empieces
a complementar la información.
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 código (HTML y CSS) utilizo un editor de notas
- Notepadd ++
Plantillas gratis para descargar y practicar
http://www.freecsstemplates.org/
Para validar tu código CSS y ver que no contenga errores
http://jigsaw.w3.org/css-validator/
Listado más completo de las propiedades CSS
http://htmldog.com/reference/cssproperties/


Página 40

GUIA BASICA de CSS


Llegando al final…
Estamos terminando esta guía básica de CSS. Te he enseñado una noción
muy básica sobre el tema y ahora es momento de seguir aprendiendo.
Si crees que esta guía sirvió de algo, podés hacer lo siguiente. Te estaré
enormemente agradecido:

1. Recomendarla a algún amigo o conocido
2. Dejar un link en tu sitio o blog referenciándola
www.glidea.com.ar/blog/guia-basica-de-css
3. Hacerte fan en la página de Glidea
4. Visitar cada tanto nuestro sitio web y blog
5. Enviarme algún comentario a mi email: mariano@glidea.com

¡Gracias!


Página 41

Guía Básica de CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie Guía Básica de CSS

Ähnlich wie Guía Básica de CSS (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Guía Básica de CSS