El camino hasta ahora

En anteriores artículos hemos creado nuestro primer hola mundo y lo hemos mejorado utilizando HTML5 para que los navegadores lo interpreten correctamente:

• PHP paso a paso, primera toma de contacto.
• HTML5 y su estructura básica.

Así pues, ya tenemos un documento en HTML5 correctamente formado para que tanto los navegadores como google sean capaces de detectar el contenido de nuestra página.

Pero no sólo queremos que las máquinas interpreten correctamente el contenido, queremos que los navegadores web lo pinten de forma que las personas que accedan a nuestra página la vean con un poco de estilo. Para ello utilizaremos CSS3.

Como tras finalizar este artículo el tamaño del mismo era muy amplio he tomado la decisión de dividirlo en tres partes, pero ambos han de entenderse como un mismo artículo.

CSS3, lo básico.

Voy a intentar explicar los conceptos de CSS3 de la forma más sencilla (y menos formal) posible.

Como ya sabemos, en HTML5 tenemos etiquetas tales como H1, HEADER, NAV, ARTICLE, etc. Gracias al CSS3 podemos aplicar un estilo visual a cada una de esas etiquetas (bueno, gracias a CSS, digo CSS3 porque estamos hablando de su versión 3).

El estilo visual, abarca desde la tipografía a utilizar y su tamaño, hasta la ubicación en la pantalla, pasando por los estilos, colores, imágenes de fondo, etc etc.

Para escribir nuestro CSS3 utilizaremos un fichero nuevo que llamaremos style.css y que ubicaremos al mismo nivel (en el mismo directorio) que nuestro index.php

Lo primero que haremos será determinar el estilo por defecto a utilizar en nuestra página, por lo que en nuestro style.css escribiremos lo siguiente:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}

Vamos a explicar un poco todo este código CSS.

Lo primero que tenemos es un listado de etiquetas HTML separadas por comas (html, body, div, …) que termina con la apertura de una llave ({), seguido de una serie de instrucciones (una por línea) finalizado con el cierre de llave (}). Con esto estamos indicado al navegador que debe aplicar a todas las etiquetas HTML que están en el listado separado por comas, los estilos que se encuentran encerrados por las llaves ({ }).

La primera declaración la hemos realizado para eliminar los posibles valores por defecto ya que los navegadores suelen aplicar unos estilos mínimos. De esta forma iniciamos el pintado desde cero y sin valores por defecto.

• margin: Las etiquetas HTML pueden tener un margen, el margen permite que exista un espacio del tamaño indicado entre las diferentes etiquetas. Nosotros, de entrada lo que hacemos es eliminar todo margen. El margin se puede dividir en 4  propiedades diferentes: margin-top, margin-right, margin-bottom y margin-left que utilizaríamos en vez de margin cuando quisiésemos alterar los márgenes de algunos lados.
• padding: El padding es el margen interior de la etiqueta. Cuando hablamos de margin estamos refiriéndonos al margen exterior, en el caso de padding es interno. O sea, si ponemos un padding a una etiqueta y esta etiqueta tiene un borde, el espacio del padding se aplicaría dentro del borde, el margin sería por fuera.
• border: Eliminamos los posibles bordes. Es habitual en los navegadores que las imágenes (img) tengan un borde visible cuando son un enlace.
• font-size: El tamaño de la tipografía; ponemos 100% para que, por defecto, todas las etiquetas utilicen el mismo tamaño, que declararemos posteriormente.
• vertical-align: Se trata de la alineación vertical del texto o de los elementos. Por defecto vamos a ponerlo en baseline para que todos tengan el mismo tipo de alineación. Para que el vertical-align funcione, es vital que la etiqueta HTML dónde se utiliza se visualice en modo inline y no en modo block (esto se verá más adelante).

También tenemos en nuestro CSS una declaración de estilos para el body en la cual aplicamos los estilos de fuente:

