Empezando con Estilo
Las Hojas de estilo o CSS son el estándar del W3C para aplicar el diseño páginas web. Consiste en una serie de etiquetas (selectores) seguidas por algunas propiedades y sus valores encerrados entre llaves:
selector { propiedad1: valor1; propiedad2: valor2 }
Por ejemplo, para cambiar el aspecto de las cabeceras h1 y h2, podemos hacer:
<head>
<title>CSS Example</title>
<style type="text/css">
h1 { font-size: x-large; color: red }
h2 { font-size: large; color: blue }
</style>
</head>
También se permite agrupar etiquetas con la misma propiedad:
h1,h2,h3,h4,h5,h6 {color: green}
Otro ejemplo:
p {
text-align: center;
color: black;
font-family: arial
}
Selectores y propiedades
Los selectores se emplean para asignar propiedades a una o varias partes de un documento. El selector class es el más usado y puede emplearse varias veces en un documento:
Por ejemplo, los siguientes selectores class justifican un párrafo al centro o derecha, según se use:
p.right {text-align: right}
p.center {text-align: center}
y se usaría como:
<p class="right">
Párrafo justificado a la derecha.
</p>
<p class="center">
Párrafo centrado.
</p>
En este caso, las propiedades de los selectores sólo se mostrarán cuando se apliquen a párrafos y sólo los parrafos que tengan ese selector se verán afectados. Podemos definir un selector sin una etiqueta HTML, lo que permiría aplicarla a cualquer etiqueta, por ejemplo:
.center {text-align: center}
se podrá aplicar a:
<p class="center">
Párrafo centrado.
</p>
<h1 class="center">
Cabecera centrada.
</p>
El otro selector es el id y a diferencia de class, éste sólo se puede usar una vez en cada documento:
#menu {
margin-left: 20px;
color: #00f;
background-color: #fff;
}
Asignándose como:
<div id="menu">
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
</ul>
</div>
Añadiendo una hoja de estilo
Existen tres formas de aplicar una hoja de estilos de un documento HTML, empotrando en el documento, con el elemento link de HTML o con la directiva @import.
El método link es el método que entienden navegadores viejos
<link rel="StyleSheet" href="style.css" type="text/css" media="screen" />
<link rel="StyleSheet" href="print.css" type="text/css" media="print" />
<link rel="StyleSheet" href="contrast.css" type="text/css" media="screen" />
y debe aparecer en la cabecera del documento (en <head>).
La otra posibidad es la directiva @import de CSS:
<style type="text/css">
@import url("style.css") screen;
@import url("print.css") print;
</style>
Usando un enlace externo, podríamos tener una hoja de estilo como:
body {
background: #fff;
margin: 10px;
color: #333;
}
h1,h2,h3 {
color: #555;
}
p {
line-height: 12px;
}
Algunas propiedades
Dando forma al documento
Los selectores de margen, espaciado, etc, permiten darle el aspecto general al documento y partes de él.
body {
margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
border: 1px #aaa solid;
background: #d9d7da url(images/bg.jpg);
color: #ffffff;
}
Esto además de puede abreviar como:
body {
margin: 10px;
padding: 10px 15px;
border: 1px #aaa solid;
background: #d9d7da url(images/bg.jpg);
color: #fff;
}
p {
margin-top: 5px;
margin-bottom: 10px;
width: 90%
}
Dando formato al texto
La mayoría de las propiedades del texto se atribuyen con el selector font. Por ejemplo:
p {
font-family: Verdana, Arial;
font-size: 12px;
font-weight: normal;
line-height: 15px;
}
h1 {
font-family: "Times New Roman", Times;
font-size: 18px;
font-style: italic;
text-decoration: underline;
}
La herencia en CSS
Las hojas de estilo mantienen una jeraquía según qué etiqueta contienen a otras. Por ejemplo, la etiqueta <body> será una etiqueta superior (padre) y dentro de ella hay otras otras etiquetas como <p>, <div> o <h1> (etiquetas hijo); en general, las etiquetas hijo heredan las propiedades del padre.
<body>
<h1>Ejemplito</h1>
<p>Este texto está <em>enfatizado</em> y este en
<strong>negrita</strong>.</p>
</body>
Se puede usar un selector descendente para aplicar estilos cuando se cumpla una secuencia de elementos. Por ejemplo:
p em {text-decoration: underline;}
En este caso se subraya el texto enfatizado solo si está contenido en un párrafo. Así, el resultado de:
<h3>Un título <em>cualquiera</em></h3>
<p>
Lorem ipsum <em>dolor</em> sit amet, <strong><em>consectetuer</em>
</strong> adipiscing elit, sed diam nonummy nibh <strong>euismod
tincidunt...</strong></p>
será:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...
Un selector hijo es del tipo:
p > em {text-decoration: underline;}
En este caso se enfatiza texto en un párrafo, pero sólo cuando el texto enfatizado es hijo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...
Los selectores hermanos tienen la forma siguiente:
h2 + h3 {margin-top: 10px;}
Aquí en aplica estilo a <h3> pero sólo cuando <h2> y <h3> tienen el mismo padre y <h3> viene inmediatamente despues de <h2>.
El modelo de cajas
Las hojas de estilo aplican propiedades a elementos HTML como si fueran cajas, las que se le añaden bordes, márgenes, fondos, etc. Por ejemplo, con la etiqueta <div>:
div {border: 5px #000 solid; margin: 5px; padding: 3px;}
aplicado a:
<div>
<div>
<div>
<h2>¡Hola mundo!</h2>
</div>
</div>
</div>
se verá:
%cajanegra% [@ ¡Hola mundo! @]
Los atributos de cajas son los siguientes:
Conjuntos de cajas
El modelo de cajas usando etiquetas div permite hacer esquemas de una página web o parte de ella fácilmente:
Formato de tablas
Con el uso de CSS las tablas pierden protagonismo y se emplean únicamente para mostrar datos tablulares y no para estructurar páginas, al menos en un marcado estricto. Las hojas de estilo permiten formatear tablas con propiedades equivalentes a los estilos con HTML y varias propiedades más. Una tabla con las siguientes propiedades:
#general {
border:
2px #blue solid;
margin:
5px auto;
padding:
4px;
}
#C1 {
border-top:
2px red dotted;
border-bottom:
5px orange
dashed;
border-left:
1px green solid;
border-right:
4px navy dotted;
}
<table class=
"general">
<tr>
<td class=
"C1">Celda
1</td>
<td>Celda
2</td>
</tr>
</table>
Y el resultado es:
Celda 1 Celda 2
Formateando listas
CSS permite cambiar la apariencia de los elementos de listas, muy útil para crear menús y barras de navegación.
ol
{ list-style-type:
upper-roman;
}
ul
{ list-style-type:
circle;
}
<ul>
<li>NGC
3486</li>
<li>NGC
3488</li>
</ul>
<ol>
<li>NGC
3486</li>
<li>NGC
3488</li>
</ol>
resulta:
* NGC 3486
* NGC 3488
1. NGC 3486
2. NGC 3488
Un navegador vertical podría ser el siguiente:
#nav li {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
font-weight: bold;
}
#nav li li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
font-weight: bold;
}
#nav li li a {
background: #bbf;
width: 126px;
height: 1.5em;
border: 1px solid #000;
padding: 0;
margin: 0 0 10px 0;
color: #000;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
font-weight: normal;
letter-spacing: 1px;
line-height: 1.4em;
font-size: x-small;
voice-famliy: ""}"";
voice-famliy: inherit;
font-size: 0.8em;
}
que se verá como:
* Enlace 1
* Enlace 2
* Enlace 3
Estilo de enlaces y efectos
Las hojas de estilo poseen algunas propiedades de efectos basados en comportamiento. Un ejemplo de estilo y comportamiento para enlaces muy común es el siguiente:
a {
color: #005D93;
text-decoration: none;
}
a:hover {
color: #900;
text-decoration: underline;
}
y produce un efecto como este: Google
la propiedad hover es una pseudo-clase que determina lo que ocurrirá cuando el puntero esté encima del enlace. Otras pseudo clases relacionadas con enlaces son:
a:link {color: #FF0000} /* Enlace no visitado */
a:visited {color: #00FF00} /* Enlace visitado */
a:hover {color: #FF00FF} /* El puntero sobre el enlace */
a:active {color: #0000FF} /* Enlace pinchado */
En el estilo de enlaces es importante mantener este orden, aunque no hay porque usarlos todos.
Otra propiedad útil es display, que se puede usar para mostrar u ocultar elementos cuando se desee:
p { display: visible; }
p.oculto { display: none; }
Esta propiedad se puede usar en enlaces para crear comportamientos especiales:
a span { display: none;}
a:hover span {
display: inline;
position: absolute;
}
<a href="">Lorem ipsum <span>dolor sit amet...</span></a>
Y el resultado es este enlace.
Una barra de navegación con CSS
Las hojas de estilo permiten dar formato a las lista para crear menus de navegación muy logrados. Una lista simple con elaces como:
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
</ul>
</div>
Se le puede aplicar un estilo como:
ul#navlist {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}
ul#navlist li {
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}
li#active a {
border-bottom: 1px solid #fff;
background-color: #fff;
}
li#active a { color: #000; }
#navlist a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#navlist a:hover { background: #fff; }
Y el resultado es este menú.
Algunas guias y plantillas para craer menús con CSS se pueden ver en: