En el artículo anterior vimos cómo crear un formulario web con el que recoger datos de un usuario como su nombre, contraseña, etc. Esta vez vamos a ver cómo darle un toque más atractivo a la página, es decir, darle un estilo con CSS. Veremos aspectos básicos de CSS para cambiar los márgenes de los elementos de la web, los colores, tipos y tamaños de letra, etc. Y también veremos como utilizar el framework Bootstrap, que utiliza un estilo propio de manera fácil con la que nos podemos olvidar de complicarnos la vida en algunas cosas de diseño. Además, con Bootstrap haremos que nuestra web sea responsive, es decir, que se adapte a cualquier dispositivo móvil.
CSS es un lenguaje que define el estilo de una página web. Se encarga de especificar cómo será el diseño y estilo de cada elemento de la web. Y cada uno de sus elementos los debemos identificar previamente en nuestro HTML, para así especificar en CSS cómo deben ser. Por ejemplo, en el formulario que hicimos en el post anterior, teníamos un div marcado como class="encabezado", que por ahora sólo contenía el título Mi primera web, sin ningún estilo, simplemente en color negro y alineado a la izquierda. Podemos identificar ese div con el atributo id con un nombre que deberá ser único en toda la página (en todo su fichero .html), o con el atributo class, de manera que podrá haber varios elementos con la misma clase y así decirle al CSS cómo debe ser ese div. Por ejemplo:
<div class="encabezado">
<h1>Mi primera web</h1>
</div>
En este caso, el div está marcado como class="encabezado". Esto quiere decir que será de la clase encabezado, y podrá haber más elementos marcados con la misma clase. Así, cuando le digamos al CSS que la clase encabezado deberá tener un cierto estilo, todos los elementos de esa clase seguirán ese estilo. Sin embargo, podemos tener lo siguiente:
<div id="encabezado">
<h1>Mi primera web</h1>
</div>
En este caso el encabezado está como identificador (id), de manera que en el CSS se marcará el estilo del elemento encabezado, que será único en toda la página. Para dar estilo a un elemento como el div anterior, se puede hacer de dos maneras:
1- Estilo incrustado en el HTML. Esta es la forma a priori más sencilla pero menos recomendada, y consiste en añadir el atributo style a la etiqueta div (para este ejemplo), y especificar qué estilo queremos darle. Esta manera puede ser útil cuando queremos dar un estilo rápido y específico a un elemento concreto y no nos queremos complicar mucho. La manera sería:
<div class="encabezado" style="background-color: red; margin-left: 50%; text-align: center;">
<h1>Mi primera web</h1>
</div>
En este caso, le hemos dicho que ese div tenga como color de fondo el rojo, que el margen por la izquierda sea del 50% del ancho de la página, y que la alineación del texto sea centrada. Pero podemos añadir muchos más estilos, por lo que puede ser engorroso añadir tantos dentro de la propia etiqueta, siendo cada propiedad separada por punto y coma, y cada propiedad poniendo su nombre clave seguido de dos puntos y el valor.
2- Estilo en una hoja de estilos CSS externa. Es la manera más adecuada y habitual. Consiste en escribir un fichero con extensión .css en la que escribimos todos los estilos que queramos para la web. Podemos tener varias hojas de estilos para una misma web, y cambiar de estilo en el propio navegador. Lo ideal sería tener una carpeta css en nuestro directorio raíz del proyecto, y ahí incluir cada fichero .css. Por ejemplo, creamos un fichero llamado estilo.css y lo metemos en la carpeta css. También es habitual tener una carpeta llamada img donde incluir todas las imágenes que vayamos a utilizar.
En la carpeta css meteremos los ficheros .css, y en la carpeta img las imágenes que vayamos a utilizar.
Para poner el mismo estilo de color rojo de fondo, margen 50% a la izquierda y texto centrado, en el fichero estilo.css escribimos:
.encabezado
{
background-color: red;
margin-left: 50%;
text-align: center;
}
Así le estamos diciendo a nuestra hoja de estilos que la clase encabezado (al ser una clase se pone un punto delante) tenga las tres propiedades que queremos con sus respectivos valores. Pero además, tenemos que decirle a nuestro index.html dónde está esa hoja de estilos. Para ello, en nuestro encabezado <head></head>, ponemos:
<link href="css/estilo.css" rel="stylesheet">
Para verlo un poco más claro, en la siguiente imagen se ve el código del index.html, donde se ve con la etiqueta <link> dónde está la hoja de estilos (en la carpeta css, y se llama estilo.css). Debemos borrar la línea style="..." que pusimos anteriormente, pues sería repetitivo y no comprobaríamos el funcionamiento del estilo con el archivo .css.
Si lo hemos hecho correctamente, al refrescar nuestra web veremos algo así:
Gracias al fondo rojo vemos claramente lo que ocupa el div. También podemos observar que este encabezado empieza a mitad de página: esto quiere decir que funciona bien el margen que pusimos del 50%, pues empieza al 50% de página por la izquierda. Y por último, el texto Mi primera web queda centrado dentro del div.
Como se puede intuir, existen multitud de propiedades de diseño que podemos cambiar a nuestros elementos de la web. Como son muchos, aquí no los vamos a ver todos, pero os dejo el enlace del W3Schools donde se muestran ejemplos y explicaciones de cada uno:
Otra cosa que debemos haber tenido en cuenta es que en el ejemplo anterior, hemos dado un estilo a una clase, marcada como class="encabezado". Podríamos tener varios elementos de la misma clase, y todos seguirían el estilo marcado por nuestro CSS. Pero también podemos dar estilos a elementos concretos marcados con su identificador (id), o a elementos marcados por etiquetas. A esto se conoce como selectores, y hay de varios tipos, pero básicamente utilizaremos:
.clase: Para especificar el estilo a una clase, cada elemento debe tener el atributo class="clase", diciéndole de qué clase es, y en el CSS, el nombre de esa clase debe estar precedida por un punto.
#id: Si el elemento es único y está identificado con id="identificador", entonces en el CSS irá precedido por la almohadilla.
elemento: Si es un elemento genérico especificado por su etiqueta, se pondrá su nombre sin más en el CSS. Por ejemplo, podemos querer que los elementos de texto marcados con párrafos <p> tengan cierta fuente tipográfica y estilo, o lo mismo para los <div>, <h1>, etc.
Para cada elemento al que queramos dar estilo, sus propiedades deberán ir incluidas entre llaves, como vimos en el ejemplo anterior. Aquí puedes ver todos los selectores con sus explicaciones y ejemplos. Os recomiendo que investiguéis y probéis con todo tipo de selectores, atributos, propiedades, etc. para ver cómo se comportan vuestros elementos de la web.
...
Una vez visto esto, para dar un estilo básico a nuestra web no necesitamos mucho más. Vamos a darle un estilo a nuestro ejemplo que anteriormente tenía un simple fondo blanco y las letras eran muy básicas y en negro. Por una parte debemos escribir bien el index.html para marcar cada elemento con su id o clase, y por otra parte escribir en el fichero estilo.css las propiedades que queramos tener de estilo para nuestros elementos del formulario. El código del index.html sólo incluye el bloque <body></body>. En negrita se muestran los elementos a los que se da estilo en el CSS.
index.html
<body>
<div class="encabezado">
<h1>Mi primera web</h1>
</div>
<div class="cuerpo">
<form id="registro" name="registro" action="registro.php" method="post">
<h2>Registro de usuario</h2>
<hr>
<h3>Introduce tus datos personales:</h3>
<p>
Nombre de usuario:<br>
<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre" required>
</p>
<p>
E-Mail:<br>
<input type="email" id="email" name="email" placeholder="email@ejemplo.com" required>
</p>
<p>
Contraseña:<br>
<input type="password" id="contrasena" name="contrasena" required>
</p>
<p>
Fecha de nacimiento:<br>
<input type="date" id="fecha-nacimiento" name="fecha-nacimiento">
</p>
<p>
Nacionalidad:<br>
<select id="nacionalidad" name="nacionalidad">
<option value="0">Elije tu país</option>
<option value="1" selected>España</option>
<option value="2">Resto de Europa</option>
<option value="3">Resto del mundo</option>
</select>
</p>
<p>
Foto:<br>
<input type="file" id="foto" name="foto">
</p>
</p>
<p>
<input type="checkbox" id="acepto" name="acepto" required>
Acepto los términos y condiciones
</p>
<hr>
<input class="boton-enviar" type="submit" id="enviar" value="Enviar datos">
</form>
</div>
</body>
estilo.css:
body
{
background-color: #33CCFF;
}
.encabezado
{
background-image: url("../img/fondo-encabezado.jpg");
margin-bottom: 5%;
height: 100px;
text-align: center;
color: yellow;
font-family: verdana;
}
.cuerpo
{
background-color: white;
margin-left: 25%;
margin-right: 25%;
padding: 5% 5% 5% 5%;
font-family: courier;
text-align: center;
}
p
{
font-size: 12px;
}
h2
{
color: blue;
}
input[type=submit]
{
background-color: yellow;
border: none;
padding: 2% 2% 2% 2%;
}
input[type=submit]:hover
{
background-color: orange;
}
Vamos a analizar un poco estos códigos.
body - Lo único que le hemos indicado es el color de fondo del bloque <body></body>.
.encabezado - A esta clase (le hemos puesto el punto delante para indicar que es un class) le hemos indicado una imagen de fondo, que estará en la carpeta img que dijimos anteriormente, siguiendo la nomenclatura url("ruta de la imagen"); También tiene un margen inferior del 5%, así que lo que haya por debajo tendrá una pequeña separación de margen. La propiedad height indica que el alto de este encabezado será de 100 píxels. Nótese que las unidades se pueden indicar en porcentaje (%) o en píxels concretos (px). La alineación del texto será centrada, el color del texto amarillo y la fuente tipográfica Verdana. En la web que indicamos antes del W3Schools se puede mirar más sobre las fuentes, colores, etc.
.cuerpo - Esta clase tendrá un color blanco de fondo, márgenes del 25% a izquierda y derecha, por lo que quedará el bloque centrado con espacios a los lados, separación del 5% por todos los lados, la fuente será Courier y el texto estará centrado. Nos paramos a explicar un poco las propiedades que indican posición (top, bottom, left, right). Cuando queremos poner un margen (margin) o un espacio de separación (padding), podemos indicar el lado concreto de esa propiedad. Por ejemplo, margin-top, o padding-left... Pero también podemos indicarlo todo en una sola propiedad. En nuestro ejemplo tenemos padding: 5% 5% 5% 5%, esto quiere decir que en las cuatro direcciones el espacio de separación será del 5%. Pero también podríamos haber puesto padding-top: 5%; padding-bottom: 5%; padding-left: 5%; padding-right: 5%;
p - A la etiqueta <p> le indicamos que el tamaño de letra será de 12 píxels.
h2 - Los títulos etiquetados con <h2> serán de color azul. Los colores se pueden poner como nombre o como código hexadecimal (ver más información en la web del W3Schools).
input[type=submit] - Dijimos en el post anterior que los inputs pueden ser de varios tipos. Uno de ellos es submit, que viene a ser un botón que envía datos al servidor. Así que en este caso en nuestro CSS estamos especificando el estilo sólo para este tipo de inputs. El botón será de color amarillo, le hemos quitado el borde y la separación será del 2% por todos los lados.
input[type=submit]:hover - Además, para este mismo tipo de input, cuando pasemos el cursor por encima (hover), haremos que cambie su color a naranja.
El resultado de aplicar este CSS a nuestra web es el siguiente:
Hemos visto un poco sobre CSS, pero lo recomendable es que el usuario pruebe por su cuenta todas las posibilidades que crea convenientes y que mire en la web del W3Schools, pues hay muchas propiedades y palabras claves que no merece la pena poner aquí.
Vamos a ver brevemente el framework Bootstrap. Se trata de una herramienta que nos da los estilos ya hechos, muy atractivos y listos para utilizar. Para ello podemos descargarnos los archivos necesarios de la web oficial o simplemente añadir un enlace a nuestro index.html, al igual que hicimos para nuestro estilo.css, pero para vincular a los estilos de Bootstrap que hay online:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Debemos poner la primera línea <link... para el estilo en sí (observemos que es un .css), y el segundo es un enlace a un archivo JavaScript (.js) necesario para el funcionamiento de algunos elementos de este framework.
No vamos a entrar en demasiados detalles sobre el funcionamiento de Bootstrap, podemos ver en su web las secciones de componentes, CSS, etc. y ver cómo aplicar algunos elementos. Para nuestro ejemplo, si quitamos la línea <link... que pusimos con nuestro estilo.css y la cambiamos por las líneas comentadas antes de Bootstrap, tenemos lo siguiente:
Vemos que el estilo es propio de Bootstrap, con sus tipos de letra, pero no tiene márgenes y es bastante sencillo. Podemos arreglarlo un poco, para ello es recomendable descargarse los archivos de Bootstrap y descomprimir la carpeta en nuestro proyecto. Es recomendable renombrarlo a bootstrap, quitando el sufijo que indica la versión. Así, en nuestra carpeta Ejemplo tendríamos las carpetas bootstrap, css e img. Dentro de la carpeta bootstrap hay varias carpetas y archivos. Debemos ir a la carpeta dist, donde hay varias carpatas más. Vamos a su carpeta css y copiamos al menos el archivo bootstrap.css (no confundir con el bootstrap.css.map) a nuestra carpeta propia css. También es recomendable copiar tal cual las carpetas js y fonts a nuestra carpeta raíz, uniéndose así a las de bootstrap, css e img, ya que hay elementos de Bootstrap que necesitan de esos archivos.Volvemos a cambiar nuestra línea <link> para tenerla así:
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" title="Bootstrap">
<link href="css/estilo.css" rel="alternate stylesheet" type="text/css" title="Estilo propio">
Con estas dos líneas estamos indicando que el estilo principal será el bootstrap.css, al que llamamos Bootstrap, y el estilo alternativo será nuestro estilo propio estilo.css. Podemos cambiar de estilo en nuestro navegador, por ejemplo desde Firefox vamos al menú, y en Ver accedemos a Estilo de página, donde elegiremos uno u otro, o incluso podemos ver la web sin ningún estilo.
Si probamos nuestra web, la veremos igual que antes, pues ese archivo bootstrap.css es el mismo que el que hay online y probamos antes sin descargarnos nada. Lo que debemos hacer es añadir diseños propios a este fichero, es decir, abrimos el archivo css/bootstrap.css, que tiene miles de líneas, y al final del todo añadimos nuestros propios estilos. Por ejemplo, podemos añadirle los bloques que pusimos de .encabezado y .cuerpo. Si lo copiamos tal cual, nuestra web cambiará así:
Es casi como nuestro estilo.css pero con algunas diferencias, ya que los diseños de los elementos body, p, h2, input... ya están predefinidos en el fichero bootstrap.css, pero podríamos buscarlos en el fichero y cambiarlos.
Vamos a modificar de nuevo nuestro index.html para añadir algunas propiedades propias de Bootstrap a nuestro formulario, para darle un aspecto algo más atractivo a los inputs y botones. En negrita se indican los atributos propios de Bootstrap que reconoce para darles estilo. Fijaos que hemos sustituido los bloques <p> por bloques <div class="form-control"> que es como lo hace Bootstrap:
<body>
<div class="encabezado">
<h1>Mi primera web</h1>
</div>
<div class="cuerpo">
<form class="form-group" id="registro" name="registro" action="registro.php" method="post">
<h2>Registro de usuario</h2>
<hr>
<h3>Introduce tus datos personales:</h3>
<div class="form-group">
Nombre de usuario:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Introduce tu nombre">
</div>
<div class="form-group">
E-Mail:<br>
<input type="email" class="form-control" id="email" name="email" placeholder="email@ejemplo.com">
</div>
<div class="form-group">
Contraseña:<br>
<input type="password" class="form-control" id="contrasena" name="contrasena">
</div>
<div class="form-group">
Fecha de nacimiento:<br>
<input type="date" class="form-control" id="fecha-nacimiento" name="fecha-nacimiento">
</div>
<div class="form-group">
Nacionalidad:<br>
<select id="nacionalidad" class="form-control" name="nacionalidad">
<option value="0">Elije tu país</option>
<option value="1" selected>España</option>
<option value="2">Resto de Europa</option>
<option value="3">Resto del mundo</option>
</select>
</div>
<div class="form-group">
Foto:<br>
<input type="file" id="foto" name="foto">
</div>
<div class="form-group">
<input type="checkbox" id="acepto" name="acepto" required>
Acepto los términos y condiciones
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Enviar datos">
</form>
</div>
</body>
Como Bootstrap tiene mucho código propio, os recomiendo que miréis su guía y probéis. Hay ejemplos de elementos de formularios con los que podéis practicar. El resultado de aplicar este código sería:
Ahora vemos que los inputs y el botón de enviar datos son distintos. Lo dicho, como hay infinitas posibilidades, debéis practicar y probar cosas propias mirando los ejemplos y guías de la web de Bootstrap.
Y eso es todo. Aunque el artículo puede haber resultado algo largo, en realidad es muy poco lo que se ha visto sobre CSS y Bootstrap, ya que los temas son muy extensos. Pero al menos hemos visto algo con lo que dar un estilo propio y básico a nuestra web. Os recomiendo que practiquéis y cambiéis cosas, márgenes, fondos, colores, tipos de letra, tamaños, etc. Al final el diseño y maquetación de una web consiste en ir probando hasta que nos gusta lo que vemos.
En el próximo artículo veremos por fin cómo crear una base de datos con MySQL y utilizarla para enviar datos al servidor con PHP, pudiendo darle uso a nuestro formulario de registro.
Extra:
