Scribd
Cargar
8 vistas33 páginas

Css Tutorial

Este documento es un tutorial básico de CSS dirigido a principiantes que desean aprender a crear archivos HTML y CSS. Se enfoca en la creación de una página web simple, añadiendo estilos como colores y tipos de letra, y configurando una barra de navegación. Al finalizar, los usuarios podrán desarrollar sitios web más avanzados utilizando editores de HTML y CSS.

Cargado por

eveospino.ing28
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
8 vistas33 páginas

Css Tutorial

Este documento es un tutorial básico de CSS dirigido a principiantes que desean aprender a crear archivos HTML y CSS. Se enfoca en la creación de una página web simple, añadiendo estilos como colores y tipos de letra, y configurando una barra de navegación. Al finalizar, los usuarios podrán desarrollar sitios web más avanzados utilizando editores de HTML y CSS.

Cargado por

eveospino.ing28
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 33

Idiomea

Esto es una traducción. Puede contener errores o estar desfasada respecto a la versión
inglesa. Traductor: Encarnación Quesada Ruiz (Oficina Española del W3C)

Tutorial de CSS
Comenzando con HTML + CSS
 1. HTML
 2. Añadir color
 3. Añadir tipo de letra
 4. Barra de navegación
 5. Dar estilo a los enlaces
 6. Línea horizontal
 7. CSS externa
 Más información

Este breve tutorial está pensado para aquellas personas que quieren comenzar a utilizar CSS
y nunca han escrito una hoja de estilos CSS.

No explica mucho sobre CSS. Se centra en cómo crear un archivo HTML, un archivo CSS
y cómo hacer que los dos funcionen juntos. Una vez finalizado este tutorial, podréis leer
cualquiera de los otros tutoriales para darle más estilo a los archivos HTML y CSS.
También podréis utilizar un editor de HTML o CSS, para desarrollar sitios Web más
avanzados.

Al final del tutorial habrás hecho un archivo HTML como éste:

El resultado será una página HTML, con colores y formato, todo desarrollado con CSS.

Ten en cuenta que no quiero decir que sea bonita ☺

Las secciones como ésta son opcionales. Contienen explicaciones adicionales del
código HTML y CSS del ejemplo. El símbolo de “peligro”, situado al principio, indica que
se trata de un material más avanzado que el resto.

Paso 1: Escribir el código HTML


Para este tutorial, te sugiero que utilices las herramientas más sencillas. Por ejemplo,
Notepad (Windows), TextEdit (Mac) o HTML Kit, serán suficiente. Una vez comprendido
lo básico, probablemente se quieran utilizar herramientas más complicadas, o incluso
programas comerciales como Style Master, Dreamweaver o GoLive. Pero para el desarrollo
de una primera hoja de estilos, es mejor no distraerse con características avanzadas de otras
herramientas.

No utilices procesadores de texto como Microsoft Word u OpenOffice. Con ellos,


normalmente se generan archivos que los navegadores no pueden interpretar. Para HTML y
CSS, lo único que necesitamos son archivos en texto plano.

El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que
desees), comenzar con una ventana vacía y escribir lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
</head>

<body>

<!-- Menú de navegación del sitio -->


<ul class="navbar">
<li><a href="indice.html">Página principal</a>
<li><a href="meditaciones.html">Meditaciones</a>
<li><a href="ciudad.html">Mi ciudad</a>
<li><a href="enlaces.html">Enlaces</a>
</ul>

<!-- Contenido principal -->


<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

<p>No tiene imágenes, pero tiene estilo.


También tiene enlaces, aunque no te lleven a
ningún sitio…

<p>Debería haber más cosas aquí, pero todavía no sé


qué poner.

<!-- Firma y fecha de la página, ¡sólo por cortesía! -->


<address>Creada el 5 de abril de 2004<br>
por mí mismo.</address>

</body>
</html>

En realidad, no es necesario escribir el código: puedes copiarlo y pegarlo directamente en


un editor.

La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de


HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de DOCumento). En
este caso, se trata de la versión 4.01 de HTML.
Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el
documento está entre las etiquetas <html> y </html>. Entre <head> y </head> hay espacio
para diferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el
documento sólo contiene el título pero posteriormente también se añadirá la hoja de estilos
de CSS.

El <body> es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se
coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas <!-- y
-->, las cuales muestran el contenido situado en ese lugar como un comentario de referencia
para nosotros mismos. El navegador la ignorará.

