• Artisteer
• Quanta Plus
• Simple CSS

.elemento_semitransparente {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}

Los imprescindibles:
* opacity: Regla estándar válida en CSS3. Funciona en Firefox, Safari, y Opera.
* filter:alpha: Para que funcione en Internet Explorer.

Los “por si acaso”:
* -moz-opacity: Para antiguas versiones de Mozilla como Netscape.
* -khtml-opacity: Para antiguas versiones de Safari.

Los valores numéricos obviamente permiten el rango, según el caso, de 0 a 1, o de 0 a 100, para variar el nivel de transparencia.

Transparencia de un color:

.elemento_semitransparente {
background: rgba(200, 54, 54, 0.5);
}

Las 3 primeras cifras definen el color, y la cuarta el grado de transparencia. La principal diferencia con el método anterior es que así la propiedad de transparencia no se transmite a los elementos “hijo” (children). Funciona en Firefox3, Safari, y Google Chrome, y falla en Internet Explorer y Opera.

Para que funcione en IE:
<!--[if IE]>
<style type="text/css">
.elemento_semitransparente {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->

< ![endif]-->

En cualquiera de los casos, aunque te quede “chulo”, olvídate de validar.

CSS Transparency Settings for All Browsers | CSS-Tricks
RGBa Browser Support | CSS-Tricks

1. Browsershots
2. IE NetRenderer
3. IETester
4. Xenocode Browser Sandbox
5. ies4osx
6. Firebug Lite
7. iPhoney
8. BrowsrCamp
9. Selenium
10. IE App Compat VHD

• Internet Explorer Collection
• TestiPhone.com
• Lynx Viewer

1. FavIcon from Pics
2. favicon.cc
3. Dynamic Drive
4. favikon
5. Genfavicon
6. DeGraeve.com
7. Online fav-icon creator
8. Favicon Generator
9. Favicon.co.uk
10. Favicon Generator

• Antifavicon.com
• Graphicsguru
• 256 Pixels

• Free Website Templates
• Six Shooter Media
• Free CSS

1. AddThis
2. ShareThis
3. Social Marker
4. AddToAny
5. Social Poster
6. Tell-a-Friend
7. 3spots: 30 Social Bookmarks ‘Add to’ footer links for blogs
8. mooSocialize
9. Social Bookmarks Creator
10. Badged.net

• Ultimate How-To: Social Media Buttons, Tools and Badges Resource | 10e20
• iBegin Share
• Social Bookmark Scripts and Widgets

1. BgPatterns.com
2. Stripe Generator
3. Background Image Maker
4. Stripemania
5. bgMaker
6. PatternCooler
7. Tartan Designer
8. Gradient Image Maker
9. Repper
10. Striped Backgrounds

• Dotted Background Generator
• tile machine 1.0
• repeatXY
• COLOURlovers

1. Ajaxload
2. Brilliant Button Maker
3. Buttonator
4. Button Maker
5. Web 2.0 Badges
6. E-Mail Icon Generator
7. My cool button
8. Load Info
9. Preloaders
10. Iconza

• Face your Manga
• Da Button Factory
• MadMenYourself.com

1. Browsershots: Compatibilidad en distintos navegadores.
2. IE NetRenderer: Compatibilidad con IE.
3. The W3C Markup Validation Service: Validación HTML - XHTML.
4. El Servicio de Validación de CSS del W3C: Validación CSS.
5. Web Page Analyzer: Velocidad de carga.
6. Check My Colours: Constraste de colores.
7. WAVE: Accesibilidad.
8. ready.mobi. Visualización en móviles.
9. ViewLikeUs: Resoluciones de pantalla.
10. UITest.com: Varios.

1. Get Satisfaction
2. UserVoice
3. fivesecondtest
4. Kampyle
5. IdeaScale
6. Concept Feedback
7. Fine Tuna
8. CrowdSound
9. Usabilla
10. ReviewBasics

• HTML forms
• Please Critique Me
• Feedback Form Wizard

1. Spiffy Corners
2. Nifty Corners Cube
3. RoundedCornr
4. CurvyCorners
5. CSS Speech Bubbles
6. Cornershop
7. RoundPic
8. Spiffy Box
9. The ThrashBox™
10. CSS Rounded Box Generator

• JQuery Corner
• ShadedBorder
• Even More Rounded Corners Using CSS

1. typeface.js
2. swfIR
3. sIFR
4. cufón
5. Facelift Image Replacement
6. Revised Image Replacement
7. jQuery sIFR Plugin
8. Dynamic Text Replacement
9. Font Burner
10. Fonts available for @font-face embedding

• TypeSelect
• FontJazz
• sIFR Generator

1. Dafont.com
2. UrbanFonts.com
3. Better Fonts
4. 1001 Free Fonts
5. Font Squirrel
6. Search Free Fonts
7. Fonts 500
8. Fawnt
9. Abstract Fonts
10. 1001 Fonts .com

• Fontspace.com
• Fontex
• Fonts | Smashing Magazine

1. Lightbox
2. LightWindow
3. Scrollable
4. Flickrshow
5. SmoothGallery
6. phatfusion
7. Galleria
8. Slideshow
9. CrossSlide
10. jCarousel

• InnerFade
• Highslide
• Easy Slider

1. CSS Menu Maker
2. CSS Sprite Generator
3. CSS Tab Designer
4. IzzyMenu
5. CSS Menu Builder
6. My CSS Menu
7. Tabs Generator
8. List-O-Matic
9. TabCreatr
10. QuickMenu

• Pure CSS Menu
• Multi-level Navigation CSS Generator
• Dropdown Menu Generator

1. LogoPond
2. Brands of the World
3. Logo Design Love
4. LogoInstant.com
5. Free Logo
6. LogoLounge.Com
7. Logo Design History
8. Logo Faves
9. LogoSauce
10. Creattica

• Logo Of The Day
• Fonts Used In Logos of Popular Websites
• Wolda

• Pixel Perfect (Firebug)
• Firefinder (Firebug)
• Page Speed Home (Firebug)

• Unmatchedstyle.com
• Most Inspired
• minimalsites

Después, pretendimos que al principio del título de cada post apareciera un icono muy mono que hemos robado por alguna página:

.titulopost {
background: transparent url(URL_ICONO) no-repeat 0 50%; /**** el icono aparece como fondo del titulo, a la izquierda, y se repite solo una vez ****/
padding-left: 2em; /**** mover un poco a la derecha el titulo para q no pise el icono ****/
}

<h2 class="titulopost"><a href="URL_POST" title="Enlace permanente: TITULO_POST">TITULO_POST</a></h2>

TITULO_POST

Por último, para practicar opciones poco habituales, probamos texto como icono (por ejemplo, quise que los elementos de las listas del menú comenzarán con dos exclamaciones rojas, y acabaran con puntos suspensivos grises)

#menu ul li:before{
content:"!! ";
color: red;
}
#menu ul li:after{
content:" ...";
color:grey;
}

<div id="menu">
<h4>Categorías</h4>
<ul>
<li><a href="URL_CATEGORIA_BLOGS" title="TITULO_CATEGORIA">Blogs</a></li>
<li><a href="URL_CATEGORIA_RSS" title="TITULO_CATEGORIA">RSS</a></li>
</ul>
</div>

Categorías
!! Blogs …
!! RSS …

Alma se basó en:
PNG in Windows IE
IE PNG Fix - TwinHelix

Galerías de imágenes solo con CSS:
Thumbnail Image Gallery, (2), (3).
Stu Nicholls | CSSplay | A simple CSS photo-album
Stu Nicholls | CSSplay | Cross Browser Multi Page Photograph Gallery
Stu Nicholls | CSSplay | CSS Sliding Photograph Gallery
Stu Nicholls | CSSplay | Cross browser CSS slide show
Stu Nicholls | CSSplay | A simple CSS photo-album
SonSpring | Hoverbox Image Gallery
Dynamic Drive CSS Library- CSS Image Gallery
How to Create a Photographic Gallery Using CSS - WebReference.com
Interactive image gallery

Para efectos dinámicos en javascript:
Juglar : Imágenes y Javascript

Los elementos web que soportan teclas de acceso son: a, area, button, input, label, legend, textarea. Y la acción que realice dependerá del tipo de elemento: activar el enlace o la caja de texto, por ejemplo.

Ejemplo:
<form action="..." method="post">
<p>
<label for="autor" id="autor">Nombre</label>
<input type="text" name="autor" accesskey="n" /> (access n)
<label for="correo" id="correo">Mail</label>
<input type="text" name="mail" accesskey="m" /> (access c)
<label for="web" id="web">Web</label>
<input type="text" name="web" accesskey="w" /> (access w)
</p>
</form>

Intenta » Crear teclas de acceso con accesskey

Technorati Tags: accesskey, html, access, key, tips, teclas, juglar103, Juglar

Modo simplificado de representar varias características a la vez (el orden es importante):
font: bold italic small-caps 1em/1.2em arial,sans-serif;

font-family: tipo de fuente.
Variantes principales: Sans-serif (Arial), Serif (Times New Roman), Monospace (Courier New).
Vease ejemplo de visualización de distintas fuentes.

(Imagen de InformIT)

- Serif tiene elementos decorativos en la parte superior e inferior, y sans-serif no. En Monospace cada letra tiene un ancho fijo.
- Si el nombre de la fuente tiene varias palabras, va entre comillas: ‘Times New Roman’.
- A continuación de cada fuente se añade el nombre genérico de la familia: arial, sans-serif.
- Cursive y Fantasy son las otras dos familias pero no se se suelen usar.
- La familia más legible para web es la sans-serif.
- Equivalencias para Mac: Arial - Helvetica, Times New Roman - Times.
- Si observáis diseños profesionales, se suelen exponer una cadena de fuentes de la más concreta hasta la más genérica (incluso las equivalencias en mac) para no dejar nada al azar en la interpretación que da el navegador:
font-family: "Trebuchet MS", arial, helvetica, Sans-serif;

font-size: tamaño de la fuente.
Variantes: medidas absolutas (px), medidas relativas (%, em).

Aunque existen varias formas de indicar el tamaño de la fuente, el método para que se vea de forma similar en distintos navegadores, que el usuario pueda adaptar el tamaño en cualquier navegador, y que se adapte a las distintas resoluciones de pantalla es:
- Fijar en el body el tamaño en porcentaje entre 76 y 100%.
- Y cuando queramos variar el tamaño en contenedores concretos, usar la medida relativa “em”.

body { font-size: 80% }
#titulo { font-size: 1.5em }
.comentario { font-size: 0.9em }

font-style: efecto a la fuente
Variantes principales: normal, italic (cursiva).

font-variant: mostrar todo en mayúsculas, resaltando las mayúsculas iniciales.
Variantes: normal, small-caps.

font-weight: grosor de la fuente.
Variantes principales: normal, bold (negrita).

line-height: altura de la línea.
Variantes: Por lo comentado en el tamaño de la fuente, también es recomendable usar medidas relativas “em”.

Artículos en castellano:
Qué tipo de fuente usar - BlogMundi
Con font todo será más corto. - aNieto2K
Controlando tus fuentes con CSS — yukei.net
Tipo de letra (fuente). CSS. Amaya

Visualizadores de fuentes:
Juglar : Visualización de fuentes
korhoen typeviewer
CSSTYPE
W3C: CSS: fonts
Safe web fonts
Browser News: Font Samples
Code Style: Font sampler
Rich Typography

Technorati tags: fonts, fuentes, css, arial, design, juglar103, Juglar

De todas maneras, aprovecho para comentar las posibilidades que tenemos para poner una caja de búsqueda de términos en nuestro blog. He intentado simplificar al límite el código y que valide. Luego, que cada cual lo personalice como le venga en gana.

Google:
<form method="get" action="http://www.google.com/custom">
<p>
<input type="text" name="q" />
<input type="submit" value="Buscar"/>
<input type="hidden" name="sitesearch" value="juglar103.blogsome.com" />
</p>
</form>

Búsqueda de blogs en Blogger:
<form method="get" action="http://search.blogger.com">
<p>
<input type="text" name="as_q"/>
<input type="hidden" name="bl_url" value="juglar103.blogsome.com" />
<input type="submit" value="Buscar"/>
</p>
</form>

Búsqueda de blogs en Google (la búsqueda es lo mismo que lo anterior, solo cambia la apariencia):
<form method="get" action="http://blogsearch.google.com/blogsearch">
<p>
<input type="text" name="as_q" />
<input type="hidden" name="bl_url" value="juglar103.blogsome.com" />
<input type="submit" value="Buscar" />
</p>
</form>

Una opción “mona” la de Blogbar:

Y, claro, Technorati (instrucciones):

Para terminar, una curiosidad: cómo se pone un texto por defecto en una caja de búsqueda que desaparezca al pinchar en la caja cuando se empieza a escribir:

<input type="text" value="Escriba su consulta..." onfocus="if(this.value=='Escriba su consulta...')this.value=''" />

Otras opciones para poner cajas de búsqueda en tu blog:
PicoSearch
FreeFind
MuseStorm

Customizable Google Free WebSearch and SiteSearch
Add search to any blog
Google blog search searches and excerpts from LiveJournal

Technorati tags: search, busqueda, google, blogger, blogbar, technorati, form, input, blogs, juglar103, Juglar

Technorati tags: tutorial, css, spanish, juglar103, Juglar

Otras herramientas para CSS:
SelectORacle: Traductor al castellano de CSS2 y CSS3.
Em Calculator: Conversor de “px” a “em”.

Otros listados:
ONLINE TOOLS & GENERATORS 02

Sólo CSS sin imágenes:
Rounded Corners Without Images
stu nicholls | snazzy borders
Cool trick: rounded boxes using CSS - and NO images! - GoTutorials Forums
WebEstilo: Esquinas redondeadas sin imagenes
Follow the Arrow

Javascript sin imágenes:
Nifty Corners
More Nifty Corners - Webdesign.HTML.it
Tutorial de Nifty Corners Cube - esquinas redondeadas con CSS y JavaScript
Demo of MochiKit Visual Elements
Editsite.net - Rounded corners
Anti-aliased Nifty Corners - Acko.net - Steven Wittens
Rounded corners without images: A Nifty Corners Inspiration :: Seky
curvyCorners - JavaScript Rounded Corners and more.
Dragon Labs | The Octopus Engine
curvyCorners - Ultimate Rounded Corners.
Transcorners — Cornerus Pride is there *scared*

