Los estilos CSS son usados para configurar una página web definiendo la apariencia y colocación de sus diferentes elementos, ofreciendo la ventaja de que si modificamos un estilo se actualizarán automáticamente todos los elementos a los que se haya aplicado.
Podemos incluir estilos CSS en nuestras páginas web de dos formas, tal y como hemos indicado en nuestro Tutorial de HTML: usando la etiqueta HTML <style> dentro de <head>, o bien creando un archivo de Hoja de Estilos CSS (normalmente con extensión .css) y enlazándolo a la página web con la etiqueta <link>.
Lo recomendable es tenerlos en un archivo externo, puesto que con ello separamos el contenido (el archivo .html) de la presentación (el archivo .css): de este modo podremos usar la misma Hoja de Estilos CSS desde varias páginas web sin tener que repetir código en cada una de ellas.
Durante el presente curso de CSS usaremos de base las siguientes páginas web (el código CSS deberás guardarlo en un archivo de Hoja de Estilos aparte llamado 'estilos.css' (aunque podría ser otro nombre), en la misma carpeta en que esté el archivo html anterior).
Más adelante encontrarás ejemplos preparados para descargar.
index1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<p>Esta es una línea.</p>
<p>Esta es una línea.</p>
<span id="rojo">Este texto está en rojo.</span><br/>
<span class="verde">El texto de esta línea está en verde.</span><br/>
<span class="verde">Esta línea está en verde también.</span><br/>
<span class="verde">Y esta también está en verde.</span>
</body>
</html>
index2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<p>Este párrafo está dentro del body y fuera del div.</p>
<div>
<p>El texto de esta línea está en rojo.</p>
<span class="verde">Esta línea está en verde.</span>
</div>
</body>
</html>
index3.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">
<p>Esto es un párrafo.</p>
</div>
<div id="div2">
<p>Esto es otro párrafo.</p>
</div>
</body>
</html>
index4.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">
<span>Esto es un párrafo.</span>
</div>
<div id="div2">
<span>Esto es otro párrafo.</span>
</div>
</body>
</html>
index5.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<p>Lista desordenada:</p>
<ul id="lista1">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ul>
<p>Lista ordenada:</p>
<ol id="lista2">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ol>
</body>
</html>
index6.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<a href="http://www.google.es/">Ir a Google</a><br/>
<a href="http://www.yahoo.es/">Ir a Yahoo</a>
</body>
</html>
index7.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<table border="1">
<caption>I. Tabla de ejemplo</caption>
<thead>
<tr>
<th>AÑO</th>
<th>VENTAS</th>
</tr>
</thead>
<tbody>
<tr>
<td>2010</td>
<td>100.000</td>
</tr>
<tr>
<td>2011</td>
<td>110.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>210.000</td>
</tr>
</tfoot>
</table>
</body>
</html>
index8.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<a href="http://www.google.es/">Ir a Google</a>
</body>
</html>
index9.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div>Texto en el div</div>
<span>Este texto está dentro del body y fuera del div</span>
</body>
</html>
index10.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
</div>
</body>
</html>
index11.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
<p>Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum</p>
</div>
<div id="div2">
<p>Esto es otro párrafo.</p>
</div>
</body>
</html>
index12.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">
<div id="div2">
<p>Este div está dentro del otro</p>
</div>
</div>
</body>
</html>
index13.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">Texto en div1</div>
<span id="span1">Texto en span1</span>
<span id="span2">Texto en span2</span>
<span id="span3">Texto en span3</span>
<span id="span4">Texto en span4</span>
<span id="span5">Texto en span5</span>
<span id="span6">Texto en span6</span>
</body>
</html>
Observa que en el código HTML hacemos uso del Doctype XHTML 1.0 Transitional para escribir XHTML válido, evitando con ello también posibles problemas de visualización en diferentes navegadores web.
Lamentablemente no todos los navegadores web soportan todas las características del estándar CSS del mismo modo, siendo Internet Explorer el que más problemas ocasiona a los maquetadores web debido a ello (aunque en las últimas versiones han mejorado su soporte).
Si deseamos poner comentarios en el código CSS hemos de escribirlos entre /* y */.
Relacionado: [ Doctype ] - [ Escribir código XHTML válido ]
Lo primero que tenemos que aprender es cómo acceder a elementos HTML desde CSS. Para ello, en la siguiente imagen de ejemplo observa que en el código CSS, para acceder a un elemento HTML se crea un selector y luego se definen los atributos deseados entre llaves:
Al cargar la página veremos lo siguiente:
Hemos usado los siguientes tipos de selectores:
- Selectores de etiqueta (1º y 2º): para acceder a una determinada etiqueta HTML todas las veces que aparezca en la página web, simplemente tenemos que escribirla como selector.
- Selector de ID (3º): para acceder a una etiqueta HTML que tiene asignado un id (no debe haber más de una con el mismo en el código HTML).
- Selector de clase (4º): para acceder a las etiquetas HTML que tienen asignada una determinada clase CSS.
Otra forma de acceder a un elemento HTML es usando un selector descendente como vemos en el código fuente del siguiente ejemplo:
El resultado sería:
En el código CSS asignamos un color azul al texto de la etiqueta HTML <p> que se encuentra dentro del <div> (en la que está fuera no se realizan cambios).
En caso de necesitar acceder desde CSS a elementos HTML <input>, los cuales pueden ser de varios tipos (text, button, submit...) podemos hacerlo del modo indicado en el siguiente código CSS de ejemplo:
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
}
También podemos agrupar selectores separándolos con comas. En el siguiente código CSS definimos que los textos en las etiquetas HTML <p> y <span> deben mostrarse en color azul:
p, span {
color:blue;
}
En el anterior ejemplo hemos usado selectores normales, pero podemos hacerlo con cualquier otro tipo de ellos.
Finalmente, si a un elemento HTML se le aplican estilos CSS desde varios selectores, tiene preferencia el selector de ID sobre el selector de etiqueta, y éste a su vez sobre el selector de clase.
Relacionado: [ Formularios en HTML ] - [ Selectores CSS ] - [ Listado de colores ]