De las etiquetas del ejemplo, <ul> crea una “lista desordenada”, es decir, una lista en la
cual los elementos no están numerados. La etiqueta <li> indica el comienzo de un
“elemento lista”. <p> es un “párrafo”. Y <a> es un “enlace”, que es lo que crea un
hipervínculo.

Editor mostrando el código HTML.

Si quieres saber lo que significan los nombres que están entre <…>, un buen sitio
para empezar es Comenzando con HTML. Realizaré algunos comentarios sobre la
estructura de la página HTML que estamos utilizando de ejemplo.
 “ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará
nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del
sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú
similar.
 Los elementos “h1” y “p” componen el único contenido de esta página, mientras
que la firma al final (“address”) será la misma para todas las páginas del sitio.

Observa que no he cerrado los elementos "li" y "p". En HTML (pero no en XHTML), se
pueden omitir las etiquetas </li> y </p>, que fue lo que hice aquí, precisamente para hacer
el texto más sencillo de leer. Pero si se prefiere pueden ser añadidas.

Vamos a suponer que va a ser una página de un sitio Web que tendrán varias páginas
similares. Como es frecuente en páginas Web, ésta tiene un menú con enlaces a otras
páginas en el sitio ficticio, un contenido único y una firma.

Ahora, selecciona “Guardar como…” del menú Archivo, ve hasta un directorio/carpeta


donde quieras guardar el documento (el escritorio puede ser una opción) y guarda el
archivo como “mipagina.html”. No cierres todavía el editor, lo necesitarás otra vez.

Después, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu


administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic,
sobre el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador
predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre
él).

Como puedes ver, la página tiene un aspecto bastante aburrido...

Paso 2: Añadir algunos colores


Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo
esté tu navegador configurado. Para que la página tenga algo más de encanto podemos
añadir algunos colores. (Deja el navegador abierto, lo utilizaremos más tarde).

Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante,
pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es
recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes
archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en este paso, vamos
a dejarlo todo en el mismo archivo.

Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el


interior de ese elemento. Volvamos entonces a la ventana del editor y añadamos las
siguientes cinco líneas en la parte de la cabecera del archivo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>

<body>
[etc.]

Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es
una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos
añadido estilo al elemento "body". La tercera línea establece el color del texto como
morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.

Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:

1. el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del
documento que se verá afectada por la regla;
2. la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades),
las cuales especifican qué aspecto del diseño va a cambiarse;
3. y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.

El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades,
por lo que podemos tener dos reglas separadas:

body { color: purple }


body { background-color: #d8da3d }

ya que las dos reglas van a afectar al elemento body, sólo tenemos que escribir "body" una
vez, y poner juntas las propiedades y valores. Para obtener más información sobre
selectores, revisa el capítulo 2 de Lie & Bos.

El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p,
li, address…) no se les ha dado ningún fondo en concreto, por lo que de forma
predeterminada no tendrán ninguno (o serán transparentes). La propiedad 'color' establece
el color del texto que se encuentra en el elemento body, pero los otros elementos que se
encuentran dentro de body heredarán ese color, a no ser que se especifique lo contrario.
(Más adelante añadiremos más colores).

Ahora guarda el archivo (utiliza “Guardar” del menú Archivo) y vuelve a la ventana del
navegador. Si haces clic en "Actualizar", la página "aburrida" que se mostraba al principio,
pasará a ser una página con colores (pero aún sigue siendo muy aburrida). Aparte de la lista
de enlaces que se encuentra al principio, el texto debería tener ahora el color morado sobre
un fondo de color amarillo verdoso.
Presentación de la página en el navegador tras añadirle colores.

Los colores pueden especificarse en la CSS de formas diferentes. El