Javascript con imágenes:
Transparent rounded/custom corners and borders | Lab | 456 Berea Street
TCCB v2 demo page | 456 Berea Street
Alex Sancho : Esquinas personalizadas con javascript

Varias opciones:
Corners - Nested divs revisited
Bords arrondis en XHTML/CSS

Otras esquinas:
Dynamic Drive CSS Library- Curly Corner Container
a.css, esbudellant estàndards » Técnica de Esquinas Personalizadas
How to Add Fluid Borders to Your Boxes with CSS - WebReference.com
JQuery Corner Demo

Generadores automáticos:
Generador de cajas con borde redondeado en CSS
Jalenack’s Complete Rounded Corners Creator
Spiffy Corners
Spiffy Box
Cornershop

Ver también:
CSS Rounded Corners ‘Roundup’ | Smiley Cat Web Design

Editores CSS:
TopStyle Lite
Simple CSS
Balthisar Cascade
Cascade DTP
CSSED
JustStyle CSS Editor
CSSVista

Comparativas:
Genii Software | WebEditors

Sería de agradecer que cada cual aportara sus experiencias con los que haya probado.

fieldset: Agrupa un conjunto de controles.
legend: Da una leyenda al fieldset.
tabindex: Orden que seguirá el cursor por cada caja, dándole a la tecla tabuladora.
label: Cuando hace click sobre el texto, también seleccionas la caja.

Cada input debe tener un id, pero además podemos agrupar mediante classes para modificar mas fácilmente los estilos de las cajas.

Minid.net - Formularios Web
Intenta - Agrupar campos con CSS
Armonía - Formularios y mensajes de error

Enlaces:
World Wide Web Consortium - Wikipedia
World Wide Web Consortium - Oficina Española
Guías Breves de Tecnologías W3C
Traducciones al Castellano

HTML:
W3C HTML
Guía Breve de XHTML
Traducción HTML 4.01
Traducciones XHTML

CSS:
W3C CSS (RSS)
W3C Especificaciones CSS
Guía Breve de CSS
Traducción de la Especificación CSS1
Traducción de la Especificación CSS2

Artículos:
10 Beneficios de Codificar Aplicaciones Web Apegado a Estándares

Todos los formularios van definidos entre las etiquetas <form>, entre las que situaremos las cajas de texto y botones que lo componen.

Atributos de la etiqueta <form>:
action - La acción que realiza el formulario: enviar a un correo electrónico (action=”mailto:correo”) o a un programa (action=”url_programa”)
method - La forma en que se envia el formulario: post o get (normalmente, siempre post).
enctype - El formato de la información que se envía. Se usa en envío a correo electrónico con valor “text/plain” para garantizar la legibilidad de la información.

Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
....
</form>

Y a continuación, los elementos que puede contener un formulario:

Caja de texto corto (los atributos type y name son obligatorios):
<input type="text" name="nombre">

Atributos opcionales:
size=”(nº)” - Tamaño de la caja en número de caracteres.
maxlength=”(nº)” - Tamaño máximo del texto que puede ser tomado por el formulario.
value=”(texto)” - Texto predefinido de la caja.
<input type="text" name="nombre" value="Tu nombre...">

Texto oculto: Se muestra con asteriscos.
<input type="password" name="nombre"/>

Texto largo: Para que el visitante pueda escribir varias líneas, usamos <textarea>, con los atributos rows (nº líneas) y cols (nº columnas).
<textarea name="comentario" rows="3" cols="40"></textarea>

Para darle un contenido predefinido:
<textarea name="comentario" rows="3" cols="40">Escribe tu comentario....</textarea>

Listas de opciones
<select name="archivosmeses">
<option>Enero</option>
<option>Febrero</option>
<option>Marzo</option>
<option>Abril</option>
</select>

Atributos de select:
size: Nº valores mostrados de la lista.
multiple: Permite la selección de varios elementos a la vez. (no recomendable)

<select name="archivosmeses" size="2">

Atributos de option:
selected: Opción elegida por defecto.
<option selected>Marzo</option>

value: Define el valor de la opción que será enviado al programa.
<option value="1">Enero</option>

Botones de radio:
<input type="radio" name="opinion" value="1">A favor
<br>
<input type="radio" name="opinion" value="2">En contra
<br>
<input type="radio" name="opinion" value="3">Indiferente

Con opción preseleccionada:
<input type="radio" name="opinion" value="1" checked>A favor

Cajas de validación:
<input type="checkbox" name="opinion">Estoy de acuerdo

Botón de envío:
<input type="submit" value="Enviar">

Botón de borrado:
<input type="reset" value="Borrar">

Botones normales (que usaremos para otras funciones javascript):
<input type="button" value="Texto del botón">

Tutoriales del HTML de los formularios:
W3C “HTML 4.01 Specification
DesarrolloWeb (he seguido este)
Web Taller
Programación Web
HTMLWeb
HTML Point
WebEstilo
Vitamina Web

Generadores de botones-recuadro:
Blog Flux
Adam Kalsey
LucaZappa.com
Créer des boutons
Pixel Button
eKstreme.com
Dynamic Drive online tools: Button Maker

Generadores de botones elaborados:
glassy buttons
Buttongenerator
Buttonator

Usar CSS en vez de imágenes para hacer botones:
[ws] Inline Buttons (2.0)
The CSS XML / RSS Button
3-d push button effect
Webmaster: CSS Button
Webmaster Libre » Botones simples con CSS
Dynamic Drive CSS Library- 3D CSS buttons
Garbage In, Garbage Out - Simular un enlace con un botón mediante CSS
Garbage In, Garbage Out - Simular un enlace con un botón mediante CSS (versión 2)

Tutoriales:
Cómo crear botones animados .gif

<a href="http://URL_DESTINO" title="DESCRIPCION">TEXTO_ENLACE</a>

Si queremos que un enlace se abra en nueva ventana, añadimos target=”_blank” (vease también Los enlaces abren ventanas):
<a href="http://URL_DESTINO" title="DESCRIPCION" target="_blank">TEXTO_ENLACE</a>

Es en la hoja de estilos dónde especificamos el aspecto que mostrarán:
a:link {…}: Los no visitados.
a:visited {…} Los visitados.
a:active {…}: Los que estamos pulsando.
a:hover {…}: Sobre los que pasamos el ratón.

Por ejemplo, algo típico es plantearnos si queremos que no aparezcan subrayados (en los navegadores suelen mostrarse subrayados por defecto).

a:link {
text-decoration: none;
}

Después de esta introducción, veamos algunas formas de darle un toque especial a los enlaces, en este caso los visitados:

Aunque no todas las webs lo hacen, es importante que los estilos permitan al lector diferenciar claramente los enlaces visitados de los no visitados. El método más lógico es darles diferente color o tonalidad. Pero podemos añadir otros métodos más visuales:

Efecto tachado:
a:visited {
text-decoration: line-through;
}

Ejemplo de enlace tachado

Imagen OK:
a:visited {
padding-right: 12px;
background: url(visitedLink.gif) no-repeat 100% 50%;
}

Ejemplo de enlace con imagen

Texto indicativo (no funciona en IE):

a:visited:after {
content: “(ok!)”;
}

Ejemplo de enlace con texto explicativo (ok!)

Y siguiendo esta línea, lo que uso para enlaces visitados en mis artículos (por Mike Davidson):

.contenidopost a:visited:after {
content: "\00A0\221A";
color: #DB00FF;
}

Ejemplo de enlace visitado √

Más recursos para estilizar enlaces:
The Search for the Missing Link
WP Quicky: #1 [9rules style links page] at Low End Theory
Dynamic Drive CSS Library- Animated link underlines
arc90 lab : tools : Link Thumbnail
CSS Trickery Part 3: Using :hover to affect more than a link » Blog » Komodo Media
Mejora la usabilidad de tus enlaces con CSS - aNieto2K

Intenta - Pseudo-clase :visited
The ways to style visited links

Me quedo (lo desconocía) con que se pueden aplicar estilos sobre un enlace señalando hacia la url del mismo, sin tener que aplicarle un id o class propio. Por ejemplo:

#navegacion li a[href="http://juglar103.blogsome.com/"] {
background: #ccc;
font-weight: bold;
}

Pero como apuntan en el artículo, hay que tener en cuenta que en las versiones actuales de IE aún no funciona.

Documentación:
Web Accessibility Initiative (WAI)
Traducción de los documentos WCAG 1.0
SIDAR
Wiki de la Accesibilidad Web
Accesibilidad en la Web (Parte 1): Generalidades
Accesibilidad en la Web (Parte 2): Tecnologías Auxiliares

Herramientas online para comprobar la accesibilidad de tu web:
Cynthia Says
HiSoftware Web-Based Site Tester
ATRC Web Accessibility Checker
HERA, Revisando la Accesibilidad con Estilo
TAW.Test de accesibilidad web
Accesible - Examinator
WAVE 3.5 Accessibility Tool
Accessibility Valet
WebXACT
Image Analyser
SIDAR: Herramientas.
Google Accessible Search

Extensiones Firefox:
Web Developer Extension (cómo usarlo para comprobar la accesibilidad)

Realizar el diseño de un blog entre todos los visitantes del mismo. Supongo que sería caótico que cualquiera pudiera entrar a editarlo, alguien debería recoger los cambios propuestos. Se me había ocurrido quitar todos los estilos de este blog, o abrir uno para este solo fin, quitar toda la hoja de estilos, dejando solamente la estructura del html (que también iría modificándose), y mediante artículos y comentarios ir recogiendo las sugerencias o debates sobre cada aspecto. Sería interesante observar como cambiaría progresivamente el diseño del blog.

Evidentemente, esta propuesta va dirigida para nosotros, los eternos amateurs.

¿Qué opináis?
¿A cuántos les gustaría participar?

• Texture Warehouse
• Brusheezy
• Textures on deviantART

<h1>Título del blog</h1>

Pero también queremos que el título sea un enlace a la página inicial de nuestro blog:

<h1><a href="http://url_inicio" title="Título del blog">Título del blog</a></h1>

Que suele escribirse con las etiquetas propias de cada CMS (ejemplo Blogsome):

<h1><a href="{$siteurl}" title="{bloginfo show='name'}">{bloginfo show='name'}</a></h1>

Y por último (cómo mínimo) lo englobamos en un bloque que consideramos la cabecera (Como bien indica Marcoss, no es necesario este div si solo va a contener el h1. Su utilidad se ve mejor plasmada si va a englobar más elementos - una descripción, por ejemplo - , o si se requiere para obtener más posibilidades de diseño):

<div id="cabecera">
<h1><a href="{$siteurl}" title="{bloginfo show='name'}">{bloginfo show='name'}</a></h1>
</div>

A partir de este HTML, podemos personalizar título y cabecera a nuestro antojo con CSS con colores, bordes, etc. Por ejemplo:

#cabecera {
padding: 0 0 10px;
border: 1px solid #666;
}
h1 {
margin: 0;
padding: 0px 10px;
font-size: 2.5em;
font-weight: normal;
}
h1 a {
color: #666;
}

Si quisieramos poner una imagen como fondo de la cabecera (teniendo en cuenta los atributos de background):

#cabecera {
background:url("http://url_imagen.png")bottom repeat-x;
}

En Free Web Page Headers podemos encontrar muchas imágenes para cabeceras.

Subiendo un nivel de dificultad, pasaríamos a sustituir el título por una imagen que muestra el título (lo cual ofrece infinitas posibilidades estéticas con un programa de edición de imágenes tipo Photoshop o Gimp, y una escogida colección de fuentes). Es la llamada técnica de reemplazo de textos, por ejemplo:

h1 {
background: url("http://url_imagen.png") no-repeat;
height: ?px; /* altura de la imagen */
text-indent: -9999px;
}
h1 a {
display: block;
}

Aunque también existe opción con javascript: Personaliza el titulo de tu sitio con javascript.

<div id="cabecera" onclick="window.location='http://www.stanmx.com/';" title="Título del blog">
<h1><span>Titulo del blog</span></h1>
</div>

h1{
background: transparent url("http://url_imagen.png") no-repeat top;
width: ?px;
height: ?px;
}
h1 span {
display:none;
}

Aunque hay que advertir que estas dos opciones presentan problemas de accesibilidad cuando no es muestran las imágenes o no funciona javascript, respectivamente.

CSS Lab » Cambiando la apariencia
A List Apart: Alternative Style: Working With Alternate Style Sheets
A List Apart: Invasion of the Body Switchers
CssCreator User Preference Script
Styleswitcher Dropdown
Adactio: Jeremy Keith
24 ways: Introducing UDASSS!
EstadoBeta - Cambio de contraste con Javascript y CSS
Intenta - Crear un “style switcher” o alternador de estilos
Particletree » Dynamic CSS Changes
Mike’s Experiments: PHP: Style Changer

En la hoja de estilos, deberíamos definir los tamaños de las fuentes (font-size) mediante unidades relativas (em, %), en vez de fijas (px, pt), si queremos que sean los usuarios los que puedan modificar el tamaño del texto a su antojo, mediante las funciones que para esta casuística disponen los navegadores. Por defecto, los navegadores suelen desplegar 16px.

Esta postura es la defiende uno de los principios de la accesibilidad:
“3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.”

Ejemplos de funciones para modificar el tamaño del texto en navegadores:
- Firefox (versión 1.5.0.2): Herramientas - Opciones - Contenido - Tipografía
- Internet Explorer (versión 6.0): Ver - Tamaño de texto

La otra postura sería definir unas medidas fijas para las fuentes y permitir que el usuario pueda agrandar o disminuir el tamaño del texto pero desde funciones javascript predeterminadas en el diseño de la web (mediante botones, por ejemplo). Podría decirse que es la opción elegida por los que tienen un especial interés por controlar cómo se visualiza su diseño.

