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.

http://www.glidea.com.ar/

https://www.facebook.com/agencia.glidea

GUIA BASICA de CSS www.glidea.com.ar/blog

https://www.facebook.com/agencia.glidea Página 2 Glidea © . Todos los derechos reservados. Guía de distribución gratuita. Prohibida su venta.

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: [email protected]

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 verdep {

color: #fff;

}

Material de descarga (de los ejemplos del final) http://www.glidea.com.ar/sites/default/files/ejemplos-guia.zip

mailto:[email protected]

http://www.glidea.com.ar/sites/default/files/ejemplos-guia.zip



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.

http://www.glidea.com.ar/



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.



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?



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.



<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.



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

http://www.w3schools.com/tags/entenderás mejor):

http://www.w3schools.com/tags/



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;

}



¿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 class=”bloque”>


</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 <a></a> responde a la etiqueta



Para estilizar todos los párrafos el código sería p {

font-size:12px;

}

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

¿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.



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;

}



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;

}

http://www.google.com/fonts



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 {



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 {



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.



Propiedades de espaciado y tamaño

margin Define el espacio o separación entre dos cajas o bloques de contenido. Es un

<div>espacio que funciona hacia afuera del <div class=”bloque”></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)



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.



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 {



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=”bloque”>

<div class=”inner”>

<p>Párrafo de texto. Sed ut perspiciatis unde omnis iste

natus error sit voluptatem accusantium doloremque.

<p>

</div>

</div>



.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. <div class=”bloque”></div>

.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>



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. <div class=”bloque”></div>

.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.



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: <div class=”bloque”></div>

.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>



#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) <div class=”bloque”></div>


.bloque {

background: #ccc;

border-bottom: 2px solid #000;

}



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: <div class=”bloque”>

<img src=”/foto.jpg” />

<p> Sed ut perspiciatis unde omnis iste natus error sit

voluptatem accusantium doloremque laudantium</p>

</div>



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)



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.



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



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



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=“menu-principal”

#menu-principal {

background: #000;

width: 960px;

margin:auto;

font-family: Arial;

font-size:12px;

}



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:



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.



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




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



.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”



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



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



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;



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;

}



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/

http://www.freecsstemplates.org/

http://jigsaw.w3.org/css-validator/

http://htmldog.com/reference/cssproperties/



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 www.glidea.com.ar/blog

5. Enviarme algún comentario a mi email: [email protected]

¡Gracias!

http://www.glidea.com.ar/blog/guia-basica-de-css



http://www.glidea.com.ar/blog

http://www.glidea.com.ar/blog

Guía Básica de CSS

Design

Transcript of Guía Básica de CSS