Índice

Mi Página web en CSS .................................................................................................................................. 3

CSS ................................................................................................................................................................ 3
En qué consiste? ....................................................................................................................................... 4
CSS Syntax ................................................................................................................................................ 4
Comentarios ............................................................................................................................................. 4
Llamar el fichero CSS desde HTML ............................................................................................................... 5
Atributo class ................................................................................................................................................ 5
Color de fondo .............................................................................................................................................. 5
Propiedades de background ..................................................................................................................... 5
Para poner una imagen de fondo hay que poner lo siguiente: ................................................................ 5
Para una imagen degradada: .................................................................................................................... 5
Para una imagen de fondo y horizontal: .................................................................................................. 6
Ajuste la altura de una imagen ................................................................................................................. 6
Ajusta la altura máxima y mínima de un elemento ..................................................................................... 6
Configurar la forma de un elemento “imagen” ........................................................................................ 7
Posición de un elemento con valor absoluta ........................................................................................... 7
Posición relativa ....................................................................................................................................... 7
Imágenes flotantes ................................................................................................................................... 7
Imágenes flotantes con linea entre las tablas .......................................................................................... 8
Crear Imágenes transparentes ................................................................................................................. 8
Color texto: ................................................................................................................................................... 8
Alinear texto: ............................................................................................................................................ 9
Sangría en el texto .................................................................................................................................... 9
Lineas en el texto ...................................................................................................................................... 9
Cambiar la letra del texto: ........................................................................................................................ 9
Ajuste el estilo de la fuente ...................................................................................................................... 9
Tamaño del texto...................................................................................................................................... 9
Espacios entre palabras: ........................................................................................................................... 9
Texto centrado y con color de fondo ..................................................................................................... 10
Texto a la derecha con color de fondo ................................................................................................... 10
Viñetas en el texto .................................................................................................................................. 10
Viñetas en el texto de color .................................................................................................................... 11
Establece el margen superior del texto .................................................................................................. 11
Ajusta el margen del texto de derecha e izquierda ................................................................................ 11

1
 La primera letra del párrafo que flote a la izquierda o derecha ............................................................. 12
Texto dentro de una imagen .................................................................................................................. 12
Introducir comillas””, mayor que <<>> en un texto….. .......................................................................... 13
Quitarle le línea que viene por defecto en un enlace o hipervínculo: ....................................................... 13
Añadir color a los hipervínculos de los enlaces ...................................................................................... 13
Especificar un color de fondo para los enlaces ...................................................................................... 13
Elementos de flotación ............................................................................................................................... 14
Tablas ......................................................................................................................................................... 14
Border en tablas ..................................................................................................................................... 14
Ajuste el ancho y alto de la tabla............................................................................................................ 15
Añadir una caja “una tabla” de texto ..................................................................................................... 15
Ajuste la alineación del texto de la tabla: {text-align:right;} ................................................................ 16
Ajuste la alineación vertical del contenido ............................................................................................. 16
Especifique el espacio entre el border de la tabla y el texto .................................................................. 16
Cajas en CSS “ponerle el grosor, color de una tabla” ............................................................................. 16
Definir el estilo de los border de la tabla ............................................................................................... 17
Combinar diferentes estilos en los bordes de una tabla ........................................................................ 17
Grosor al border de la tabla.................................................................................................................... 18
Especifique el color de los border de la tabla ......................................................................................... 18
Ajustar el color de los border de las tablas ............................................................................................ 18
Cómo crear una barra de desplazamiento cuando el contenido de un elemento es demasiado grande
para caber................................................................................................................................................... 18
Valores de la propiedad de overflow ..................................................................................................... 19
Cambiar el cursor “debe estar dentro de body” ........................................................................................ 19
Menu horizontal ......................................................................................................................................... 19
Menu vertical ............................................................................................................................................. 20
Crear una página web sin tablas................................................................................................................. 20
Formulario .................................................................................................................................................. 21

2
Estilo CSS

Mi Página web en CSS

Crear un fichero librería con los códigos que quieras que te aparezca en el menú

<?
function mf_cabecera($titulo ,$fondo)
{
?>
<head>
<title><?=$titulo?></title>
<br>
<meta charset="utf-8">
<link rel="stylesheet" href="css/superfish.css" media="screen">
<script src="css/jquery-1.9.0.min.js"></script> <!-- PARA QUE FUNCIONE CON IE -->
<script src="css/superfish.js"></script> <!-- PARA QUE FUNCIONE CON IE -->
<script>
// initialise plugins
jQuery(function(){
jQuery('#example').superfish();
});
</script>
</head>
<body background = "<?=$fondo;?>">

Lo que está de color verde es el CSS para que en el menú salga una flecha indicándote que hay submenú
abajo

CSS
El estilo CSS empiezan siempre con las etiquetas <style> y termina con </style>
Y muy importante al crear etiquetas, debes poner { “abierto” , } “cerrado”

Ejemplo:

<html>
<head>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;

3
 }
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>