siguiente ejemplo muestra dos de ellas: por el nombre (“purple”) y por el código
hexadecimal (“#d8da3d”). Hay aproximadamente 140 nombres de colores y más de 16
millones de colores disponibles en código hexadecimal. Agregar un toque de estilo, ofrece
más información sobre esos códigos.

Paso 3: Añadir tipo de letra


Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos
elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera
h1, que irá con “Helvetica”.

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus
ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible,
Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el
navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está,
Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el
navegador puede escoge cualquier otro tipo de letra que no sea serif.

Añade en el editor de texto las siguientes líneas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>
[etc.]

Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían


aparecer tipos de letra diferentes para el encabezado y para el otro texto.
Ahora el texto tiene un tipo de letra diferente al del encabezado.

Paso 4: Añadir una barra de navegación


La lista que aparece al principio de la página HTML será más adelante un menú de
navegación. Algunos sitios Web tienen un menú al principio o en un lado de la página, y
éste debería tenerlo también. Pondremos uno a la izquierda, ya que es más interesante
ponerlo ahí que arriba…

El menú ya está en la página HTML. Es la lista <ul> que se encuentra al principio. Los
enlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, sólo tiene
una página, pero eso no es importante ahora. Por supuesto, en un sitio Web real no debería
haber ningún enlace roto.

Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la
derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son
'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú).

Hay otras formas de hacerlo. Si buscas “column” y “layout” en la página Aprender CSS,
encontrarás algunas plantillas listas para ser utilizadas. Pero, por el momento, ésta está
bien.
En la ventana del editor, añade las siguientes líneas al archivo HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>
[etc.]

Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de


enlaces a la izquierda del texto principal. Ahora el resultado parece mucho más interesante
¿verdad?
El texto principal se ha movido hacia la derecha y la lista de enlaces está ahora a la
izquierda en lugar de estar arriba.

'position: absolute' indica que el elemento ul está situado independientemente de


cualquier texto que esté antes o después en el documento. 'left' y 'top' indican cuál es la
posición. En este caso, está a 2em de la parte de arriba de la ventana y a 1em del lado
izquierdo.

'2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo, si el menú se muestra
con un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil
en CSS ya que se puede adaptar automáticamente al tipo de letra que el usuario esté
utilizando. La mayoría de los navegadores tienen un menú para aumentar o disminuir el
tamaño de letra: puedes probarlo y ver la forma en la que el menú aumenta de tamaño a la
vez que lo hace el tipo de letra, lo que no ocurriría si hubiéramos utilizado un tamaño en
píxeles.

Paso 5: Dar estilo a los enlaces


El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su
aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y
moveremos los elementos a la izquierda, donde estaban antes los puntos. También le
daremos a cada elemento un fondo blanco y un cuadrado negro. (¿Por qué? Por nada en
particular, sólo porque podemos hacerlo).

No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el


azul para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces
que ya ha visitado:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>

<body>
[etc.]

Normalmente, los navegadores muestran los hipervínculos subrayados y con color.


Los colores son parecidos a los que especificamos aquí: azul para enlaces a páginas que no
has visitado todavía (o visitaste hace mucho tiempo), morado para páginas que ya has
visitado.

En HTML, los hipervínculos se crean con elementos <a>, por lo que para especificar el
color, necesitamos añadir una regla de estilo para "a". Para diferenciar los enlaces visitados
de los no visitados, CSS proporciona dos "pseudo-classes" (:link y :visited). Se llaman
“pseudo-classes” para distinguirlas de los atributos de clase, que aparecen directamente en
HTML, por ejemplo, class="navbar".

Paso 6: Añadir una línea horizontal


El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto
de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea
punteada encima del elemento <address>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>

<body>
[etc.]

Ahora, ya hemos terminado de darle estilo a la página. Lo siguiente es ver cómo se pone la
hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el
mismo estilo.

Paso 7: Poner la hoja de estilo en un archivo separado


Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio
crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más
adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de
estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.

Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto,
que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una
ventana vacía.

Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del
archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a
CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo
directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como
“miestilo.css”.

Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta
<style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la
siguiente forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


<html>
<head>
<title>Mi primera página con estilo</title>
<link rel="stylesheet" href="miestilo.css">
</head>

<body>
[etc.]

De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo


llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el
mismo directorio en el que se encuentra el archivo HTML.

Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías


apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo,
pero ahora viene establecido por el archivo externo.
Resultado final

El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestro sitio


Web. (Quizá queráis primero cambiarlos un poco…), pero la forma de realizar esto
depende de vuestro proveedor de Interne

Tutorial básico de CSS


Por Ramm el 25 de Abril de 2005 con 299,710 visitas.
HTML, CSS y Javascript Otros tutoriales por Ramm.

Que es CSS?

Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología


desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona
aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de
fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando
de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada
completamente de la estructura del HTML.
Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante
entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.

Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor
organización de nuestro codigo, menos peso en las paginas, y mas flexibilidad a los
cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que
es mas fácil y rápido diseñar con CSS que de la manera antigua.

Bien, empecemos por el principio. Aqui intentare enseñar como hacer documentos validos
y que sean bien interpretados por la mayoría de los navegadores actuales. Lograremos esto
conociendo los tres principales elementos en el desarrollo de CSS:

Atributos
Valores
Selectores

Atributos

Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si
queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo
"background", etc.

Valores

Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por
ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor
"red".

Selectores

Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos
definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la
etiqueta <body> del documento HTML.

Hay tres tipos de selectores:

 Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que


le aplicaremos el estilo.
 Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas
con un nombre.
 El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto
"." seguido del nombre que le queramos poner a la clase, de esta forma:
.mi_clase.
La sintaxis:

Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a
colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma
";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden
definir tantos atributos con sus respectivos valores como se desee, separandolos con un
espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas
y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el
siguiente ejemplo:

/*CSS sobre selector de etiquetas*/


body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;
}