Para implementar botones que cambien el tamaño del texto:
Cambiar el tamaño de letra dinámicamente » Sentido Web
A List Apart: Power To The People: Relative Font Sizes
Zoom Zoom Zoom | Delta Tango Bravo
NoFunc · Dynamic Fonts
Aumentar el tamaño de un texto con Javascript en Intenta

Vease otra reflexión: Úsalo » Botones para cambiar el tamaño de letra

Útil:
A List Apart: Articles: Text-Resize Detection

- Nombres de colores: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow.
- Valores RGB: por porcentajes “color: rgb(100%,80%,60%)“, o por números entre 0 y 255 “color: rgb(255,0,0)“.
- Valores hexadecimales: “color: #ff0000“. Pueden abreviarse cuando sus valores se repiten para cada par “color: #f00“.
- Colores web-safe: su visualización será la misma en diferentes navegadores. Se obtienen mediante incrementos del 20% o 51 unidades en RGB, o 33 unidades en hexadecimal “rgb(40%,100%,80%), rgb(0,204,153) o #669933“.

Herramientas online:

Representaciones de todos los colores:
4096 Color Wheel Version 2.1
24
List of colors

Conversión de un color a web-safe:
Convert Colors to Web-Safe Alternative

Conversión RGB - Hex:
Convert RGB - HEX colors

Texto sobre fondo para observar si proveen buena visibilidad:
Color Text on Background
ZSPC Super Color Chart
Websafe Colorizer
Colour Contrast Check - snook.ca
Color Wheel
Spin the Color Wheel
Check My Colours
GrayBit

Colores para un layout:
The Man In Blue

Colores transición de un color a otro:
Color Blender
slayeroffice | tools | color palette creator v1.6.1
Color Mixer

Armonías entre colores - generadores de combinaciones de colores:
Color Calculator
Color Scheme Generator
Color Schemer
ColorMixers
ColorBlender.com
Infohound Color Schemer
HTML Color Code Combination Chooser
The Flash Color Schemer
colormatch redux
Steel dolphin Creative - Color Scheme tool
ColorJack
The Color Wizard

Extraer los colores de una imagen:
colr.org
Color Palette Generator
Instant Color Schemes: Por resultados de búsqueda de un término en Yahoo Images.
Pictaculous

Extraer los colores de una web:
Red Alt - I Like Your Colors

Galerías de combinaciones de colores:
ColorCombos.com
ColourLovers
Return of Design
Netcocktail
Color combinations
Color Schemer (por tags)
Daily Color Scheme
kuler
Color palettes | Smashing Magazine
Colors on the Web

Extensiones Firefox:
ColorZilla (totalmente imprescindible)

Software:
Anry Color Picker
Color Cop

Por revisar:
ColoRotate
Color Explorer
kuler
Color Scheme Designer

(Iba a hacer una lista, pero José Luis ya unificó todo lo unificable. Para qué repetir.)

Tablas sobre propiedades y los navegadores que las reconocen:
centricle : css filters (css hacks)
CSS3 Tests: Compatibility Tables
QuirksMode - CSS
CSS Reference
Web browser standards support
RichInStyle.com - CSS support table

Visión de una web en distintos navegadores:
Browsershots
AnyBrowser.COM
Lynx Viewer
BrowsrCamp

Utilidades:
CSS Selectors testsuite: Comprobar directamente qué selectores soporta tu navegador.

Artículos:
Bitácora de Webmaster » Compatibilizar IE y MOZILLA
Webmaster Libre » Creando un CSS compatible con todos los navegadores ¡y válido!
5 ways to make your CSS behave in IE | Hiveminds Magazine

1.- Tenemos un menú en forma de lista, tal que así:
<ul id="navheader">
<li id="home"><a href="#" title="Home">Home</a></li>
<li id="portfolio"><a href="#" title="Portfolio">Portfolio</a></li>
<li id="methodology"><a href="#" title="Methodology">Methodology</a></li>
<li id="prices"><a href="#" title="Prices">Prices</a></li>
<li id="contact"><a href="#" title="Contact">Contact</a></li>
</ul>

2.- Archivo javascript a guardar en nuestro servidor:
/******************************************************
Focus Slide
version 1.0
last revision: 12.17.2004
steve@slayeroffice.com
Should you improve upon or
modify this code, please let me know
so that I can update the version hosted
at slayeroffice.
PLEASE LEAVE THIS NOTICE INTACT!
******************************************************/
window.onload = init;
var d=document; // shortcut reference to the document object
var activeLI = 0; // the currently "active" list element - value represents its index in the liObj array
var zInterval = null; // interval variable
var SLIDE_STEP = 10; // how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 80; // the width of the sliding div. used to calculate its left based on the width and left of the active LI element
function init() {
// bail out if this is an older browser or Opera which gets the offsets wrong
// the opera issue is fixable by subtracting the container UL's width from the offsetLefts...but I dont care enough to do it
// this does NOT break opera, it just wont get the sliding thing
if(!document.getElementById || window.opera)return;
// create references to the LI's
mObj = d.getElementById("navheader");
liObj = mObj.getElementsByTagName("li");
// set up the mouse over events
for(i=0;i
liObj[i].xid = i;
liObj[i].onmouseover = function() { initSlide(this.xid); }
}
// create the slider object
slideObj = mObj.appendChild(d.createElement("div"));
slideObj.id = "slider";
// position the slider over the first LI
x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
y = liObj[activeLI].offsetTop-3;
slideObj.style.top = y + "px";
slideObj.style.left = x + "px";
}
function initSlide(objIndex) {
// return if the user is mousing over the currently active LI
if(objIndex == activeLI)return;
// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
clearInterval(zInterval);
// set the active list item to the object index argument
activeLI = objIndex;
// figure out the destination for the sliding div element
destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
// start the interval
intervalMethod = function() { doSlide(destinationX); }
zInterval = setInterval(intervalMethod,10);
}
function doSlide(dX) {
// get the current left of the sliding div
x = slideObj.offsetLeft;
if(x+SLIDE_STEP // div is less than its destination, move it to the right
x+=SLIDE_STEP;
slideObj.style.left = x + "px";
} else if (x-SLIDE_STEP>dX) {
// div is more than its destination, move to the left
x-=SLIDE_STEP;
slideObj.style.left = x + “px”;
} else {
// div is within the boundaries of its destination. put it where its supposed to be
// and clear the interval
slideObj.style.left = dX + “px”;
clearInterval(zInterval);
zInterval = null;
}
}

(En servicios de alojamiento gratuítos (como el mío, Blogsome), que no permiten almacenar archivos javascript pero sí imágenes, podemos subirlos cambiando la extensión al archivo (.js por .jpg).)

3.- Código CSS para incluir en nuestra hoja de estilos, fácilmente personalizable:
/*-----------
www.sgclark.com
Stephen Clark
Mini-Slide Navigation - www.sgclark.com/sandbox/minislide
Last Updated: 1/28/2006
Inspired by Simplebits MiniTab Nav, and SlayerOffice Focus Slide Nav
------------*/
#navheader {
position:relative;
margin:0 auto;
width:100%;
height:18px;
border-top:1px solid #fff;
border-bottom:1px solid #78919B;
background-color:#ffffff;
padding:6px 0 0 0;
z-index:0;
}
#navheader li {
position:relative;
display:inline;
font:10px verdana;
padding:0;
z-index:20;
display : block;
float : left;
}
#navheader li a {
text-decoration:none;
color:#000000;
display : block;
text-align : center;
width : 80px;
}
#navheader li a:hover {
text-decoration:none;
color:#999999;
cursor: hand;
}
#slider {
position:absolute;
border-bottom:5px solid #78919B;
width:80px;
height:16px;
margin:0 2px 0 2px 0;
z-index:2;
margin-left : 5px;
}
/*---- Navigation Page Indicators ----*/
body#minislide li#home {
border-bottom: 5px solid #cccccc;
color:#999999;
height:13px;
width:80px;
z-index:1;
}

4.- Finalmente, introducir en la plantilla (entre los head) la llamada al archivo javascript que hemos guardado en el servidor:
<script type="text/javascript" src="/scripts/focus_slide.js"></script>

Técnica general:
body {
text-align: center; /* ordena centrar todos los elementos de la página */
min-width: 600px; /* previene errores en ventanas estrechas de Mozilla */
}
#bloquecentrado { /* cuerpo principal de la página, lo suelen llamar rap o wrap*/
margin:0 auto; /* centra horizontalmente en todos navegadores menos IE*/
text-align: left; /* alinea a la izda todo; solo bloquegeneral estará centrado */
width:600px; /* anchura deseada para el bloque */
}

Margen negativo:
#bloquecentrado {
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-266px; /* (500+15x2+1x2)/2 */
padding:15px;
border:1px dashed #333;
}

Porcentajes
#bloquecentrado {
position: absolute;
width: 60%;
height: 30%;
left: 20%;
top: 35%;
}

Encontrarán los enlaces a todas las webs en:
del.icio.us/juglar103/inspiration

También he creado un archivo con todos los archivos de dichas páginas. En la inmensa mayoría no se permite su uso público, pero creo que constituye una buena herramienta de aprendizaje personal.

Descarga: design2005.zip.

Almost Spring

Templates

No?

1. A List Apart: CSS Drop Shadows
2. ShadedBorder
3. CSS drop shadow
4. yDSF - Robust CSS Drop Shadows
5. A List Apart: CSS Drop Shadows II
6. A List Apart: Onion Skinned Drop Shadows
7. wg:Fun with Drop Shadows
8. Drop Shadow Examples
9. CSS Mojo: Adding Polish To Your Pages
10. Drop Shadow CSS

• Create a Letterpress Effect with CSS Text-Shadow
• Text-Shadow Exposed › Kremalicious
• Lurking in Shadows

Caracteres HTML:
maratz.com: UTF-8 entities
moon_aka_sun: HTML Character Entities
XHTML Character Entity Reference
HTML XHTML Entities
Transformación de texto con acentos, ñ, ç, etc al mismo texto con htmlentities
Encode HTML Entities
A Simple Character Entity Chart | evolt.org
Unicode Charts Panel

CSS:
Guía de Referencia Rápida CSS 2.1
Meyerweb.com CSS1
Meyerweb.com CSS2
CSS2 Test Suite
CSS Reference | Stylegala
CSS Properties
Cascading Style Cheatsheet
CSS Reference Table
Referência visual de propriedades do CSS 2 [ Infografia ]
CSS Cheat Sheet - CSS - ILoveJackDaniels.com
CSS Cheat Sheet
Quick Lookup
Properties : CSS 2.1 Reference : Cultured Code
CSS Reference

Varios lenguajes:
gotAPI.com
DevGuru Technologies
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby… | Web-Tools

Ver también:
Intenta - Fadomatic: jugando con la opacidad de elementos
Mandarin Design: CSS Opacity and Transparency
Transparencias en Firefox, Opera, IE,… | aNieto2K
Easy cross-browser transparency | Bite Size Standards
Transparencia con CSS en Intenta
Dynamic Drive CSS Library- Highlight image hover effect (opacity or borderize)
CSSLab » Transparencias a prueba de browsers

CSS Transparency for IE and Mozilla, Firebird and Firefox
CSS2 - opacity
stu nicholls | CSS opacity

Para instalarlo, basta con arrastrar el enlace que lo contiene (en este artículo los pongo en negrita) hasta la barra de tu navegador.

GmailThis (vía Genbeta): Facilita el envío de un correo desde Gmail, con enlaces y textos de la web en la que estás.

Busca en la wikipedia (vía X-Blog): Para buscar en la wikipedia.

Go to Referrer (vía Jesse Ruderman): Vuelve a la página desde la que llegaste a la presente.

Google Search (vía MineZone Blog)

del.icio.us linkbacks (vía Lifehacker): Muestra en una ventana los usuarios delicious, las descripciones y las etiquetas que han asignado a esa web.

Elevator Up (vía blogpocket): Subir un nivel en el dominio de la web que estás leyendo.

Diccionario de la Real Academia de la Lengua Española (vía Avalúo)

blummy: Visualización más agradable de tus bookmarklets, que puedes importar a otros ordenadores.

OnlyWire: Para enviar tus marcadores a varios servicios a la vez.

Enfocados a desarrollo web:

EditCSS (vía Matthew Schinckel): Despliega en un editor de texto el CSS de la página que estás viendo, pudiendo modificarlo y observar el efectos de los cambios inmediatamente.

Resize (vía coda.coza): Redimensiona la ventana del navegador a los parámetros que indiques.

MODIv2 (Mouseover DOM Inpsector)

CSS Debug Toggle (web)

Favelet Suite (web)

[liorean@web-graphics.com]

Bookmarklet Generator for Searches

Listados de bookmarklets:
Jesse’s Bookmarklets Site
Pixy: Let’s Favelets
Tantek - Favelets
Accessibility-checking favelets
web BM’s
ALL THE BOOKMARKLETS!

Muchos servicios ofrecen esta técnica para facilitarle el trabajo a sus usuarios. Así, Bloglines tiene sus imprescindibles botones de suscripción fácil, WordPress ofrece su edición rápida, y del.icio.us ya comenté que desplegaba grandes posibilidades.

Ver también: Herramientas para solucionar problemas CSS

CSS:
Servicio de Validación de CSS del W3C
CSSCheck: Validación CSS.
CSS Analyser: Análisis de CSS.

Accesibilidad

Análisis global:
WebXACT
Site Check - Web Site Test Tool
Web Page Reports
Craig Cecil
AboutUrl.com
Total Validator Service

Enlaces rotos:
W3C Link Checker
Link Valet
Links-Rotos.com
Link Valet

Posicionamiento

Feeds:
RSS Validator
Feed Validator
W3C Feed Validation Service, for Atom and RSS

Tiempo de carga:
Web Page Analyzer:
Loading time checker
MonitoreoInternet.com - Chequeo Sitio Web
Website Goodies - Website Speed Test
Website Speed Test

Visión según tamaño de la pantalla:
Screen Size Tester

Otros:
Readability Test: Legibilidad.

UITest.com

Pop-up:
Cool CSS Image Pop-up
stu nicholls | CSS PLaY | css dynamic image magnifier
Dynamic Drive CSS Library- CSS Popup Image Viewer