• font-size: Establecemos un tamaño en píxeles para la fuente. Vemos que la font-size está doblemente declarada y con dos valores, 14px y 1rem. El rem es una forma de indicar al navegador que el tamaño de la fuente es relativo al tamaño que tiene la fuente en el body. Lo explicaremos cuando declaremos los estilos para nuestro H1. Ahora basta con quedarnos con la idea de que realmente el font-size que queremos utilizar es el que tiene el valor en rem, pero como no todos los navegadores soportan este valor, también declaramos el font-size en píxeles para que sea utilizado en los navegadores sin soporte rem.
• font-family: Aquí podemos decir que tipo de fuente vamos a utilizar, en nuestro caso hemos puesto Helvetica como la tipografía a utilizar. Si estuviésemos viendo la página desde un ordenador dónde no estuviese instalada la fuente Helvética, intentaría utilizar la Arial; de no existir tampoco la Arial, utilizaría la tipografía por defecto para la familia genérica sans-serif. Todas las tipografías pertenecen a una familia genérica y tenemos 5 posibles: serif, sans-serif, cursive, fantasy y monospace. Es obligatorio que en nuestra declaración del font-family exista como alternativa la familia genérica a la que pertenezca nuestra fuente escogida.
• text-rendering: Gracias a esta propiedad de CSS podemos indicarle al navegador el esfuerzo que deben realizar a la hora de renderizar las tipografía. Hemos utilizado el valor optimizeLegibility ya que de esta forma le damos más importancia a la legibilidad (frente a la velocidad), lo que hará que aumente sensiblemente la calidad de visualización de nuestra tipografía.
• color: Valor, normalmente hexadecimal, que se corresponde con el color de la fuente.

Actualización 13/08/2014

Como indica andresgl en los comentarios, la primera regla CSS puede cambiarse por otra más sencilla, utilizando el selector universal para ello:

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}

De esta forma, las propiedades se aplican a todas las etiquetas HTML y nos asegurarnos no dejar ninguna atrás.

CSS3, empezando a aplicar estilos en nuestro HTML5

Bueno, vamos a ver qué hemos conseguido con nuestras dos declaraciones de CSS, por lo que necesitamos incorporar algo en nuestro HTML que le indique al navegador web que tenemos un fichero CSS que debe leer e interpretar. Esto lo haremos colocando el siguiente código dentro del HEAD:

<link rel="stylesheet" id="global-css" href="./style.css" type="text/css" media="all" />

Utilizamos la etiqueta link, dentro de ella tenemos una serie de atributos importante:

• rel=»stylesheet»: Aquí es dónde le decimos que es una hoja de estilos.
• id: El ID es un atributo opcional que comparten todas las etiquetas HTML y se utiliza para diferenciar de forma única una etiqueta concreta. Esto nos será útil en CSS3.
• href: La url del fichero a cargar, en nuestro caso de nuestro style.css
• media: El atributo media es muy importante. Nosotros le hemos asignado valor all, lo que significa que siempre se leerá esta hoja de estilos, pero tiene otros valores que puede tomar. Actualmente es utilizado para el responsive design y para aplicar unos estilos específicos a la hora de imprimir el contenido. En genbeta hay una introducción a las media en CSS3 muy interesante.

Así pues, nuestro index.php queda así:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title><?php echo 'Hola Mundo!'; ?></title>
		<link rel="stylesheet" id="global-css" href="./style.css" type="text/css" media="all" />
	</head>
	<body>
		<header>
			<h1><?php echo 'Hola Mundo!'; ?></h1>
			<!-- <nav>El men&uacute; si procediese</nav> --> <!-- Etiqueta comentada al no tener men&uacute; -->
		</header>
		<section>
			<article>
				<h2><?php echo 'Nuestra primera p&aacute;gina PHP'; ?></h2>
				<?php echo 'Nuestra primera p&aacute;gina realizada en PHP con HTML5'; ?>
			</article>
		</section>
		<aside>
			<h3><?php echo 'Art&iacute;culos relacionados';?></h3>
			<ul>
				<li><a href="//rolandocaldas.com/php/primera-toma-de-contacto-php-paso-a-paso" target="_blank"><?php echo 'Primera toma de contacto'; ?></a></li>
				<li><a href="//rolandocaldas.com/php/html5-estructura-basica" target="_blank"><?php echo 'HTML5 estructura b&aacute;sica'; ?></a></li>
			</ul>
		</aside>
		<footer>
			<?php echo 'Creado por rolandocaldas.com'; ?>
		</footer>
	</body>
</html>

y el resultado de los estilos es el siguiente:

Bueno, hasta ahora el resultado no es que sea bonito, pero vamos a empezar a darle un poco de color. Lo primero que vamos a hacer es aplicar un margen a nuestro head y, además, vamos a cambiar el tamaño de nuestro h1 incorporando borde a todo el head para que actúe de separador:

header {
	margin: 10px;
	margin: 0.714285714rem;
	border: 1px solid black;
	padding: 10px;
	padding: 0.714285714rem;
}

header h1 {
	font-size: 20px;
	font-size: 1.428571429rem;
}