Este tipode selector no requiere de aplicación en el documento HTML, las etiquetas a las
que se les defina un estilo de esta forma automáticamente heredarán los estilos.

/*CSS sobre selector de identificador*/


#header {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;
}

En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este
ejemplo:

<div id="header">Aqui el contenido</div>


/*CSS sobre selector de clase*/
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
}

En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el
estilo. Ejemplo:

<div class="mi_clase">Aqui el contenido</div>

Ademas de esto, existen tres formas de aplicar estilos CSS a una pagina, la que recomiendo
en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado
del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la sección
head de la página:

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


Para mi esta forma es la mas recomendable porque asi se puede vincular el archivo.css a
todas las páginas del sitio, es mucho mas liviano al ver la pagina y ademas a la hora de
modificar algo se hace solo una vez.

La segunda forma es aplicando los estilos directamente en la sección <head> del


documento HTML. Se hace de la siguiente forma

<head>
<title>Pagina</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
}
-->
</style>
</head>

Es buena idea colocarlos de esta forma si son estilos exclusivos para la pagina a la que se le
aplica.

El tercer método no lo recomiendo, aunque algunas veces puede ser necesario. Consiste en
aplicar el estilo directamente sobre el elemento HTML, de esta forma:

<table style="background-color:#333333; padding:2px; width:300px;


height;100px;></table>

Como puede verse en algunos casos, los atributos pueden ser compuestos, como el atributo
"font-family" o "background-color", puede llevar adicionalmente caracteristicas mas
especificas, que van separadas por un guion "-" como vimos en los ejemplos.
Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar
pixeles "px" centimetros "cm" o relativos como "em", en los colores se puede usar la
notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles.

De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que
constituyen una página web, y poco a poco ir separando el contenido de la presentación,
ademas de lograr en un documento completamente válido cosas que solo el poder de CSS
puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo
HTML.

Unicamente con el uso, se va uno acostumbrando a lo que se puede hacer con CSS, al
principio, seguramente , les pasará (como a mí) que solo lo usan para dar formato a los
textos, tablas etc, pero luego uno va conociendo como trabaja y va añadiendo elementos a
los archivos CSS.
El punto ideal sera cuando logremos separar completamente el diseño del contenido,
dominando las técnicas de posicionamiento con CSS, y eliminando el uso de tablas para
diagramar el contenido.

En un proximo tutorial, analizaremos las técnicas de posicionamiento o CSS-P, el valor


"float", "position" y las listas <ul> y <li>, como funcionan las medidas, y la forma correcta
de formatear las etiquetas, pero no se preocupen mucho, ya trabajo en el.

Tutorial de posicionamiento y layout en


CSS
Por Ramm el 17 de Julio de 2005 con 429,328 visitas.
HTML, CSS y Javascript Otros tutoriales por Ramm.

¿A qué le llamamos posicionamiento?


Obviamente no me refiero a los buscadores como Google o Yahoo, posicionamiento en
CSS consiste en ubicar los elementos HTML en la pagina, el "layout" o distribución de la
pagina. Basicamente esto se logra ordenándole desde CSS a los elementos que tengan cierto
tamaño y posición, además de obtener una buena organización del código HTML o
XHTML.

El posicionamiento con CSS nos permite control total sobre los elementos de la pagina,
además con documentos muy livianos y completamente válidos ante W3C.

Los Divs
Antes de comenzar con el CSS quiero exponer aqui la importancia de usar los divs, un div
es basicamente un contenedor, en el podemos meter cualquier clase de contenido, con la
gran ventaja de que los podemos manipular a nuestro antojo con CSS, colocarlo en
cualquier parte de la pagina, de cualquier tamaño, de cualquier color, con bordes o sin ellos,
con imagenes de fondo o sin ellas, a diferencia de las tablas, los divs no se dividen por
dentro, pero podemos anidarlos y organizarlas casi como las tablas (en caso de ser
necesario).