Otros:
CollyLogic Scroll-Fade
CSS: Using a list item to create a star rater
Experiments with wide images | clagnut/sandbox
Liquid Image
Intenta - Distintos bordes de imagen con CSS

Verticalmente:
W3C: Centrar un bloque
hicksdesign: vertical centering with CSS
badboy.media.design: Vertical align with CSS
Vertical centering using CSS
Vertically Align Content in Body
Vertical centering
Vertical center
Webmaster Libre » Centrado con CSS (2): Vertical
ex animo: Vertical Centering with a Floated Shim
CSSLab » Centrado Vertical con CSS
Vertical Centering in CSS
In the Woods - Vertical Centering With CSS

Horizontal y verticalmente:
hicksdesign: vertical & horizontal centering 2
456 Berea Street: Horizontal and vertical centering with CSS
Victoria’s Vertical Centering
Alsacreations, centering a site and/or a div using CSS
Dead Centre
Centering (horizontally and vertically) an image in a box
shrink_to_fit and center
CSS Lab » Posicionando un objeto en el centro
Vertically and Horizontally Centering a DIV
Infected-FX » Contenido Centrado

Generadores automáticos de layouts:
Firdamatic
Layout-o-matic
CSS Creator
CSS Stuff
Stylepicker stylesheet picker
XHTML Semantic Generator
Markup Maker

Tutoriales y artículos:
Tutorial de posicionamiento y layout en CSS || Cristalab
Geekipollas » Solución a las Columnas en CSS
Liquid layouts using CSS - the joy, the pain, the tears
Progressive Layout | Web Design | PRO.HTML.IT
A List Apart: Articles: In Search of the Holy Grail
CollyLogic: Redesign Notes 1: Width-based layout
Drop Column Layout | Muffin Research Labs
Componer un diseño de 3 columnas en XHTML y CSS + Cristalab
Learn CSS Positioning in Ten Steps
CSSLab » Layout Fijo: resucitando los frames
CSSLab » Layout fijo a elástico en sólo 4 caracteres
Create a simple liquid layout - .net magazine
A List Apart: Switchy McLayout: An Adaptive Layout Technique
el plan seldon — Hasta siempre, clear:both
EstadoBeta » Despejando Floats para IE7

Atributos:
datetime = Especifica la fecha y la hora en que se hizo el cambio.
cite = Específica la URL que explica por qué se modificó un documento.

En WordPress, estas etiquetas están en el menú de redactar un post, con el atributo datetime. Y se muestra así:

<ins datetime="2005-08-12T16:59:55-02:00">Texto escrito posteriormente</ins>
Texto escrito posteriormente

<del datetime="2005-08-12T16:59:55-02:00">Texto borrado posteriormente</del>
Texto borrado posteriormente

Podríamos modificar el estilo:

ins {
text-decoration: none;
border-bottom: 1px dotted;
}

Pero aún más interesante es que aparezca siempre la palabra Actualización sin que tengamos que escribirla:

ins:after {
content: “(Actualización)”;
}

Anotación de cambios en los documentos: los elementos INS y DEL
wordlog.com: Styling and using the <ins> tag

img.right {
float: right;
margin: 3px 0px 20px 20px;
display: block;
}

<img src="URLIMAGEN" class="right" /> El texto del post...

Poner un marco, agregando una clase adicional:

img.borderimg {
padding: 1px;
border: 1px solid #ccc;
}

<img src="URLIMAGEN" class="right borderimg" />

Minid.net: Cómo flotar imágenes en un post

Abreviaturas:
Alternative Abbreviations Demo

Barra separadora <hr>:
CSS Workshop - Styling <hr>.
ervdesign » Separadores, también tienen estilo

Pie de página:
Exploring Footers: A List Apart
footerStick - solarDreamStudios (footerStickAlt).
CSSLab » ¡Aaaaabajo!
Webmaster Libre » Mantén ese Footer en su sitio

Efecto hover:
CSS element hover effect
li:hover ele { display:block }
CSS Popups with Auto Absolute Positioning
Absolutely Positioned Pure CSS PopUps
CSS PopUps
Block Hover Effect for a List of Links
How to Create a Block Hover Effect for a List of Links | Smiley Cat Web Design

Cursor:
Tryit Editor v1.4
CSS Cursors - testcase for bug 163174

Citas - blockquotes:
blogpocket 5.0 » Cómo adornar las citas de blockquotes
Pullquotes with CSS

Scroll - Frames:
Textscroll
Alsacreations, avoid frames and iframes with CSS
Intenta - Div con scroll

Texto:
Técnica CSS para textos | Vidablog

Zoom:
Zoom layouts (Joe Clark: Media Access)

Fechas:
Hot Dates with CSS by Christian Montoya

Imágenes:
LITERARYMOOSE.INFO: AntiDeveloper Gallery (with shadows)
LITERARYMOOSE.INFO: Image Preload via Head Objects
LITERARYMOOSE.INFO: Technicolor Darkroom
Preloaded CSS Rollovers - redmelon.net
AC Log: Zebreado con CSS
Simple CSS Image Switcher

<html>
<head>
<title>Título de la página</title>
<meta http-equiv = “refresh”
content = ” 3; url = http://PÁGINADESTINO ” >
</meta>
</head>

<body>
...
</body>
</html>

Ver también:
yukei.net › Redirigir un dominio
Intenta - Redireccionamiento con cuenta atrás

La Taberna del Turco

css
Estilizando formularios
Picment.com; Fun with forms customized input elements
Stylin’ Forms
Styling even more form controls | 456 Berea Street
Stylish Buttons - WebReference.com
WebDevTips - Applying CSS to forms
The Man in Blue > Styling Form Widgets
UK Thoughts | CSS submit buttons
CSS2 - Tableless forms
Styling Form Fieldsets, Legends and Labels
Style Web Forms Using CSS [CSS Tutorials]
Editsite.net - Create
stu nicholls | CSS PLaY | CSS styling of forms
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
WebEstilo: Formularios y css
CSS Buttons [Sophie’s maze]
Botones: Distintas formas de enviar un formulario » Sentido Web
Dynamic Drive CSS Library- Stylish submit buttons
Styling Checkbox and Radio Graphics With Only CSS
A List Apart: Articles: Prettier Accessible Forms
Styling form fields | published @ aplus moments
Skyrocket Concepts » Blog Archive » Semantic horizontal Forms
A CSS-based Form Template
Styling form controls with CSS, revisited | 456 Berea Street
Tip: Resaltar el campo activo de un formulario « Intenta
CSS image replacement for submit buttons

js
badboy.media.design : Niceforms
slayeroffice | code | custom checkbox
Ryan Brill | Form Highlighting Redux
Trimming form fields | And all that Malarkey
Bitácora de Webmaster » Mandar un Formulario con un Enlace
Intenta - Seleccionar todo en un textarea
Script.aculo.us Select Box
Agave Group » Blog Archive » (Functional) Pretty Forms
CRIR: Checkbox Radio Input Replacement
Niceforms 1.0 :: badboy.media.design
Form Validation Widgets Demo

Herramienta online para formulario:
[Qindex online tool] Styling Forms
Free HTML Form Editor - formArchitect
JotForm
Wufoo · Making forms easy + fast + fun.
Web Form Factory
FormLogix
Icebrrg
Accessible form builder - Accessify
EmailMe Form
FormSpring

The Form Assembly
Intenta - Formularios

#header {
position: fixed;
top: 0;
left: 0;
}

Pero no es efectivo en Internet Explorer. Una solución que no pase por códigos propietarios sería:

body {
overflow: hidden;
}

#contenido {
height: 100%;
overflow: auto;
}

#menu {
overflow: auto;
position: absolute;
top: 0;
left: 0;
}

Así quedarían fijos todos los elementos absolutamente posicionados (en el ejemplo, el div menu) que se encontraran fuera del div contenido:

<body>

<div id="contenido">
…
</div>

<div id="menu">
…
</div>

</body>

Fixed Positioning for Windows Internet Explore

La técnica consiste en escribir un texto en HTML, esconderlo usando CSS, y reemplazarlo por una imagen de fondo que muestre dicho texto. El reto está en no perder accesibilidad ni posicionamiento.

Solución 1:

<h1><img src="imagen-titulo.gif" alt="Titulo" /></h1>

Desventaja: Los buscadores no dan tanta importancia al texto “alt” como al texto real.

Solución 2:

<h1>Titulo</h1>

h1 {
background: url(imagen-titulo.gif) no-repeat;
height: ?px; /* altura de la imagen */
text-indent: -9999px;
}

Desventaja: los usuarios que vean la web sin imágenes, tampoco verán el texto.

Solución 3: Fahrner Image Replacement (FIR)

<h1><span>Titulo</span></h1>

h1 {
background: url(imagen-titulo.gif) no-repeat;
height: ?px;
}

h1 span {
display:none
}

Desventaja: si el usuario no puede ver imágenes, tampoco verá un texto alternativo.

Solución 4:

<h1 title="Titulo">Titulo<span></span></h1>

h1 {
height: ?px;
position:relative;
overflow:hidden;
}

h1 span {
position:absolute; left:0; top:0; z-index:1;
height:?px;
background: url(imagen-titulo.gif) no-repeat;
}

Solución 5: Sin span.

<h1>Titulo</h1>

h1 {
padding-top: ?px;
background: url(imagen-titulo.gif) no-repeat;
overflow: hidden;
height: ?px;
voice-family: "\"}\"";
voice-family:inherit;
height: 0;
}

WebCredible: Ten CSS tricks you may not know
[ws] Replacing Text By An Image
Stopdesign | Using Background-Image to Replace Text
mezzoblue: revised image replacement
Image Replacement—No Span

Ver también:
Diseñorama :Tutoriales:Manual sIFR, paso a paso
Geekipollas » Sustituyendo texto por imágenes con CSS
Thierry Image Placement
Access Matters: Quiz 1.1.4: Image Replacement Techniques
A List Apart: Articles: Facts and Opinion About Fahrner Image Replacement
mezzoblue: Image Replacement. Again.
Khmerang.com - CSS-Technique: Worn Type
Diseñorama : Reemplazo de textos - una comparación
iIR: img Image Replacement
wg:Single Image Multi Replacement
Multi color sIFR 2.0.1
Reemplazo accesible de textos por imágenes - Armonía | En definitiva…
Diseñorama: Reemplazo de textos – una comparación
CSSLab » Image Replacement o cómo reemplazar contenido por imagen

Galerías de templates:
francey.org
Steve’s Free Website Templates
WebDesignHelper.co.uk
Migraine Designs
CSS Fill
Joshuaink: Templates
Quixotic Pixels
T&S Plates
colorizedpixels.com
PageKits
Groovy Lizard Ltd
soulkarma
By Dezign
Authentic Boredom
Karysima
Ruthsarian Layouts
Dzinelabs.com
Ruthsarian Layouts
TemplatesBox.com
Free Web Templates and Layouts
Open Web Design - Home /\^/\
inoxfire.com
Pretty as a Picture
FarCry - Mollio
Solucija
andreasviklund.com
pootato.org
CSS Design Templates
Open Source Templates
Free Css Templates
MasterTemplates
Free Layouts.com
Six Shooter Media - Free Templates
TemplateWorld - FREE Website Templates
Zero Dollar Templates
Ginger Ninja! - Templates

Directorio:
Blogs.Designerz.com

Generadores de plantillas:
Template: CSS
Eris’ Template Generator
templatr - Template Generator

Orientados a CMS’s:
not (that) ugly
Neil’s Weblog Templates
Blogstyles
glnml
ExpressionEngine | pMachine
MovableType Template
MovableStyle.com
Pannasmontata Templates
Plantillas para WordPress
Plantillas para Blogger

HTML:

<p id="email">E-mail:</p>

CSS:

#email:after {
content: " juglar103\40gmail.com";
}

El caracter \40 se muestra como @, pero los robots no podrán leerlo.

Enlaces de interés:
Dynamic Drive Email Riddler
Advanced Email Link Generator with Anti-Spam Encoder
Iconico - Online Email Protector
Enlaza tu email sin miedo al spam » Sentido Web
Safe Mail
Evitando el spam (II) - Memorias de un geek

Hiding email address from spambots

#box {
width: 100px;
border: 5px;
padding: 20px;
}

<div id="box">...</div>

La anchura total de la caja será 150px (100px + 5px*2 + 20px*2) en todos los navegadores excepto en versiones anteriores a IE 6, donde será 100px incluyendo dentro paddings y bordes.

Soluciones:

1.-Box Model Hack:

#box {
width: 150px;
voice-family: "\"}\"";
voice-family: inherit;
width: 100px;
}

2.- Hack del selector universal para IE

#box {
width: 100px; /* todos los navegadores lo leen */
border: 5px;
padding: 20px;
}
* html #box {
width: 150px; /* solo IE lo lee */
}

3.- Hack del guión bajo

#box {
width:100px;
_width:150px;
border: 5px;
padding: 20px;
}

4.- Solución alternativa:

#box {
width: 150px
}
#box div {
border: 5px;
padding: 20px;
}

<div id="box"><div>...</div></div>

5.- SitePoint

padding: 20px;
border: 5px;
width: 150px
width/**/:/**/ 100px;

6.- Modo estricto
Si usamos el tipo de documento en modo estricto, IE interpreta correctamente la caja.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Relacionado:
Alternate Box Model Hacks Test: Más soluciones alternativas.
3dboxmodel : // hicksdesign
Interactive CSS Box Model Demo
Garbage In, Garbage Out - CSS !important
ervdesign » El dichoso modelo de caja
ervdesign » El dichoso modelo de caja II

Ref:
Diseñorama: El Modelo de Cajas

Si damos a la altura del elemento un valor en porcentaje, se referirá a la altura de su elemento contenedor. Luego, para que cualquier elemento al que asignemos height:100% ocupe todo el alto de la pantalla, tanto html como body tienen que tener una altura del 100%.

Si en un elemento fijamos altura menor de lo sería necesario para abarcar su contenido, éste lo desbordará y se comportará según fijemos en la propiedad overflow (por defecto será visible). Pasa lo mismo cuando fijamos la altura de un elemento al 100%: si el contenido del elemento es demasiado extenso, lo desbordará.