En qué consiste?

Este código consiste en ir creando etiquetas que después vayas a introducir en el body, por ejemplo; si
vas a meter en el cuerpo un titulo en la parte CSS creas una etiqueta llamada h1 y hay le meter el
color: blue; si además quieres ponerle un tipo de letra font-family:” Times New Roman”;

Ejemplo:

<style>
h1
{
font-family:”Times New Roman”;
color:blue;
}
<body>
<h1>Hola esto es una prueba</h1>
</body>
</style>

CSS Syntax

Un CSS tiene dos partes principales: un selector, y una o mas declaraciones:

El selector es el elemento HTML que se quiere Estilizar.

Cada declaración es una propiedad y un valor.
Una declaración CSS siempre acaba con un punto y coma, y una declaración se agrupa por
llaves {}.

Comentarios

Un comentario comienza con ”/*” y finalize con “*/”

4
Llamar el fichero CSS desde HTML

<LINK href='nombre.css' type=text/css rel=stylesheet>

Atributo class

El selector de clase utiliza el atributo class HTML y se define con un "."

Una clase class es como una etiqueta inventada que añadimos al estilo style la clase que deberemos
poner en el cuerpo, será la que esté detrás del punto. Y siempre ira entre comillas “”

Estos son los estilos style

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}

Esto deberá ponerse en el cuerpo body

<a class="two" href="default.asp"
<a class="three" href="default.asp"

Color de fondo

La propiedad background-color especifica el color de fondo de un elemento.

Propiedades de background

background -image
background-repeat
background-attachment
background-position
color de fondo

body {background-color:#b0c4de;}

Para poner una imagen de fondo hay que poner lo siguiente:

body
{
background-image:url('paper.gif');
}

Para una imagen degradada:

<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>

5
Para una imagen de fondo y horizontal:

La propiedad background-image especifica una imagen para utilizarla como fondo de un elemento.
Por defecto, la imagen se repite por lo que cubre la totalidad del elemento.

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
background-position:center;
}

Body {background-repeat:repeat-y;} // la y es la imagen vertical, x es la imagen horizontal

Body {background-repeat:repeat-x;}

Valores de la propiedad

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Ajuste la altura de una imagen

img.normal {height:auto;}
img.big {height:40%;}
img.small {height:10%;}
img {width:200px;} // la anchura
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" /><br>
<img class="small" src="logocss.gif" width="95" height="84" />
</body>

Ajusta la altura máxima y mínima de un elemento

p
{
max-height:50px; // altura máxima
background-color:yellow;
min-height:100px; // altura minima
}

6
Configurar la forma de un elemento “imagen”

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Posición de un elemento con valor absoluta

h2
{
position:absolute;
left:100px;
top:150px;
}

Posición relativa

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>

Imágenes flotantes

.thumbnail
{
float:left; o float:right;
width:110px; // este código debes crearle una img class=” thumbnail” en el <body>
height:90px;
margin:5px;
}

7
Imágenes flotantes con linea entre las tablas

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}

Crear Imágenes transparentes

img
{
opacity:0.4;
filter:alpha(opacity=40); }
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); }

Color texto:

La propiedad de color se utiliza para establecer el color del texto

Este texto es de estilo con algunas de las propiedades de formato de texto. El título utiliza el texto-align,
text-transform y propiedades de color. El párrafo tiene sangría, alineados, y se especifica el espacio
entre caracteres.

Body
{
color:red;
}
h1
{
color:#00ff00;
}

8
Alinear texto:

La propiedad text-align se utiliza para establecer la alineación horizontal del texto.

El texto puede estar centrado o alineado a la izquierda o a la derecha o justificado.

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Sangría en el texto

La propiedad text-indent se utiliza para especificar la sangría de la primera línea de un texto

<style>
p {text-indent:50px;}

Lineas en el texto

<style>
h1 {text-decoration:overline;} // Linea arriba del texto
h2 {text-decoration:line-through;} // Tachar el texto
h3 {text-decoration:underline;} // Linea debajo del texto
</style>

Cambiar la letra del texto: {Font-family:”Time New Roman”, Times, serif;}

Comience con la fuente que desee, y terminar con una familia genérica, para que escoja el navegador
una fuente similar en la familia genérica, si no hay otras fuentes disponibles.