Bien, vemos que en la declaración del header hemos puesto el borde, que será una línea continua de un pixel de grosor y hemos establecido un margen exterior (margin) e interior (padding) de 10 píxeles. Vemos cómo tenemos el valor en rem para el margin y padding, este rem es el valor resultante de dividir los 10px entre los 14px del font-size que por defecto tiene el documento (body) tal y como nosotros declaramos.

Además, hemos hecho una declaración «header h1» esto significa que se aplicará el estilo a todos los h1 que estén dentro de una etiqueta header. Cualquier h1 que no esté dentro de un header ignorará esta declaración. Para el h1 hemos cambiado el tamaño de la fuente para que sea de 20px.

Bueno, empezamos a notar alguna mejoría, vamos a aplicar también el borde y la separación a otras etiquetas para que mejore un poco más el documento. Nuestro style.css quedaría así:

header, section article, aside, footer {
	margin: 10px;
	margin: 0.714285714rem;
	border: 1px solid black;
	padding: 10px;
	padding: 0.714285714rem;
}

Como el margen y borde a aplicar en todas las etiquetas iba a ser el mismo, en vez de hacer declaraciones nuevas fui a la declaración de estilos del header y le agregué (separadas por comas) las otras etiquetas: los article que están dentro de un section y los aside.

Vaya, vemos que los puntos de nuestro listado salen fuera del borde. Para solucionarlo vamos a tener que aplicar un poco más de estilos, esta vez pondremos un margen izquierdo de 20px al listado para que quede alineado (10 por el margin y 10 por el padding). Tenemos que agregar lo siguiente a nuestro CSS3:

ul {
	margin-left: 20px;
	margin-left: 1.428571429rem;
}

CSS3 para ubicar nuestros elementos en la pantalla.

Gracias al CSS3 ya tenemos bien diferenciado en nuestra pantalla cada uno de los bloques de información, pero queremos más. Nuestro objetivo es mostrar los artículos relacionados (el aside) a la derecha del contenido principal (nuestro section con un article dentro). Para ello, antes de CSS3 teníamos varias opciones aunque no eran más que apaños; pero ya tenemos una forma correcta de hacerlo.

Lo primero que vamos a hacer es modificar el ancho de las etiquetas de nuestro documento. Queremos que nuestro section ocupe el 60% de la pantalla y que nuestro aside ocupe el 30%, por lo que en nuestro CSS3 declaramos lo siguiente:

section {
	width: 60%;
}

aside {
	width: 30%;
}

Bien, bien… vamos avanzando. Sin embargo aunque nuestras diferentes zonas ya tienen un ancho, los artículos relacionados no se han puesto al mismo nivel que «Nuestra primera página PHP». Esto es así porque aunque el ancho sea diferente, las etiquetas tienen por defecto un display block.

En CSS3 tenemos, al igual que en CSS2, una propiedad llamada display. El display lo que hace es definir el tipo de caja que va a ser generada por la etiqueta. Podría detallar el funcionamiento de la etiqueta display, pero en www.lawebera.es hay dos artículos muy buenos al respecto:

• CSS avanzado: la propiedad display (primera parte)
• CSS avanzado: la propiedad display (segunda parte)

En nuestro caso, para ubicar un elemento al lado de otro, utilizaremos el display: inline-block y, además, eliminaremos el margen izquierdo para el aside, por lo que modificaremos en nuestro style.css la declaración del section y del aside:

section {
	width: 60%;
	display: inline-block;
}

aside {
	width: 30%;
	display: inline-block;
	margin-left: 0;
}

Ya los tenemos ubicados uno al lado del otro… aunque seguimos teniendo algo extraño. Se supone que nuestro section debería aparecer alineado arriba, pero tenemos un hueco en blanco y se alinea con el pie y no con la parte superior. Esto es así por la primera declaración de nuestro CSS3 en el que indicábamos vertical-align: baseline; vamos a tener que cambiar esta propiedad para nuestro section y nuestro aside:

section {
	width: 60%;
	display: inline-block;
	vertical-align: top;
}

aside {
	width: 30%;
	display: inline-block;
	margin-left: 0;
	vertical-align: top;
}

GitHub: CSS3 básico parte 1 – PHP paso a paso

En la próxima entrega

Gracias al CSS3, al ver nuestra página web desde un navegador ya tenemos una distribución de los elementos más interesante; aunque todavía no hemos utilizado el potencial de CSS3.

Será en la próxima entrega donde profundizaremos algo más en CSS3 de forma que podamos utilizar bordes redondeados y sombras en nuestras cajas, tipografías especiales y sombreado para las fuentes. Aunque todo esto no es más que lo básico de lo básico en CSS3!!