La solución está en la propiedad min-height que indica la altura mínima que tendrá el elemento. Si el contenido precisa más espacio, el elemento se estirará para abarcarlo. Por lo que, si queremos que un elemento ocupe el 100% de la altura de la pantalla, pero que se adapte a las dimensiones de su contenido si éste requiere más espacio, deberíamos utilizar min-height:100%. El problema es que IE no reconoce min-height. Es más, IE interpreta la propiedad height como si fuera min-height.

Solución:

Primero asignamos el min-height para el elemento, propiedad que solo reconocerán los navegadores avanzados. A continuación, utilizamos el selector * html [elemento] para definir la propiedad height sólo para IE, ya que otros navegadores no la interpretan.

html,body{
height:100%;
}
div{
min-height:100%;
}
* html div{
height:100%;
}

Así conseguimos que en los principales navegadores la altura del div sea del 100%, para cualquier extensión del contenido.

Caótico Neutral: Elementos con altura 100%

Horizontales con tabs sin imágenes
Listamatic: (1), (2), (3), (4), (5), (6)
CSS Tabs | unraveled
Example of CSS-driven tabs
SimpleBits | Simplified CSS Tabs

Horizontales con tabs de bordes redondeados sin imágenes
Stu Nicholls: (1), (2), (3), (4)
CSS Tabs with Submenus

Horizontales con tabs imágenes - efecto hover
CSS Lab » Menú horizontal y algo +
SimpleBits: Accessible Image-Tab Rollovers
SuperfluousBanter: Navigation Matrix
A List Apart: Sliding Doors of CSS
456 Berea Street: Inverted Sliding Doors Tabs
sitepoint: CSS and round corners
CSS World: Tabs
TJK design Tabs menu
Stu Nicholls
alex.netwindows.org: CSS Rollover example: (1), (2), (3)
Sliding doors with one image
CSS and round corners: Making accessible menu tabs
Relatively Absolute: Cross-Browser CSS Tabs With Rollover
Example A. Doors and Mountaintops
Menu with CSS tags and before/after
Navigation placement demonstration
UL tab menu - Nested lists | Lab | 456 Berea Street
Centered Menu
Free CSS Navigation Menu Designs at exploding-boy.com
Free CSS Navigation Menu Designs at exploding-boy.com
Centered Menu
Dragon Labs - The Ultimate Tabbed Menu

Horizontales con tabs que cambian el contenido
Tabtastic
W3C: A Tabbed Interface
BrainJar.com: Tabs
Silverorange Labs: Updated Simple CSS Tabs
Non-Troppo: CSS Tabbed Navigation: (), (2)
Kalsey Consulting Group: CSS Tabs
Navegación: Pestañas con CSS
BrainJar.com: Tabs Demo
stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links
Dragon Labs - The Ultimate Tabbed Menu - Ajax Tabtastic Demo
Dragon Labs - The Ultimate Tabbed Menu - Ajax Tabtastic Demo
JavaScript Tabifier automatically create an html tab interface
DOMTab - Navigation tabs with CSS and DOMscripting
Dynamic Drive DHTML Scripts- Ajax Tabs Content script
JavaScript Tabifier automatically create an html tab interface
Intenta » Crear una navegación por pestañas con AJAX y CSS. Primera Parte
Intenta » Crear una navegación por pestañas con AJAX y CSS. Segunda Parte

Horizontales con imágenes - efecto hover
Listamatic: (1), (2), (3), (4)
Stu Nicholls
Alsacreations
CSS Based Navigation
Adjacent Menu Effect
Menu with multiple hover effects and without preload
Float Mini Tabs
Hoverbox Menu | Design Meme
ervdesign » Menú con lista más css con efecto :hover

Horizontales con submenús verticales
Alsacreations
Listamatic2
Stu Nicholls
Menu horizontal à plusieurs niveaux
Ibilab.net: Créer des menus en cascade, c’est simple !
positioniseverything.net: Deluxe CSS Dropdowns and Flyouts
htmldog: the Suckerfish
htmldog: Son of Suckerfish Dropdowns
Iubito’s CSS menu
Drop Down Llama Menu
aplus :: ADxMenu: (1), (2), (3)
Vertical DHTML dropdown menu with YADM
Pure CSS Pulldown Menus
CSS Popups
CSS Menu - Horizontal

Horizontales con submenús horizontales
Alsacreations
A List Apart: Hybrid CSS Dropdowns
Veerle’s blog: 2 level horizontal navigation in CSS with images
TJK design CSS-based Dropdown with a twist
aplus :: ADxMenu
CSS Menu with tootips without javascript

Verticales simples
Listamatic: (1), (2), (3), (4), (5), (6), (7), (8), (9)
Stu Nicholls : (1), (2), (3), (4), (5), (6), (7), (8), (9), (10)
Seth’s new vertical list
A definition list menu
Consejos en la programación de listas
Macworld: Secrets: CSS tricks for custom bullets
WebEstilo: Menú sencillo y elegante
Intenta - Efecto “sobre” en un bloque de elementos
Dynamic Drive CSS Library- Vertical CSS Menus

Verticales con imágenes - efecto hover
e-lusion: free menu designs
Wellstyled.com: Fast Rollovers Without Preload
Alsacreations
Listamatic
Stu Nicholls: (1), (2)
CSS/edge - meyerweb.com: (1), (2), (3)
Menu with multiple hover effect without image preload: (1), (2).
Project Seven Development: Default PVII Document
News List | Lab | 456 Berea Street
Free CSS Vertical Menu Designs at exploding-boy.com
Free CSS Vertical Menu Designs at exploding-boy.com
stu nicholls | CSS PLaY | a css magnifier menu

Verticales con tabs que cambian el contenido
Dynamic page elements
:target

Verticales con submenús verticales
A List Apart: Horizontal Drop Down Menus
htmldog: Son of Suckerfish Dropdowns:
whatever:hover cssmenu
Alsacreations: (1), (2)
BC Horizontal UL Menu
CSS/edge - meyerweb.com
:target Sidebar
Accessible and styleable drop down menu with DOM and CSS
CSS vertical navigation list
Afficher Masquer des calques sans javascript
Drop-Down Menus
CSS Menu - Vertical
Max Design - Nested lists used to create a simple folder metaphore
Hierarchical Sitemap with Dashed Lines
Pure CSS menus

Múltiples columnas o filas
Novitski Software: Flowing a list across multiple columns
CommunityMx: Multiple Column Lists
Listamatic: Copongcopong’s Pop Pad List

Fijos
W3C: Fixed Menus
Pop-Up Menus

Curiosos
W3C: A Confetti Menu
Alsacreations: CSS menus gallery
Westciv: a navbar using lists
Copongcopong’s Pop Pad List
maxdesign.com.au: Remote control CSS (revisited)
Sitemap Celebration, (rounded)
Folder Tree, Enlarger Button Menu, Hover Sidebar
CSS Menu—Click version
CSS Design: Night of the Image Map

Efectos javascript
Accessible Dropdown menu
gazingus.org - Using Lists for DHTML Menus, (2)
Apycom DHTML Menu: Cascading Drop Down Menus
A List Apart: Let Them Eat Cake
Drag & Drop Sortable Lists with JavaScript and CSS
Expanding Nested Lists
Collapsible Explorer navigation with pureDOMexplorer
easy-designs.net: Replace Select
Cut & Paste: Cool CSS Menu: (1), (2)
[brothercake] Docking boxes (dbx)
Vertical expanding menu in CSS
A List Apart - Complex Dynamic Lists: (1), (2), (3)
Dynamic Drive DHTML Scripts- DD Tab Menu
Intenta: Componentes: MenuBar I
JavaScript Menu. Deluxe Menu.
Tryit Editor v1.4
EffectsPack
gazingus.org - DOM-Scripted Lists, Revisited
JavaScript Toolbox - DHTML Expandable, Collapsable Tree
General Disposition for a Folder Tree I
panel
Basic DOM Menue I
General xhtml Menu Disposition
General Disposition for scroll out and back Menu
FreeStyle Menus - TwinHelix
Crack Ajax - Tabbed Interface Project
ypSlideOutMenus
Mini Slide Navigation | Sandbox | Stephen Clark (sgclark.com)
Intenta - Mini Slide Navigation con Flash y XML
Toggle (show/hide) elements in a Definition List
havocStudios: Ajax Tabs Demo
Ajax Workshop 2: Building Tabbed Content
DOMTab - Navigation tabs with CSS and DOMscripting
Accessible Website Menu: Ultimate Drop Down Menu 4.45 - List-based Semantic DHTML Menu
Alsacreations, XHTML and CSS drop-down menu
frequency decoder | animated miniTabs
CSS event:Selectors
Webmaster Libre » Menus desplegables con Javascript
Intenta » Menu con CSS y Javascript
Menú al estilo Slashdot - aNieto2K
Webmaster Libre » Archivo del weblog » DOMTab: Navegación por pestañas con CSS y DOMscripting
[brothercake] Docking boxes (dbx)
Expandable Sidebar Menu, el acordeón de jQuery - aNieto2K
FreeStyle Menus Demonstration

Generadores automáticos de menús
List-o-matic
The Amazing Rolloverer
Navbar Generator
List-u-Like CSS Generator
CSS Menu Generator :: Webmaster Toolkit

Programa para crear menús: HighDots - CSS Tab Designer

Otras listas de listas:
CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase
CSS Navigation Techniques
Top 71 CSS Menus Navigation Tabs : Ultimate Web Developer Lists : eConsultant
13Styles.com

Ver también: Efectos con imágenes y CSS

Todos los recursos de la Web tienen una dirección llamada Universal Resource Identifier o “URI” (Identificador Universal de Recursos): http://www.w3.org/TR

Se componen de tres partes:
- El esquema de acceso: protocolo HTTP (”mailto” para correo electrónico, “ftp”).
- El nombre de la máquina que aloja el recurso: www.w3.org
- El nombre del recurso: ruta “/TR”

Los URLs son un subconjunto de los URIs.

Algunos URIs se refieren a una localización dentro de un recurso. Terminan con un “#” seguido de un identificador de fragmento: http://algunsitio.com/html/superior.html#seccion_2

Un URI relativo se refiere a un recurso que está en la misma máquina que el documento actual. Si en “http://www.acme.com/soporte/intro.html” tenemos el URI relativo <a href=”proveedores.html”>Proveedores</a>, nos dirigiría a “http://www.acme.com/soporte/proveedores.html“.

Los URIs se usan para crear un vínculo a otro documento o a una hoja de estilo, incluir una imagen, enviar un formulario…

Ref:
Introducción al HTML 4

p {_color: red;}

Mientras el resto de los navegadores toman _color como una propiedad desconocida, Internet Explorer la reconoce como la propiedad color.

p {
color: green;
_color: red;
}

En este ejemplo, el orden es importante por las reglas de cascada. Todos los navegadores mostrarían el texto verde (no leen la segunda línea), excepto Explorer que lo haría en rojo, porque lee también la segunda línea que redefine a la primera.

Ref:
5.1.1.

- CSS Debug Toggle es un bookmarklet (solo para Firefox) que permite visualizar los bordes, los márgenes y los nombres de los elementos de tu página. Para instalarlo, sólo tienes que arrastrar o añadir el siguiente enlace a tus marcadores: CSS Debug Toggle, y ya puedes ver la estructura del diseño de cualquier página con un solo click.

- Favelets de Accessify.com. Para su uso, solo los tenéis que arrastrar o añadir a favoritos o marcadores de tu navegador. Aquí tenéis algunos ejemplos:
Convertir abbr y acronyms (Acrobot online)
Mostrar divs
Ver la web sin estilos

- Favelet Suite de Slayeroffice: con múltiples funciones muy útiles. Añade el siguiente enlace a tus marcadores: Favelet Suite.

- Listado de bookmarklets en Web Development Bookmarklets.

Bugs en navegadores:
Internet Explorer
Opera
Mozilla

Foros de discusión de CSS:
Domestika
Forosdelweb
Isopixel
Ovillo

Ref:
Diseñorama :Tutoriales:Como solucionar problemas en CSS

Listas de Correo
Ovillo.org - CSS y estándares web
AccesoWeb - soluciones de diseño accesible para la Red

Sindicación
del.icio.us - css
del.icio.us - templates

El CSS

body {
margin: 0;
padding: 0;
text-align: center;
}

#box {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
padding: 0;
text-align: left;
width: 40em;
}

#content {
padding:3em;
}

#tlc, #trc, #blc, #brc {
background-repeat: no-repeat;
}

#tlc {
background-image:url(images/tlc.gif);
background-position: 0% 0%;
}

#trc {
background-image:url(images/trc.gif);
background-position: 100% 0%;
}

#blc {
background-image:url(images/blc.gif);
background-position: 0% 100%;
}

#brc {
background-image:url(images/brc.gif);
background-position: 100% 100%;
}

#tb, #bb {
background-repeat: repeat-x;
}

#tb {
background-image:url(images/tb.gif);
background-position: 0% 0%;
}

#bb {
background-image:url(images/bb.gif);
background-position: 50% 100%;
}

#rb {
background-image:url(images/r.gif);
background-position: 100% 0%;
background-repeat: repeat-y;
}

#lb {
background-image:url(images/l.gif);
background-position: 0% 100%;
background-repeat: repeat-y;
}

Siendo:
tlc = top left corner
trc = top right corner
blc = bottom left corner
brc = bottom right corner
lb = left border
rb = right border
tb = top border
bb = bottom border

El HTML:

<div id="box">

<div id="lb">

<div id="rb">
<div id="bb"><div id="blc"><div id="brc">
<div id="tb"><div id="tlc"><div id="trc">

<div id="content">

contenido

</div>

</div></div></div></div>
</div></div></div></div>

</div>

Y las imágenes serían:

Ref:
Torresburriel.com
Torresburriel.com
Blogpocket

El documento HTML:

<div id=”contenedor”>

<div id=”menuleft”>
Contenido de la columna izquierda…
</div>

<div id=”principal”>
Contenido de la columna central…
</div>

<div id=”menuright”>
Contenido de la columna derecha…
</div>

</div>

Para centrar el contenido, visto desde la mayoría de los navegadores (incluido Explorer):