La familia de fuentes de un texto se establece con la propiedad font-family.

La propiedad font-family debe contener varios nombres de fuente como un sistema de "reserva". Si el
navegador no es compatible con la primera fuente, trata la siguiente fuente.

Nota: Si el nombre de una familia de fuentes es más de una palabra, debe ser entre comillas, como
font-family: "Times New Roman".

Ajuste el estilo de la fuente

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Tamaño del texto: {font-size:250%;}

La propiedad font-size establece el tamaño del texto

Espacios entre palabras: { word-spacing:30px;}

9
Texto centrado y con color de fondo
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">

Texto a la derecha con color de fondo

.right .right
{ {
position:absolute; float:right;
right:0px; width:300px;
width:300px; background-
background- color:#b0e0e6;
color:#b0e0e6; }
}

Viñetas en el texto

El tipo de lista de marcadores artículos se especifica con la propiedad list-style-type

ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;} // cuadrado
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

10
Viñetas en el texto de color

Para especificar una imagen como marcador de elemento de lista, utilice la propiedad list-style-image

<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

Establece el margen superior del texto

<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm top margin.</p>

Ajusta el margen del texto de derecha e izquierda

Es posible especificar diferentes rellenos para diferentes lados

<style>
p.padding
{
padding-left:2cm;
}
p.padding2
{
padding-left:50%;
}
</style>
</head>
<body>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

11
La primera letra del párrafo que flote a la izquierda o derecha

<style>
span
{
float:left; o float:right;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text…….
-------------------------------------------------------------------------------
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>

<body>
<p>You can

Texto dentro de una imagen

En primer lugar, se crea un elemento div (class = "background") con una altura fija y anchura, una
imagen de fondo, y una frontera. Entonces creamos un div más pequeño (class = "transbox") dentro del
primer elemento div. El div "transbox" tiene un ancho fijo, un color de fondo y una frontera - y es
transparente. Dentro de la div transparente, añadimos un poco de texto dentro del elemento ap.

div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
}
div.transbox p

12
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>This is

Introducir comillas””, mayor que <<>> en un texto…..

<style>
q:lang(en)
{
quotes: "«" "»" "'" "'";
}
</style>
</head>
<body>
<p><q>This is a <q>big</q> quote.</q></p>

q:lang(no)
{
quotes: "~" "~";
}

Quitarle le línea que viene por defecto en un enlace o hipervínculo:

La propiedad text-decoration se utiliza sobre todo para eliminar subraya de enlaces para propósitos de
diseño

<style>
a
{
text-decoration:none;
}
</style>
<body>
<p>Link to: <a href="http://www.w3schools.com">W3Schools.com</a></p>
</body>

Añadir color a los hipervínculos de los enlaces