Para lograr que el posicionamiento no se vuelva complicado, debemos tener en cuenta que
la organización en el codigo HTML es muy importante, tener bien estructurados los
elementos nos facilitará el trabajo con CSS, con esto quiero decir que debemos contar con
un código semántico.
Semántica
Proviene del griego "semantikos", que quería decir "significado relevante", derivada de
"sema", lo que significaba "signo") Se dedica al estudio del significado de los signos
lingüísticos y de sus combinaciones, desde un punto de vista sincrónico o diacrónico.
(definición de wikipedia)

Esto significa que a la hora de hacer el codigo HTML, este bien organizado
jerárquicamente, o sea anidar los divs segun importancia, agrupados segun sección, utilizar
las etiquetas h1, h2, h3, etc para los títulos, las etiquetas <ul> y <li> para las listas, las
etiquetas <p> en los parrafos, ayuda a organizar mejor el contenido, ademas de que estan
ahi para eso. La mayoria se ha olvidado del uso de estas etiquetas por trabajar en entornos
gráficos para diseñar, o porque solo le dan importancia a lo que se ve. Otras ventajas son
que los buscadores entienden el codigo, por ejemplo google sabe que <h1>Titulo</h1> es
un titulo y le da la importancia necesaria, si alguien usa Lynx para navegar, o cualquier
navegador de texto, podra ver un contenido ordenado y lógico y es mucho más fácil de
mantener/modificar. Un ejemplo de una estructura sencilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<div id="contenedor">
<div id="encabezado">
<h1>Titulo de la Pagina</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="contenido">
<h2>Subtitulo 1 </h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
turpis purus, fringilla at, tristique vitae, venenatis vel, arcu. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget orci
nec risus posuere facilisis. Proin sit amet nisl. Curabitur lectus felis,
interdum vitae, vestibulum ultrices, vehicula vitae, nibh. Aliquam augue
mi, viverra quis, fermentum id, mattis vitae, quam. In neque. Integer
wisi metus, tempor vitae, tempus vitae, luctus a, enim. Mauris justo.
Nulla rutrum sapien nec mi. Proin dolor neque, auctor ut, pulvinar ut,
mattis eu, erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed commodo
facilisis arcu. Nunc semper. Donec in risus at tortor semper commodo.
Integer porttitor, mauris in tempor congue, nisl erat imperdiet mi, non
consequat wisi est in est. Aenean lobortis, wisi ac varius malesuada,
lorem est varius enim, sit amet ultrices quam risus sed quam. Maecenas
euismod adipiscing diam. Sed dui tortor, pellentesque at, vehicula et,
gravida vel, magna. Integer condimentum dignissim erat. </p>
<h3>Sub-subtitulo</h3>
<p> Praesent tincidunt. Nam quis quam at nunc pretium eleifend. Praesent
ipsum sapien, aliquam a, scelerisque sit amet, consectetuer in, arcu.
Maecenas at wisi in augue tempor tincidunt. Fusce viverra ante gravida
quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non
urna vitae metus elementum imperdiet. Donec justo enim, pulvinar
ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies
in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse
massa. </p>
<div id="footer">Copyright2005 - Derechos reservados</div>
</div></div>
</body>
</html>

Asi se ve el ejemplo sin estilos

De aqui en adelante vamos con lo que nos interesa, lo primero que haremos será centrar
nuestro div "contenedor" en la ventana del navegador, y darle un tamaño específico

/*empezamos por esto, para evitar resultados extraños en distintos


navegadores, y algo de estilo al texto*/
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#666666;
text-align:center; /*aqui mandamos a centrar todo el contenido*/
}

y luego al div:

#contenedor {
width:600px; /*ancho total de la pagina*/
border:1px solid #333333; /*encadeno los 3 atributos claves del borde
en una sola linea, ahorrando codigo XD*/
background-color:#FFF8F0;
margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los
navegadores nuevos es suficiente para centrar la pagina*/
text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero
dentro del contenedor*/
}

Bien, ya tenemos el div contenedor centrado en la pagina, ahora vamos con el


"encabezado":

Aquí, vemremos como funciona float. Así como suena, float nos permite "flotar" elementos
hacia la izquierda o la derecha de la pagina, haciendo que los demas elementos fluyan
alrededor