body{
text-align: center;
}

#contenedor {
width: 650px;
margin: 10px auto;
text-align: left;
}

Para posicionar las columnas:

#menuleft {
width: 175px;
float: left;
}
#principal {
width: 300px;
float: left;
}
#menuright{
width: 175px;
float: left;
}

Ref:
Bitácora de webmaster

Debemos crear una hoja de estilos (print.css), donde indicaremos los estilos que queremos aplicar a los contenidos al imprimirse.

Para los elementos que no queremos que aparezcan en la impresión:
visibility: hidden: Deja su espacio en blanco.
display: none: Oculta el elemento, sin dejar espacios.

En el documento HTML debemos de añadir en el head:
<link rel="stylesheet” type="text/css” media="print” href="print.css” />

Ver también:
Intenta - CSS para imprimir
A List Apart: Articles: CSS Design: Going to Print
A List Apart: Articles: Printing a Book with CSS: Boom!
CSS Lab » media=”print”
SigT » CSS para impresión: Un truco para mostrar los enlaces
Omitir Texto al imprimir con CSS - aNieto2K
Minid.net - Haciendo hojas de estilo CSS para impresión
Digital Web Magazine - CSS Styling for Print and Other Media

Ref:
Bitácora de webmaster

selector { atributo: valor; }

Un elemento padre es una etiqueta HTML que contiene otras etiquetas:

<div><strong>Párrafo</strong></div>

Aquí <div> es el padre y <strong> el hijo.

* Selectores: Hacen referencia a etiquetas del documento HTML.

div { font-size: 18px; }

Indica que todos los elementos <div> del documento HTML mostrarán tamaño de letra a 18px.

* Selectores Descendientes: Afectaría a todos los descendientes (hijos, nietos…) de un padre:

div span{ font-size: 18px; }

Afecta a todos los span que estén dentro de un elemento div.

* Selectores Hijo: Únicamente se aplica a los hijos de un padre, no a nietos y posteriores descendientes.

div > span { font-size: 18px; }

* Selectores Hermano Adyacentes: Se aplica a hermanos.

h5 + h6 { font-size: 18px; }

Afecta a h6 pero solo cuando está inmediatamente después de un h5, o cuando h5 y h6 sean hijos del mismo padre.

* Selectores de Atributos: Se aplican a los atributos de etiquetas de imágenes o enlaces.

img[widht] { border: 5px dotted #f00 }

Afecta a todos los elementos img de nuestro documento que tenga el atributo width.

img[widht="80"] { border: 5px dotted #f00 }

Afecta a las etiquetas img que tengan el atributo width con un valor de 80

img[alt~="gato"] { border: 5px dotted #f00 }

Afecta a las img que tengan un atributo alt cuyo valor contenga la palabra indicada.

p[title^="Pri"] {color:red;}

Se aplica a los párrafos cuyo atributo title comienza por “Pri”.

p[title$="arrafo"] {color:green;}

Se aplica a los párrafos cuyo atributo title termina en “arrafo”.

p[title*="ercer"] {color:blue;}

Se aplica a los párrafos cuyo atributo title contiene “ercer”.

* Selectores de Clase: Se aplica a elementos del documento mediante el atributo class. Utilizan nombres inventados que no corresponden con etiquetas HTML. Se pone un punto (.) antes del selector.

En el CSS:

.tituloblog { color:#F00; }

En el HTML:

<div class="tituloblog">El Gran Blog</div>

* Selectores de Id: Tiene el mismo sentido que el selector de clase, pero sólo lo vamos a utlizar una vez en el documento. Se pone una almohadilla (#) antes del selector.

En el CSS:

#pieblog { color:#F00; }

En el HTML:

<div id="pieblog">Agradecimientos a todos</div>

Nota: Internet Explorer tiene problemas para leer los selectores hijo o los selectores de atributo.

Más tutoriales: Caótico Neutral: Selectores en CSS

Telomereces.com

El resultado lo podemos conseguir utilizando exclusivamente CSS, y una sola imagen que recoja todos los cambios deseados.

Veamos un ejemplo, con el logo de Bitacoras.com:

La imagen mide 88px de ancho y 62px de alto (31x2).

El código HTML

<div class="ejemplo">
<a href="http://www.bitacoras.com/" id="bit"><span class="alt">Bitácoras.com</span></a>
</div>

En el CSS

.ejemplo a {
display:block;
background-position:left top;
background-repeat:no-repeat;
width:88px;
height:31px;
}
.ejemplo a:hover { background-position: 0 -31px; text-decoration: none; }
.ejemplo .alt { display:none; }
.ejemplo a#bit { background-image: url(http://juglar103.blogsome.com/uploads/juglar103/bit0.JPG) }

Por defecto, se muestra la parte de arriba de la imagen, y cuando pasamos el ratón (hover) la imagen se desplaza 31 pixels hacia arriba, mostrando la parte de la imagen. Observadlo:

En Free Menu Designs tenéis unos cuantos ejemplos de menús usando este sistema, que podéis descargar para vuestra bitácora.

Gracias a los enlaces de Jordifreek, he practicado distintas variantes del tema, que he recogido en Menús con CSS.

Programacion.com

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo que describe cómo se va a mostrar un documento en la pantalla. Ofrece a los desarrolladores el control total sobre el estilo de sus documentos.

Para qué sirve

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Define la forma de mostrar los elementos HTML y XML. Permite controlar el estilo de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Cómo funciona

CSS funciona a base de reglas sobre el estilo de los elementos. Cada regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector
{color: red;} es la declaración

El selector especifica los elementos afectados por la declaración. La declaración establece cuál será el efecto.

Formas de dar estilo

- Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.

<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>

- Utilizando el elemento <style> en el documento, situado en <head>.

<head>
<title>hoja de estilo interna</title>
<style type="text/css">

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: red;
background-color: #d8da3d;
}

h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}

</style>
</head>

- Utilizando estilos directamente sobre los elementos a través del atributo <style> dentro de <body>. Este tipo de estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.

Normas básicas del CSS

- Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:

h1, h2, h3 {
color: red;
}

es lo mismo que

h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

- Las propiedades que se desean modificar para un mismo selector pueden agruparse, separadas con punto y coma.

h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}

- Si el valor está formado por más de una palabra, hay que ponerlo entre comillas.

p {font-family: "sans serif";}

Ref:
Guía Breve de CSS de la W3C

p:first-letter {color: red;}
p:first-line {color: gray;}

La pseudo-clase :first-child selecciona un elemento que es el primer hijo de otro elemento. Por ejemplo, si queremos que un párrafo no tenga sangría cuando sea el primer hijo de un div:

div > p:first-child {text-indent: 0}

Podemos definir relaciones de contexto entre elementos: si queremos definir que los EM que estén dentro de un H1 sean grises:

h1 em {color: gray;}

Clasificación de los elementos:
- Elementos de bloque. Fuerzan un salto de línea al final de los mismos: párrafos, encabezados, tablas, listas, DIV, BODY.
- Elementos inline. Enlaces, énfasis, SPAN.
- Elementos de lista. Contienen elementos LI.

Podemos cambiar la visualización de bloques o listas mediante la propiedad display. Puede tomar los valores: block, inline, list-item, none (oculta el elemento).

Para que los párrafos (elementos de bloque) se vean en línea:

p {display: inline;}

Con los pseudo-elementos :before y :after se puede insertar un contenido antes o después de un elemento y definir el estilo de dicho contenido.

h3:before {content: “Tema: “}
p:after {content: url(”icono.gif”)}
body:after {content: “Fin”; display: block;}

Ref:
Programacion.com

Cuando varios elementos comparten la misma propiedad CSS, podemos agruparlos:

h1, h2, h3, h4, h5, h6 {color: purple;}

h1, h2, h4 {color: purple;}
h2, h3 {background: green;}
h1, h4, b {background: white;}
b3 {color: white;}
b {color: red;}

Agrupación de declaraciones

Podemos agrupar las diferentes reglas que definen a un mismo elemento.

h1 {
font: 18pt Helvetica;
color: purple;
background: aqua;
}

Agrupación de selectores y declaraciones

body {
background: white;
color: gray;
}

h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, sans-serif;
color: white;
background: black;
}

h1, h2, h3 {
border: 2px solid gray;
font-weight: bold;
}

h4, h5, h6 {
border: 1px solid gray;
}

Programacion.com

font-family: Familia de tipografia del texto (si se indica una fuente específica es conveniente respaldarla con la genérica correspondiente, por si el sistema no la reconoce).
serif (por ej., Times)
sans-serif (por ej., Arial o Helvetica)
cursive (por ej., Zapf-Chancery)
fantasy (por ej., Western)
monospace (por ej., Courier)
Ej: font-family: arial, helvetica, sans-serif; font-family: fantasy;

font-size: Tamaño de las fuentes. (ejemplo visual)
Relativos: porcentajes | em | larger | smaller
Exactos: unidades de CSS
Predefinidos: xx-small | x-small | small | medium | large | x-large | xx-large
Ej: font-size:12pt; font-size: x-large;

font-weight: Densidad de los caracteres, es decir, para poner el texto en negrita. Normal = 400, bold = 700.
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Ej: font-weight:bold; font-weight: 200;

font-style: Estilo de la fuente.
normal | italic | oblique
Ej: font-style:normal; font-style: italic;

font-variant: Si los caracteres serán normales o small-caps (las minúsculas son mayusculas de menor tamaño).
normal | small-caps
Ej: font-variant: small-caps;

font: Forma rápida para definir las propiedades de fuentes y line height.
Valores: [font -style || font -variant || font -weight]? font -size [ / line -height ]? font -family
Ej: font: italic bold 12pt/14pt Times, serif ;

TEXTO

line-height: Alto de una línea, es decir, el espaciado entre líneas.
normal y unidades CSS
Ej: line-height: 12px; line-height: normal;

text-decoration: Decoración del texto, es decir, si está subrayado, sobrerayado o tachado.
none | [ underline || overline || line-through || blink
Ej: text-decoration: none; text-decoration: underline;

text-align: Alineación del texto.
left | right | center | justify
Ej: text-align: right; text-align: center;

text-indent: Sangría de la primera línea.
Unidades CSS, o relativas (%, em).
Ej: text-indent: 10px; text-indent: 2in; text-indent: 2em;

text-transform: Que todas las palabras tengan la primera letra en mayúsculas, todo en mayúsculas o minúsculas.
none | capitalize | uppercase | lowercase
Ej: text-transform: none; text-transform: capitalize;

vertical-align: Alineación vertical del texto en relación con la línea base del texto.
baseline | sub | super | top | text-top | middle | bottom | text-bottom | %
Ej: vertical-align: sub;

letter-spacing: Espaciado entre letras.
normal | unidades CSS
Ej: letter-spacing: 0.5pc;

word-spacing: Espaciado entre palabras.
normal | unidades CSS
Ej: word-spacing: 0.5pc;

COLORES Y FONDOS

color: Color del texto.
Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
Ej: color: #009900; color: red;

background-color: Color de fondo de un elemento de la página.
transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)
Ej: background-color: green; background-color: #000055;

background-image: Imagen de fondo en un elemento de la página.
none | url(dirección relativa o absoluta)
Ej: background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif)

background-repeat: Si la imagen de fondo se repetirá por todo el fondo del elemento, sólo horizontalmente, sólo verticalmente, o no se repetirá.
repeat | repeat-x | repeat-y | no-repeat
Ej: background-repeat: repeat-y;

background-attachment: Si la imagen debe desplazarse o permanecer fija con respecto a la ventana cuando el usuario baja hacia abajo.
scroll | fixed

background-position: Fija la posición de la imagen en el elemento por medio de coordenadas de longitud o porcentaje con respecto a la esquina superior izquierda, o palabras reservadas.
uds CSS | % | top | center | bottom | left | right
background-position: top center;

background: Forma rápida para las propiedades específicas del fondo.
Valores: background -color || background -image || background -repeat || background -attachment || background -position
Ej:
background: white url(http://www.htmlhelp.com/foo.gif);
background: #7fffd4;
background: url(../fondos/peon.png) #f0f8ff fixed;
background: #0c0 url(hojas.jpg) no-repeat bottom right ;

MARGENES Y PADDING

Margin: Tamaño de los márgenes.
unidades CSS | % | auto
margin-left: 1cm; margin-left: 0,5in; margin-right: 5%; margin-right: 1in; margin-top: 10px; margin-bottom: 0pt;

Con “auto” el navegador da un valor adecuado.
Podemos especificar todos los valores de los margenes de una sola vez:

margin: ancho1 ancho2 ancho3 ancho4;

Si sólo especificamos “ancho1″ se refiere a los cuatro margenes. Si se especifican dos valores, “ancho1″ se refiere al superior e inferior, y “ancho2″ al izquierdo y derecho. Si ponemos los tres primeros, “ancho1″ se refiere al superior, “ancho2″ al izquierdo y derecho, y “ancho3″ al inferior.

Padding: Distancia entre el borde superior y el contenido.
unidades CSS | %
padding-left: 0.5in; padding-left: 1px; padding-right: 0.5cm; padding-right: 1pt; padding-top: 10pt; padding-bottom: 0;

padding: valor1 valor2 valor3 valor4;

BORDES

Border-color: Color del borde de un elemento de la página. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
nombre del color | valor HEX | Rgb (R%, G%, B%) | Rgb (R,G,B)
Ej: border-color: red; border-color: #ffccff;

Border-style: Estilo del borde. Los valores significan: none=ningun borde, dotted=punteado, dashed=discontinuo, solid=solido, double=doble borde, y los demás son efectos 3D.
none | dotted | dashed |solid | double | groove | ridge | inset | outset
Ej: border-style: solid; border-style: double;

border-width: Ancho del borde del elemento.
unidades CSS | thin | medium | thick
Ej: border-width: 10px; border-top-width: thin; border-width: thin thick medium

Podemos especificar el ancho de cada borde: border-top-width, border-bottom-width, border-left-width, border-right-width.

border: Especificar todas las propiedades de un borde: anchura, estilo y color. O de cada uno con: border-top, border-bottom, border-left, border-right.
Ej: border: 1px solid #000;

PROPIEDADES DE CLASIFICACION

display: Visualización de un elemento.
* block (un salto de línea antes y después del elemento)
* inline (ningún salto de línea antes ni después del elemento)
* list-item (igual que block, salvo que se agrega un marcador de ítems de lista)
* none (sin visualización)

white-space: Tratamiento de los espacios dentro del elemento.
* normal (contrae múltiples espacios en uno)
* pre (no contrae múltiples espacios)
* nowrap (no permite el ajuste de línea sin una etiqueta
)

list-style-type: Tipo de marcador de ítems de lista.
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Ej: list-style-type: square;

list-style-image: Imagen que se usará como marcador de ítems de lista.
url | none
Ej: list-style-image: url(/LI-marcadores/visto.gif);

list-style-position: Posición de las líneas en relación al ítem de lista.

outside
* Item de lista 1
segunda línea de ítem de la lista

inside
* Item de lista 1
segunda línea de ítem de la lista

list-style: Forma rápida de las propiedades list-style-type, list-style-position y list-style-image.
list-style-type || list -style-position || url
Ej: list-style: square inside;
list-style: url(/LI-marcadores/visto.gif) circle;

FORMATO VISUAL

display: Alineación de los elementos.
block: el elemento se genera en una nueva línea.
inline: el elemento se genera en la misma línea.
list-item: el elemento se genera en nueva línea y como elemento de lista.
marker: el elemento será un marcador.
none: el elemento desaparece por completo.
run-in y compact: el elemento se genera en la misma o en nueva línea según el contexto y se comporta como las listas de definiciones.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell y table-caption: el elemento se comporta como un elemento tabla.

position: Ubicación de los elementos.
static: posición predeterminada.
relative: la posición se ajusta en relación a su posición normal en la página.
absolute: la posición ignora el flujo normal de la página y se especifica con las propiedades ‘left’, ‘right’, ‘top’, y ‘bottom’.
fixed: el elemento no se mueve cuando se realiza un desplazamiento/scroll.
div#menu {position: absolute}

‘top’, ‘right’, ‘bottom’, ‘left’: especifican la distancia que se desplaza el elemento en altura y anchura con respecto al límite de la página.
Valores: medida | porcentaje | auto | inherit
div#menu {position: absolute;
left: 30px;
top: 25% }