<style>
a:link {color:#FF0000;} // define el color antes de pinchar en el enlace
a:visited {color:#00FF00;} // defina el color del enlace cuando lo hayas visitado
a:hover {text-decoration:underline;} // se subraya al pasar el ratón “hover”

Sangria en el texto

Especificar un color de fondo para los enlaces

a:link {background-color:#B2FF99;} // al pasar el ratón se verá el texto de otro color

13
a:visited {background-color:#FFFF85;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;} // esto es para que al pasar el ratón se agrande el texto

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;} // al pasar el ratón se pone un color de fondo

La clase class se deberá crear cuando se añade una nueva clase al style
<b><a class="three" href="default.asp" target="_blank">This link changes color</a></b>

Elementos de flotación

Los elementos se flotaron horizontal, esto significa que un elemento sólo puede ser flotado hacia la
izquierda o la derecha, no hacia arriba o hacia abajo.
Un elemento flotante se moverá hacia la izquierda o hacia la derecha como sea posible

img
{
float:right;
}

Si coloca varios elementos flotantes, uno tras otro, van a flotar junto a la otra, si hay lugar

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Tablas

Border en tablas

Para especificar bordes de la tabla en CSS, utilice la propiedad border

<style>
table,th,td // th – linea de cabecera resaltada
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>

14
<td>Peter</td>
<td>Griffin</td>
</tr>

Ajuste el ancho y alto de la tabla

Anchura y altura de una tabla se define mediante las propiedades width y height

table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}

Añadir una caja “una tabla” de texto

Los cuatro estados enlaces son los siguientes:

a: link - un enlace sin visitar normales
a: visited - un vínculo que el usuario ha visitado
a: hover - un enlace cuando el usuario coloca el ratón sobre ella

Al configurar el estilo de varios estados de los enlaces, hay algunas reglas de orden:
a: hover debe venir después: link y: visited un activo debe ser posterior a: hover

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

a:link,a:visited // color del link visitado

{
display:block; // te crea una tabla
font-weight:bold;
color:yellow; // color del texto de la tabla “aquí no valdría text-color:”
background-color:grey // color de fondo de la tabla
width:120px; // el ancho de la tabla
text-align:center;
padding:4px; // el margen de dejas entre la table y el texto
text-decoration:none; // esto es para que no haga ningún estilo
}
a:hover,a:active // activa lo de cambiar el color al pasar el ratón
{
background-color:#7A991A;
}

La propiedad background-color especifica el color de fondo para los enlaces

La propiedad text-decoration se utiliza sobre todo para eliminar subraya de enlaces:

15
a:link {text-decoration:none;}, a:visited {text-decoration:none;}, a:hover {text-decoration:underline;},
a:active {text-decoration:underline;}

Ajuste la alineación del texto de la tabla: {text-align:right;}

El texto de una tabla está alineada con las propiedades text-align

Ajuste la alineación vertical del contenido

td
{
height:50px;
vertical-align:bottom;

Especifique el espacio entre el border de la tabla y el texto

Para especificar bordes de la tabla en CSS, utilice la propiedad border

Para controlar el espacio entre el borde y el contenido de una tabla, utilice la propiedad padding de td y
elementos th:

td
{
padding:15px;
}

Cajas en CSS “ponerle el grosor, color de una tabla”

El modelo de caja nos permite colocar un borde alrededor de los elementos y los elementos del espacio
en relación con otros elementos.

*Margen - Borra un área alrededor de la frontera. El margen no tiene un color de fondo, es

completamente transparente
*Border - Un borde que va alrededor del relleno y contenido. La frontera se ve afectado por el color de
fondo de la caja
*Relleno - Borra un área alrededor del contenido. El relleno se ve afectado por el color de fondo de la
caja
*Contenido - El contenido de la caja, en la que aparecen el texto y las imágenes

{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

16
Definir el estilo de los border de la tabla

<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>

Combinar diferentes estilos en los bordes de una tabla

p
{
border-top-style:double;
border-right-style:solid;
border-bottom-style:double;
border-left-style:solid;
width:30%;
color:red; // color del texto
border-color:blue red gray;
// color de los border en orden el 1ª es la parte de arriba, el 2ª son los laterales y el 3ª es el de abajo
}

17
Grosor al border de la tabla

La propiedad border-style especifica qué tipo de borde que desea visualizar

<style>
p.one
{
border-style:groove;
border-width:15px; // Indica el grosor
border-color:#280000;
}
</style>
</head>

<body>
<p class="one">Some text.</p>

Especifique el color de los border de la tabla

Especifica el color de los bordes, el texto y el color de fondo de elementos th:

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Ajustar el color de los border de las tablas

p.one
{
border-style:solid;
border-color:#0000ff;
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>

Cómo crear una barra de desplazamiento cuando el contenido de un

elemento es demasiado grande para caber

div
{
background-color:#00FFFF;
width:150px; // overflow “desplazar en este caso abajo”
height:150px;
overflow:auto;}

18
Valores de la propiedad de overflow

Visible: div{overflow:visible;}
Hidden “oculto”: div{overflow:hidden;}
scroll “desplazarse: div{overflow: scroll;}
Auto: div{overflow: auto;}

Cambiar el cursor “debe estar dentro de body”

La propiedad cursor especifica el tipo de cursor que se muestra cuando se apunta a un elemento

<span style="cursor:auto">auto</span><br> // cursor como cuando escribes en el word

<span style="cursor:default">default</span><br> // una flecha
<span style="cursor:e-resize">e-resize</span><br> // flecha horizontal
<span style="cursor:help">help</span><br> // flecha con una interrogación abajo
<span style="cursor:move">move</span><br> // flecha en forma de cruz
<span style="cursor:n-resize">n-resize</span><br> // flecha en vertical
<span style="cursor:ne-resize">ne-resize</span><br> // flecha inclinada hacia la izquierda
<span style="cursor:nw-resize">nw-resize</span><br> // flecha inclinada hacia la derecha
<span style="cursor:pointer">pointer</span><br> // flecha con forma de mano
<span style="cursor:progress">progress</span><br> // flecha con forma de circulo

Menu horizontal

Una barra de navegación necesita HTML estándar como base

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
-------------------------------------------------------------------------
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white; // color de las letras
background-color:purple; // color de fondo
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;} // color que se pone al pasar el ratón
li {display:inline;}

19
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

Menu vertical
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}

Crear una página web sin tablas

<html>
<head>
<style>
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;

20
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to
explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>

Formulario

input:focus
{
background-color:yellow;
}

21