#encabezado {
margin:10px; /*para que no se pegue al borde*/
padding:10px; /*algo de relleno*/
width:224px; /*este ancho es para que cuadre con el texto*/
height:50px; /*idem*/
border:1px solid #333333; /*decoracion*/
background-color:#CC6600; /*more*/
float:left; /*lo flotamos a la izquierda*/
display:inline; /*(*)*/
}

(*)display:inline; se usa en este caso para corregir un error en IE, en la interpretación del
margin y el padding, si flotamos a la izquierda, y hay 10px de margin a la izquierda, IE
sumara el doble de ese margen. Con esta linea corregimos eso.

Ahora algo de estilo para el titulo:

#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta


par areferirnos solo al h1 dentro del div encabezado, asi no afectara
otros h1 en el resto del documento.*/
font-size:18px;
font-weight:bold;
width:224px;
border-bottom:16px solid #FFFFFF;
color:#FFFFFF;
margin:0; /*los h1 vienen con margen, con esto se lo quito*/
text-transform:uppercase; /*convierte todas en mayusculas*/
padding-bottom:10px;
}

Seguimos con el menu:

#menu {
float:left;
margin:10px 10px auto 0;
border:1px solid #333333;
width:320px;
height:24px;
}
Y luego con la lista. las listas traen varios pre-formatos desde HTML, como las viñetas,
margen, saltos de línea a cada item, padding, etc... Aqui vamos a cambiar completamente el
aspecto de una lista, con sus vinculos dentro.

ul {
list-style-type:none; /*con esto quitamos las viñetas*/
margin:0; /*le quitamos el margen a la lista*/
padding:0; /*y el relleno*/
}
li {
margin:0; /*le quito el margen al elemento de la lista*/
float:left; /*y los floto a la izquierda para eliminar el salto de
linea*/
}
li a {
display:block; /*con esto el vinculo tendra un area rectangular, asi
no sera solo el texto*/
background-color:#CC3300; /*algo de color*/
color:#FFFFFF; /*mas*/
width:58px; /*defino el ancho del rectangulo del vinculo*/
padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del
rectangulo para obtener el div #menu completamente ocupado con los ítems
del menú*/
text-decoration:none; /*elimino el subrayado del vínculo*/
font-weight:bold; /*decoración*/
text-transform:uppercase; /*decorare los vinculos en mayusculas*/
}
li a:hover {
background-color:#999900; /*decoración para el evento hover (mouse
encima)*/
}

Esto es suficiente para cambiar el aspecto de la lista, y los vinculos en el menu. Así
podemos jugar con los anchos y rellenos para lograr menúes mas complejos, poniendole
bordes, etc ...

Ahora el contenido:

#contenido {
width:580px; /*el ancho mas el padding me da 600px de ancho que es
loque mide la pagina */
clear:both; /*con esto nos aseguramos de que no se ponga nada a los
lados*/
padding:10px;
}

Algo de estilo para los titulos:

#contenido h2 {
font-size:16px;
color:#CC3300;
width:246px;
text-transform:uppercase;
border-bottom:1px dotted #CC3300;
}
#contenido h3 {
width:246px;
font-size:14px;
color:#999900;
border-bottom:1px dotted #999900;
}

Y terminamos con el footer:

#footer {
width:560px; /*menos porque debemos sumar el padding del div
contenido*/
text-align:right;
padding:10px;
font-size:80%; /*mas pequeño el texto*/
font-style:italic;
color:#999999;
}

Los comentarios en el codigo explican lo que hace cada uno de los atributos clave usados
en el ejemplo.

Y con esto terminamos nuestra pagina, obteniendo este ejemplo terminado , una pagina
semántica, facilmente entendible por los navegadores, los buscadores y por nosotros
mismos.

Crear menus de navegación en CSS


usando listas
Por Ramm el 22 de Octubre de 2005 con 695,989 visitas.
HTML, CSS y Javascript Otros tutoriales por Ramm.

Para completar este tutorial es recomendable leer antes el Tutorial Básico de CSS

¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas
son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la
transición hacia el uso de XHTML estándar y el maquetado con CSS.

Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un


lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En ese
sentido, las listas nos ofrecen una muy buena forma de estructurar, pues...listas.
En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la unica
diferencia es que las ordenadas añaden un número correlativo a cada item de la lista,
mientras que las desordenadas no:

Las Listas Ordenadas:

<ol>
<li>item</li>
<li>item</li>
<li>item</li>

</ol>

Nos da como resultado:

1. item
2. item
3. item

Mientras que, las listas desordenadas:

<ul>
<li>item</li>
<li>item</li>
<li>item</li>