z-index: Define el orden en que los elementos son apilados, cuanto más alto el valor, más cercano al lector).
Valores: auto | nº entero | inherit

float: Alinear un elemento a la izquierda o la derecha.
none | left | right
Ej: float: right;

clear: Despejar elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Both mueve el elemento debajo de los elementos flotantes a ambos lados.
none | left | right | both
Ej: clear: right;

MEDIDAS

width: Anchura de un elemento.
uds CSS | % | auto
Ej: width: 10em;
Anchos mínimo y máximo: min-width y max-width

height: Altura de un elemento.
uds CSS | auto
Ej: height: 40px;
Alturas mínima y máxima: min-height y max-height

EFECTOS VISUALES

overflow: Desbordar o no los límites del elemento, cuando son superados por su tamaño.
visible: el contenido se muestra aunque desborde su contención.
hidden: el elemento será recortado.
scroll: el contenido será recortado, pero se podrá ver con una ventana con scroll
auto: depende del navegador.
Ej: overflow: scroll;

clip: Modificación de la zona de recorte.
auto: la zona de recorte tiene el mismo tamaño y ubicación que la(s) caja(s) del elemento.
rect (v1, v2, v3, v4) : definir tamaño rectangular.

visibility: Indica si el elemento, aunque no se muestre, ocupa espacio.
visible: el elemento es visible.
hidden: el elemento es invisible, pero deja su espacio.

PROPIEDADES DEL CURSOR

cursor: Tipo de cursor para el elemento.
auto: predeterminado para el tipo de elemento.
crosshair: cruz simple.
default: predeterminado para la plataforma (flecha).
pointer: puntero de enlace.
move: indicador de movimiento.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize: indicador de movimiento de borde, según dirección.
text: seleccionador de texto (barra-I).
wait: indica espera (reloj).
help: indica ayuda (interrogación).
(url): archivo .cur propio.

UNIDADES DE MEDIDA

Medidas absolutas:

Pixels (px).
Pulgadas (in).
Centímetros (cm).
Milímetros (mm).
Puntos (pt). Para fuentes.
Picas (pc). Para fuentes.

Medidas relativas:

em. Para fuentes.
ex. Para fuentes.

Equivalencias de las unidades de medida

Chuleta imprimible atributos CSS
CSS Shorthand Guide

Ref:
Desarrollo web
Programacion.com
HTML Help
Manual CSS de Carlos Benavídez
ASPTutor.com
WebEstilo

Permite crear estilos que se pueden utilizar cuando queramos.

Primero, definimos una regla en el documento CSS (el punto inicial es necesario):

.cita {font-weight: bold; color: red;}

Una vez definida, podemos aplicar la clase en cualquier etiqueta HTML:

<p class="cita">En en lugar de la mancha ...</p>

También, podemos restringir el estilo a un tipo de elemento:

p.cita {font-weight: bold; color: red;}

Incluso, como me indica Jaime, podemos usar múltiples clases para un mismo elemento HTML:

.maintext {
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #FFCC99
}

.center {
text-align: center;
}

<div class="maintext center">

El atributo ID

Es igual que CLASS, pero sólo puede usuarse en un único elemento. Los estilos ID están precedidos por #:

#first-para {font-weight: bold;}

<p id="first-para">This is the first paragraph, and will be boldfaced.</p>

Ref:
Desarrollo web
Programacion.com

Para definir estilos en una parte pequeña de una página se utiliza la etiqueta <span>. Con el atributo style indicamos las características del estilo.
<p>
Esto es un párrafo con algunas palabras <span style="color:green">en color verde</span>.
</p>

Esto es un párrafo con algunas palabras en color verde.

En una parte de la página

Para hacer que toda una etiqueta muestre un estilo determinado, por ejemplo, un párrafo entero, utilizamos el atributo style.
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Con la etiqueta <div> podemos definir estilos a todo un bloque de la página de una vez.
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <em>azul y negrita</em></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

En toda una página

Para definir estilos que sean aplicados a toda la página, se utiliza la etiqueta style colocada en la cabecera de la página. Se coloca el nombre de la etiqueta de la que queremos definir los estilos, y entre llaves {} colocamos las características de estilos.

<html>
<head>
<title>Título de la página</title>
<style type="text/css">
h1 {text-decoration: underline; text-align:center}
p {font-Family:arial,verdana; color: white; background-color: black}
body {color:black;background-color: #cccccc; text-indent:1cm}
</style>
</head>

<body>
<h1>Título dentro de la página</h1>
<p>Párrafo de texto</p>
</body>
</html>


La etiqueta h1 se presentará subrayada y centrada.

En toda la página (etiqueta <body>) se aplicará color del texto negro, color del fondo grisaceo, margen lateral de 1 cm. Si aplicamos estilos a la etiqueta <body>, estos serán heredados por el resto de las etiquetas del documento, siempre que no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta será el que prevalezca.

En todo un sitio web

La programación con hojas de estilos permite, de una vez, definir los estilos de todo un sitio web, creando un archivo donde colocamos los estilos de la página y enlazando todas las páginas a ese archivo. Así, si cambiamos el archivo de estilos, cambiarán todas las páginas. También se ahorra en código HTML, reduciendo el peso del documento.

Proceso para incluir estilos con un fichero externo.

1- Creamos un fichero de estilos, en formato de texto, con la extensión .css.

2- Enlazamos la hoja de estilos en la página web, colocando la etiqueta:
<link rel="stylesheet" type="text/css" href="estilos.css">
Siendo estilos.css el nombre del archivo de estilos.

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
<title>Título de la página</title>
</head>

<body>
…
</body>
</html >

También podemos incluir estilos en un archivo externo con la sintaxis @import url(”estilo.css”).

Se debe incluir entre las etiquetas <style type=”text/css”> y </style>, que se colocan en la cabecera del documento. La importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos:

<style type="text/css">
@import url ("estilo.css");
body{
background-color:#ffffcc;
}
</style>

Este método se utiliza cuando hay unas pautas básicas de estilos (que se definen en el archivo a importar) y unos estilos específicos para cada página (que se definen entre las etiquetas </style>).

Reglas de importancia en los estilos

Jerarquía para resolver conflictos entre declaraciones de estilos distintas para una misma porción de página (de menor a mayor importancia en caso de contradicción):

* Declaración de estilos con fichero externo.
* Declaración de estilos para toda la página. (etiqueta style en la cabecera de la página)
* Estilos definidos en una parte de la página. (etiqueta div)
* Definidos en una etiqueta en concreto. (etiquetas con atributo style)
* Declaración de estilo para una porción pequeña del documento. (etiqueta span)

Desarrollo web

Ventajas del CSS:
- Evitamos hacer a los archivos demasiado pesados.
- Definimos el estilo de un sitio entero sin necesidad de hacerlo etiqueta por etiqueta. Cualquier cambio hecho a un estilo CSS, se reflejará en todos los elementos que sean referidos a éste, automáticamente.

Con CSS podemos reemplazar las tablas enteramente, pero no es recomendable aún, hasta que los estándares se acepten totalmente en todos los navegadores. Se recomienda utilizar tablas, moderadamente, para la organización del “layout”, y CSS para el resto.

Opciones de estilos CSS:
- Redefiniciones de etiquetas HTML: Se aplican de manera automática a un tipo de elementos.
- Estilos personales, o clases (class): Requieren de un atributo class que identifique al elemento. Si definimos una clase llamada “.especial”, y la queremos aplicar a un elemento específico:

<span class="especial">Contenido aquí</span>

Formas de implementar estilos CSS:

- Incrustar las definiciones de estilo dentro del <head>, por medio de la etiqueta <style type=”text/css”>:

- Vincular el documento HTML a la hoja de estilos, por medio del siguiente código dentro del <head>:

<link rel=stylesheet type="text/css" href="url" title="titulo">

- Importarla con el siguiente código:

<style type="text/css">
<!--
@import url(url/nombre_de_documento.css);
-->
</style>

El cuerpo del documento CSS consiste entonces en los nombres de los estilos y sus reglas. La sintaxis es así:

SELECTOR { REGLA1: VALOR; REGLA2: VALOR; }

Los nombres de las clases deben ir precedidos de un punto (.), y las redefiniciones de HTML no.

body {
(...)
}

.comCuerpoCentr {
(...)
}


Reglas sintácticas de los estilos CSS:

- La sintaxis empieza con el nombre del estilo: (selector).
- El selector va seguido de un corchete de apertura “{”.
- Después va la regla, seguida de dos puntos “:”.
- Los valores van precedidos de un espacio en blanco, y seguidos de un punto y coma “;”.
- Cuando hay varias reglas van separadas por puntos y comas y un espacio en blanco.
- La hilera de reglas acaban en un corchete de cierre “}”.
- Se introduce un salto de línea para especificar el estilo siguiente.
- Se recomienda utilizar minúsculas para todo el texto.
- Se recomienda que todos los elementos vayan delimitados por un espacio en blanco.

Ejemplos de redefiniciones:

En <body> ponemos las reglas que herederarán todos los demás estilos, si no se especifica lo contrario para alguno de ellos.

body {
font-family: arial, helvetica, sans-serif; font-size: 12px; margin: 0px;
}

La serie “a” especifica los estilos de los enlaces.
a:link; los enlaces en general.
a:visited; los visitados
a:active; los activos (cuando le haces click)
a:hover; cuando pasamos el ratón sobre él

a:link {
color: #0000cc; font-weight: bold; text-decoration: none;
}
a:visited {
color: #990099; font-weight: bold; text-decoration: none;
}
a:active {
color: #ff9900; font-weight: bold; text-decoration: none;
}
a:hover {
color: #3333ff; text-decoration: underline;
}

Por defecto, los navegadores suelen mostrar los enlaces siempre subrayados. Al especificar text-decoration: none; los links se mostrarán sin subrayado, y con text-decoration: underline; con subrayado.

También podemos definir el estilo de cada enlace en la propia etiqueta <a>, con el atributo style, para hacer que determinados enlaces se vean distintos.

<a href="#" style="color:#ff0000">Mi enlace</a>

Tutorial: Guía Breve de CSS.
blogpocket » ¿Qué es CSS?

Ref:
Maestros del web
Ideasfreelance

La primera línea de la página debe ser el DOCTYPE. Es obligatoria. Es para decirle al navegador qué versión de HTML es la que usas en la página.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Estructura básica de una web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
Contenido
</body>
</html>

Título

El elemento title es lo más importante de una web, porque lo usan los buscadores para indexar la página.

Etiquetas

Deben ir en minúsculas y cerrarse.

Juego de caracteres (charset)

Tu servidor normalmente mandará el tipo MIME del documento (text/html) y la codificación (ISO-8859-1 para el español). Pero, por si acaso puedes especificarlo con esta etiqueta (dentro del <head>):

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

Formato

<span>: Para dar formato a unas cuantas palabras, sin romper el flujo del texto.
<div>: Para dar formato a unos cuantos elementos juntos, rompiendo el flujo de texto (que se le dedique una línea nueva y toda la anchura de la página).

Márgenes

Para hacer que la primera línea de cada párrafo quede un poco más a la derecha, se debe usar párrafos y aplicarles la siguiente hoja de estilos:

p {text-indent: 20px}

Con esto, todos los párrafos tendrán la primera línea 20 píxels a la derecha del margen.

Centrados

Para centrar el contenido de dentro de un elemento, basta con el estilo text-align:center;.

<div style="border:1px solid black; width:70%; text-align:center">Este texto está centrado.</div>

Para centrar el propio elemento, y no su contenido, tienes que darle una anchura (width), y decir que el navegador se ocupe de los márgenes. Se hace con margin-left:auto; margin-right:auto;, o, abreviado: margin: 0 auto;.

<div style="border:1px solid black; width:70%; margin: 0 auto;">Centrado el div</div>

Enfasis

La etiqueta <em> sirve para marcar las palabras a las que quieres dar énfasis, y <strong> para dar un énfasis mayor. Normalmente los navegadores las representan en cursiva y en negrita, respectivamente, pero puedes cambiarlo con CSS.

Para especificar un estilo concreto:
font-weight:bold para negrita
font-style:italic para cursiva
text-decoration:underline para subrayado
text-decoration:overline para una línea por encima
text-decoration:line-through para tachado.

Listas

Usando CSS para las listas (<ul> y <ol>) se pueden hacer menús de navegación, botones, pestañas, tablas, etc.

En Listamatic tienes muchas posibilidades de listas.

Identificar elementos

Para aplicar un estilo a varios elementos a la vez, inventamos un nombre (clase) para ellos, con el atributo class, y cambiamos el estilo a todos los de la clase a la vez con el CSS.

Por ejemplo, en los <div> de ayuda pondremos <div class=”ayuda”>.

Y aplicamos CSS:
div.ayuda {border:2px solid black; background:yellow;}

Cuando quieres dar estilo a un único elemento, se le da un identificador con el atributo id; por ejemplo <div id=”titulo”>.

Y en la hoja de estilos:

div#titulo {border:12px solid blue; background:gray; color:black;}

Si todos los párrafos que hay dentro de un <div> son especiales, en vez escribir <p class=”especial”> para cada párrafo, define la regla CSS como div p { ……….. }, que quiere decir todos los <p> que estén dentro de un <div>), y pon sólo <p> en cada párrafo.