</ul>

Nos queda:

 item
 item
 item

Ahora la gran pregunta, Por qué &%$#$@/ tengo que usar eso para hacer mi menú?

Sencillo, porque un menú básicamente ES una lista, no es un parrafo, ni un titulo, es una


lista de vínculos. Y como lista que és, lo mas correcto es que esté estructurada en el HTML
como tal.

Pero no hay de que preocuparse, ya que el CSS nos permite cambiar completamente el
aspecto de la lista, para convertirla en el bonito menú que queremos, sin que deje de ser
lista. Pero primero, veamos en qué consisten los pre-formatos que trae de por sí una lista.

Las listas se renderizan en el navegador con ciertas características, como el margen /


relleno (interpretado de diferente manera en los distintos navegadores) de la lista completa,
el margen / relleno (idem) de cada item de la lista y las viñetas, ademas de un salto de línea
para cada item por ser elementos de bloque.
Línea naranja delimita el margen / relleno de la lista, línea verde el bloque de cada item.

Todos estos formatos pueden ser eliminados / modificados a través de CSS muy fácilmente.
Comencemos con las viñetas.

Nota: para los ejemplos usaremos una lista desordenada, ya que no necesitamos la
numeración.

Las viñetas por defecto de las listas desordenas es un circulo relleno, podemos cambiarlo
por un cuadrado, un circulo vacio, o una imagen, cambiando tan solo un atributo en nuestro
CSS para la lista:

<ul id="navi">
<li>inicio</li>
<li>acerca de</li>
<li>contactos</li>
</ul>
<!--agregamos un ID para referirnos directamente a esta lista.-->

En el CSS:

#navi {
list-style-type:square;
}
//O bien...
#navi {
list-style-type:circle;
}
//O mas bien...
#navi {
list-style-image:url(images/vineta.png);
}

Nos da como resultado:

Los diferentes resultados del atributo "list-style".

También podemos poner:


#navi {
list-style:none;
}

Con lo que le quitamos las viñetas:

Lista sin viñetas.

Ahora vamos con los margenes y el relleno. Dado que los distintos navegadores pueden
interpretar el margen y el relleno de diferente forma, hay que especificar ambos valores
con los que queramos darle a nuestra lista, aunque parezca que el que trae la lista de por sí,
sea el adecuado para lo que queremos, es mejor especificarlo en el CSS.

#navi {
list-style:none;
margin:0;
padding:0;
}
//luego a los elementos de la lista...
#navi li {
margin:2px;
padding:2px;
border:1px solid#CCCCCC;
}

Empieza a tomar forma.

Para continuar, vamos a agregarle vinculos a los elementos de la lista:

<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>

Ahora tendremos:
Los vinculos añaden el subrayado y el color azul.

Ahora es tiempo de decidir si queremos nuestro menu horizontal, o vertical. Si es vertical,


no necesitamos agregar nada especial al código, pero si es horizontal, hay que agregar un
float para hacer que los elementos de la lista se coloquen uno al lado del otro:

#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:2px;
border:1px solid #CCCCCC;
float:left; //para eliminar el comportamiento de elemento de
bloque(salto de linea)
}

Y el resultado:

Lista horizontal.

Nota: al aplicar el float, los elementos de la lista se reduciran al minimo tamaño necesario
para el texto que contengan.

Todos los demas estilos que queramos agregarle al menú, se harán directamente sobre los
vinculos, ya sea tamaño, tipo de letra, colores, imagenes de fondo, etc. Para seleccionar los
vínculos dentro de los elementos de lista, encadenamos los nombres de las etiquetas en el
selector CSS como lo hicimos con los <li>:

#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:0; //Ya no necesito el padding, tambien quitare el borde
que puse antes.
float:left;
}
#navi li a {
display:block; //Convertimos el vínculo en un bloque.
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
color:#99CC00;
background-color:#003366;
}

Así obtenemos fácilmente un menú, obviamente muy sencillo:

Un menú básico.

De aqui en adelante, cambiar todo el aspecto es cosa de ir probando, cambiando los colores,
cambiando el relleno, el margen, el tipo de letra colocando bordes:

#navi li a {
display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
border-left:10px solid #666666; //Agrego un borde ancho a la
izquierda
}
#navi li a:hover {
color:#99CC00;
background-color:#003366;
border-left-color:#99CC00; //Luego le cambio el color al borde en
el evento hover.
}

Mejorando el aspecto.
Experimentando

Para este ejemplo, use una imagen de fondo, para el evento hover, con un pequeño truco,
veamos el codigo:

ul li a {
display:block;
width:100px;
padding:40px 10px 4px 10px;
text-decoration:none;
text-align:right;
font-size:11px;
color:#666666;
background-image:url(images/boton1.png); //Aqui solo se ve la
parte de arriba de la imagen
border:1px solid #666666;
}
ul li a:hover {
color:#000000;
background-position:bottom; //Aqui muestro la parte de abajo de la
imagen
}

Para hacer los botones altos, le he agregado 40px de relleno superior, de esta forma agrando
el boton dejando el texto abajo, le he cambiado la alineación a la derecha, y, como se puede
ver en el código, la imagen de fondo la he puesto en el vínculo directamente, no en el
evento hover, y en este solo le cambio la posición. El detalle es que la imagen es el doble
de tamaño que el botón:

Una sola imagen con ambos estados.

Por qué hago esto? La idea es cargar una sola imagen, y hacerlo al cargar la pagina, si
pedimos que en el evento hover se cargue una imagen aparte, esta solo sera cargada al
poner el cursor encima del botón, en conexiones lentas, suele haber un tiempo de descarga
de la imagen que supera a la ación del usuario, lo que ocasiona que nunca vea la imagen del
evento hover. Con este método, nos aseguramos que la imagen es cargada desde el
principio y no hay espera.

Otro ejemplo

Solo imagenes.

Para este ejemplo, hay varios cambios, comenzando por la lista:

<ul>
<li><a href="#" id="inicio"><span>inicio</span></a></li>
<li><a href="#" id="acerca"><span>acerca de</span></a></li>
<li><a href="#" id="contacto"><span>contactos</span></a></li>
</ul>

Agregamos un identificador único a cada vínculo, para poder colocar la imagen


correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto, para ocultarlo
con CSS:

ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
padding:0;
float:left;

ul li a {
display:block;
width:121px;
height:50px; //Quito el padding, pero le pongo altura.
text-decoration:none;
}
ul li a:hover {
background-position:bottom;
}
ul li a span {
display:none; //Oculto el texto.
}
#inicio {
background-image:url(images/inicio.png);
}
#acerca {
background-image:url(images/acerca.png);
}
#contacto {
background-image:url(images/contacto.png);
}

Por ahora es todo, a disfrutar y a hacer las respectivas pruebas.

Cómo eliminar márgenes de impresión de


una página web con CSS
Por jimmylagp el 22 de Abril de 2011 con 3,546 visitas.
HTML, CSS y Javascript Otros tutoriales por jimmylagp.

Tenía que imprimir una nota de remisión para una aplicación web que hice pero
necesitábamos aprovechar la hoja tamaño carta al 100% para no desperdiciar. Intentamos
imprimir desde el navegador pero por defecto el navegador deja 2cm aproximadamente de
margen.

Opte por hacer la nota en Flash, pero aun así deja 1cm de margen, entonces investigando
mucho, encontre una opción en CSS que manipula el margen de impresión.

Definir que los estilos CSS del documento html es para


impresión

Hay 2 maneras de decirle a el navegador que se aplicaran estilos de impresión, enlazando el


archivo de CSS o directo en el documento HTML.

Código :

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


media="print" />

De esta manera enlazamos el archivo de CSS pero le decimos que son estilos para
impresión de la pagina web.

Ahora veamos como seria directo en el HTML.

Código :

<style type="text/css" media="print"></style>

Es algo sencillo, no es nada de magia ni nada avanzado, solo es un atributo mas de la


etiqueta STYLE al igual que la etiqueta LINK.
Manipular los margenes de impresión con CSS

Hay una opción para manipular el margen de una pagina, es algo tan sencillo de usar y que
casi nadie he visto que hable de ella, una sintaxis que me salvo de una frustración tan
grande, en Google Docs cuando haces un documento, si modificas los margenes o sangrias
a 0cm y previsualizas la impresión, los margenes si los respeta con 0cm.

Para lograrlo es muy facil, solo sigan este ejemplo:

Código :

<style type="text/css" media="print">


@page{
margin: 0;
}
</style>

Es algo tan simple, con esas 3 lineas de código, ahora podemos manipular la pagina de
impresión.

Nota: En Firefox 4 no aplica esta propiedad y mantiene con margenes por defecto, en IE9
no lo probe por que uso Mac, en los demás navegadores si lo aplica.

También recuerda leer el curso de CSS3 de Cristalab.

También podría gustarte