Tamaño del texto

Para cambiar el tamaño del texto, usa el CSS font-size, no las cabeceras <h1>, <h2>,…

Ref:
Cómo hacer buenas páginas web

El HTML sirve para estructurar el texto en secciones, párrafos, enlaces, cabeceras, citas, imágenes, etc.

Con el CSS le aplicamos un estilo: las cabeceras van en rojo y subrayadas, las imágenes tienen 2 cm. de margen y un borde de 1 píxel, el interlineado es de 1′5, y la primera fila de cada tabla tiene el fondo azul.

El CSS sirve para aplicar un estilo a todos los elementos del mismo tipo a la vez.

Cómo puede combinarse con el HTML

Lo normal es escribir el código CSS en un fichero externo, de extensión css, y luego incluir en el <head> de cada página el código:

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

Esto permite usar el mismo estilo para varias páginas HTML distintas. Además, así te llevas el diseño a otro archivo, de forma que los navegadores que no soportan hojas de estilo, no tendrán que cargar código innecesario.

Si prefieres dejar el código CSS en la misma página (sin usar archivos externos), se hace desde dentro del <head> con la etiqueta <style>:

<style type="text/css">
/* Aquí va el código CSS */
</style>

También se puede definir un estilo para un solo elemento, escribiendo el código dentro de su atributo style, aunque no es recomendable porque complica el código.

Formas de aprender CSS

Mirar el código fuente de las páginas que te gusten.

Consultar la especificación CSS del W3C.

Sitios donde aprender CSS:
minid - CSS
Toad - XHTML y CSS
CSS Zen Garden
Camaleón CSS

Cómo hacer buenas páginas web

HTML es el lenguaje que permite describir hipertexto, es decir, texto estructurado, con enlaces a otros documentos relacionados, y con multimedia (imágenes, sonido…). Es el lenguaje que se utiliza para presentar información en Internet.

La descripción se basa en especificar en el texto la estructura del contenido (títulos, párrafos de texto normal, enumeraciones, etc.), y los efectos que se quieren dar (cursiva, negrita, etc.).

HTML: HyperText Markup Language: Es un conjunto de estilos (indicados por etiquetas o tags) que definen los componentes de un documento web.

Para crear documentos HTML sólo necesitamos un procesador de texto. Los documentos HTML están en formato de texto sencillo (también conocido como ASCII). El procesador de texto se utiliza para escribir el documento en lenguaje HTML, que será posteriormente interpretado por el navegador (siempre que el documento esté guardado en formato: “sólo texto”).

El texto tiene dos partes, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo de la presentación final y que pueda ser leído por un programa cliente.

METODO DE TRABAJO

Con el procesador de textos se crea un fichero con extensión html.

Existen programas que automatizan este proceso (editores de lenguaje HTML), pero es conveniente comenzar a hacerlo de manera manual para comprender el lenguaje HTML.

Un navegador del WWW (o programa cliente) permite el acceso a páginas WWW de Internet. El programa cliente permite ver una página antes de introducirla en un servidor. Así, comprobamos que las modificaciones que hacemos en la página son correctas.

El lenguaje HTML usa etiquetas (tags) para indicarle al navegador cómo mostrar el texto. Las etiquetas están formadas por caracteres metidos entre los signos <> y </>. Ejemplo: <title> para abrir y </title> para cerrar.

ESTRUCTURA DE UN DOCUMENTO HTML

Un documento HTML comienza con la etiqueta <html>, y termina con </html>.

Hay dos zonas en un documento HTML:

• Encabezamiento, delimitado por <head> y </head>, que define diversos valores para todo el documento.
• Cuerpo, delimitado por <body> y </body>, donde reside la información del documento.

La estructura básica quedaría así:

<html>
<head>
<title>Título del documento</title>
</head>
<body>
Texto del documento
</body>
</html>

El elemento title especifica el título de un documento HTML. Este título no aparece en el documento, sino que sirve como título de la ventana del programa que la muestra.

mailxmail.com

El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos. Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.

Todas las páginas web de Internet están basadas en el lenguaje HTML (Hypertext Markup Language). Cada documento en HTML contiene texto formateado con indicaciones sobre su apariencia (fuente, tamaño, color…) y su disposición (párrafos, listas…)

EL LENGUAJE HTML

El HTML trabaja con etiquetas. Ejemplo: para resaltar un texto en negrita utilizaríamos la etiqueta <b> y su negación </b>, delimitando el texto que queremos que aparezca en negrita.

Cada navegador tiene sus propias etiquetas, por lo que un documento HTML puede verse de distinta manera en navegadores diferentes. El tamaño de los documentos HTML es importante, ya que los demasiado grandes tardan en cargarse.

El XML (Extended Markup Language o lenguaje de Mercado Extendido) suple algunas de las limitaciones del HTML. El XML identifica si un párrafo de texto es una descripción de un libro, el nombre de un autor o un precio. Esta información estructurada permite a diferentes programas buscar aquello que le interesa. Los documentos se convierten en pequeñas bases de datos.

COMPONENTES DEL LENGUAJE HTML

Objetos que pueden estar presentes en una web:
-Imágenes: formatos .gif .jpeg .png
-Vídeos: formatos .avi .mov
-Animaciones: gif animados, archivos flash o swish (swf)
-Bases de datos
-Texto
-Sonidos: wav, midi, mp3

mailxmail

Mostramos las etiquetas o tags más elementales, que se introducen dentro del cuerpo del documento (entre <body> y </body>).

TITULOS

Son encabezados que describen brevemente el tema de la sección que introducen. Hay seis niveles de encabezados en XHTML, siendo <h1> el más importante y <h6> el menos importante.

Ejemplo:

<h3>Encabezado h3</h3>

Resultado:

Encabezado h3

BLOQUES

La presentación del documento ignora los espacios y tabulaciones del texto fuente. Por eso se utilizan una serie de etiquetas que sustituyen a estos elementos:

<p>
Sirve para representar párrafos. No puede contener elementos en bloque.

<p>El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos.</p><p>Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.</p>

El hipertexto es la escritura multimedia, que integra texto con imágenes, videos, animaciones y sonidos.

Además, posibilita el desplazamiento hacia otros documentos a través de los hiperenlaces.

La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>.

<pre>
Sirve para indicar que el texto está “preformateado”, por lo que los navegadores respetarán los espacios en blanco y los “intros”. Mostrará un tipo de letra más pequeña que la del texto normal.

<pre>My my, hey hey
Rock and roll is here to stay</pre>

My my, hey hey
Rock and roll is here to stay

<blockquote>
Sirve para designar citas de otras fuentes. Se suele representar con tabulaciones a izquierda y derecha.

<blockquote>My my, hey hey
Rock and roll is here to stay</blockquote>

My my, hey hey
Rock and roll is here to stay

<hr />
Sirve para representar una línea separadora horizontal. Tiene seis tamaños diferentes: <hr size=1>, <hr size=2>, <hr size=3>, etc.

My my, hey hey<hr />Rock and roll is here to stay

My my, hey hey

MARCADO DE FRASES

<em>
Sirve para dar énfasis. El navegador representará el texto en cursiva, si no se indica lo contrario.

Rock and roll is here to <em>stay</em>
Rock and roll is here to stay

<strong>
Sirve para dar un enfasis mayor. El navegador representará el texto con negrita, si no se indica lo contrario.

Rock and roll is here to <strong>stay</strong>
Rock and roll is here to stay

<tt>
Representa como texto de teletipo o ancho fijo, similar al de una máquina de escribir.

El hipertexto es la <tt>escritura multimedia</tt>.
El hipertexto es la escritura multimedia.

<acronym>
Sirve para identificar un acrónimo.
<acronym title="HyperText Markup Language">HTML</acronym>
HTML

<code>
Sirve para designar un fragmento de código de ordenador.

Un enlace se crea escribiendo <code>&lt;a href="..."></code>.

Un enlace se crea escribiendo <a href=”…”>.

<del>
Sirve para marcar secciones del documento que han sido borradas con respecto a otra versión del documento.

Rock and roll is here to <del title="No seamos derrotistas"> stay</del>

Rock and roll is here to die stay

Caracteres especiales: Existen unos caracteres especiales del lenguaje HTML que se refieren a las vocales acentuadas, la letra “ñ”, y al uso de símbolos que significan algo en HTML, como el de menor que (<) o el signo inglés de “and” (&).

* < (Menor que): &lt;
* > (Mayor que): &gt;
* & (símbolo de and): &amp;
* “ (comillas dobles): &quot;
* á: &aacute;
* é: &eacute;
* í: &iacute;
* ó: &oacute;
* ú: &uacute;
* ü: &uuml;
*ñ: &ntilde;
*¿: &iquest;

LISTAS

Listas sin orden:
<ul>
<li title="Blogia">Blogia</li>
<li>Blogger</li>
<li>Blogthing</li>
</ul>

• Blogia
• Blogger
• Blogthing

Listas ordenadas:
<ol>
<li title="Blogia">Blogia</li>
<li>Blogger</li>
<li>Blogthing</li>
</ol>

1. Blogia
2. Blogger
3. Blogthing

Listas de definiciones:
Consiste en un término (dt) y su definición (dd).

<dt>Término:</dt>
<dd>Definición del término.</dd>
</dl>

Comentarios:
Son aclaraciones que no aparecen en la presentación final del documento. Se encierran entre los símbolos <!– comentario –>

ENLACES

Enlace a otra página

<a href="http://www.blogpocket.com/">Visita blogpocket.com</a>
Visita blogpocket.com

Para que el enlace se abra en una nueva ventana:
<a href="http://www.blogpocket.com/" target="_blank">Visita blogpocket.com</a>

Enlace dentro de la misma página

<a href="#ejemplomarcador">Ejemplo del enlace en una página o marcador </a>

Y en el sitio a donde se quiere saltar, se debe poner:
<a name="ejemplomarcador">Enlace dentro de una página</a>

IMAGENES
Para incluir una imagen en el documento:

<img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Bloglines" title="Icono de Bloglines">

Las imágenes pueden estar en el propio servidor, o en uno ajeno.

alt=”texto” sirve para proponer un texto alternativo a una imagen. Este texto aparecerá cuando se esté usando un programa sin capacidades gráficas (Lynx). Conviene utilizarlo cuando las imágenes sirven como enlaces.

Una imagen que enlaza:
<a href="http://www.bloglines.com"><img src="http://www.bloglines.com/images/sub_modern1.gif" alt="Bloglines" title="Icono de Bloglines"></a>

MARCOS
Sirve para insertar un marco dentro de un bloque de texto. Permite insertar un documento HTML en medio de otro.

<iframe src="http://www.bloglines.com/blog/Juglar" width="350" height="350" scrolling="auto" frameborder="1">
[Su agente de usuario no soporta marcos o está actualmente configurado para no mostrar marcos. Sin embargo, puede visitar
<a href="http://www.bloglines.com/blog/Juglar">el documento relacionado.</a>]
</iframe>

Ref:
Plantilla de XHTML Maestra
mailxmail.com

Para crear un favicon para tu web necesitas un editor de imágenes que guarde en formato .ico. Aunque lo más rápido para crear tu propio icono es hacerlo en:
FavIcon From Pics
FavIcon Generator
Favicon Generator
Favicon.ico Maker
Favicon.co.uk
Favicon Generator
favicon.ico Generator
http://converticon.com/

El icono debe tener 16x16 píxeles, 16 colores (4 bits), y formato ICO, (parece que también funciona con formato .gif).

Para insertarlo en nuestra web, debemos poner, entre las etiquetas <head> y </head>:

<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">

En Internet Explorer tiene que añadirse la página a favoritos para que se vea el favicon. Una vez hecho debería salir el icono tanto en el menú de favoritos como en la barra de direcciones, a la izquierda de la dirección de la página.

En Mozilla sale directamente en la barra de direcciones sin añadir la página a tu lista de marcadores. El icono no saldrá en la lista de marcadores, sólo en la barra de direcciones.

Galerías:
FavIcon Gallery
MpP Favicon Gallery
Favourite Favicons | Delta Tango Bravo
Favicons Collection

Enlaces:
Favicon Validator
torresburriel.com » Cómo añadir el favicon en un sitio web

Ref:
Blogpocket.com
Favicon.net

• Isnaini Dot Com
• eBlog Templates
• Free Blogger Skins

Texto alternativo: alt
Las imágenes deben tener un texto alternativo, que se mostrará si el usuario no quiere o no puede verlas.
<img src="urlimagen" alt="Texto alternativo" />

Texto al pasar el ratón: title
<img src="urlimagen" alt="Texto alternativo" title="Titulo de la imagen" />

Estilos para imágenes
Altura (height), anchura (width) y borde (border)
img.foto {
height:280px;
width:210px;
border: 1px solid black;
}
<img class="foto" src="urlimagen" alt="Texto alternativo" />