CSS3 básico parte 1 – PHP paso a paso

css3

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:

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:

Resultado de aplicar estilos. Vemos que todo sale sin márgenes!

Resultado de aplicar estilos. Vemos que todo sale sin márgenes!

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.

Algo empieza a cambiar!

Algo empieza a cambiar!

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.

Aplicados márgenes y bordes... aunque algo raro pasa!!

Aplicados márgenes y bordes… aunque algo raro pasa!!

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;
}
Ahora sí!

Ahora sí!

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%;
}
css3-html5-hola-mundo5

Las cajas ya tienen su ancho diferenciado!

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:

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;
}
up, up, up!

up, up, up!

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;
}
css3-html5-hola-mundo7

Ahora sí!

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!!

7 pensamientos en “CSS3 básico parte 1 – PHP paso a paso

  1. Hola:
    Artículor muy pero que muy interesante. Tengo una duda, a ver si me puedes ayudar. Vaya por delante que soy totalmente novato en estos temas, así que es posible que mi duda sea una tontería, allá voy:

    En el css declaras un tamaño en pixels “px” y su equivalente (imagino) en “rem” (para el padding por ejemplo). ¿como calculas la equivalencia entre los px y el rem? para saber que el rem que pones es proporcional¿?
    Muchas gracias por tu atención

  2. Buenas tardes Jose Luis,

    Muchas gracias por tu tiempo y por el comentario. Tu duda no es ninguna tontería, en su momento yo estuve mi tiempo mirando un CSS que implementaba el concepto de rem intentando entender cómo funcionaba.

    A ver si me explico bien! Pongamos que quieres poner un padding de 10px. Bien, realmente tú no deberías poner en el CSS el padding de 10px y luego su correspondiente valor en rem, sólo deberías hacerlo en rem. El motivo por el que se pone tanto en px como en rem es porque no todos los navegadores soportan el uso de rem y aún hay mucha gente que los utiliza. Así pues, tu realmente pones el valor en rem (que es el que interesa) y pones antes el valor en px para que si alguien entra desde un navegador que no soporta rem, lo vea bien.

    Entonces, la clave está en saber de dónde se saca el valor rem que corresponda a los 10px.

    El rem significa root element, por lo que si tu pones un padding de 2rem estás diciendo que ese padding es dos veces el font-size de la primera etiqueta de todas, o sea, del HTML. Los navegadores, por defecto suelen dar un font-size de 16px, por lo que si tu no sobreescribes ese valor en una regla exclusiva para la etiqueta HTML y quieres poner un padding de 10px en una etiqueta p (por ejemplo), su valor en rem sería 10 / 16 (lo que quiero / el valor root por defecto), o sea, 0.625rem.

    Normalmente, lo ideal para hacer uso del rem, es tener una regla CSS que afecte a la etiqueta HTML que establezca un valor por defecto al font-size y al line-height. Si tu quieres que tu página tenga una base de 10px (o sea, este será el valor que utilizarás siempre para calcular el rem de todos los font-size, margin y padding), tienes dos opciones:

    1. una regla en plan html { font-size: 10px; }
    2. una regla en plan html { font-size: 62.5%; }

    ¿Qué diferencias hay? La opción 1 está forzando 10px de tamaño de fuente base para el documento, esto significa que si una persona entra en tu página siempre usará ese tamaño de base. Puede ser buena idea, aunque normalmente no se usa, porque si yo tengo problemas de visión puedo configurar mi navegador para que la fuente por defecto sea de 24px, cuando entro a tu web me la forzará a 10 y no veré nada. Por eso existe el método 2.

    La opción dos, lo que me está diciendo es que la fuente base del documento tendrá un tamaño del 62.5% respecto al tamaño por defecto que le da el navegador. Como normalmente nadie toca el valor por defecto del navegador, éste será de 16px y el 62.5% de 16 es 10, por lo que consigues lo mismo que con la opción 1, peeeero si yo tengo los problemas de visión y lo cambié a 24px, para mí, el tamaño base de tu web será del 62.5% de 24, o sea, 15px. En principio esta opción es la ideal, sobre todo combinada con un diseño responsive ya que permite que tu web se adapte a las necesidades del usuario (ya sera por limitaciones de él o del dispositivo desde el que accede).

    Bien, ya tenemos que 10px es nuestra base para todo el documento. Cuando tu quieras poner un padding de 10px, tendrás que poner un padding de 1 rem porque es la división de el valor que quieres / el valor raíz. Si quisieras un padding de 18px, pues sería 18/10 => 1.8rem

    Como queremos soporte para navegadores viejos, tendremos nuestra declaración en rem y en px, pero eso lo hacemos por motivos de retrocompatibilidad, si sólo pones los valores rem (salvo cuando declaras la etiqueta html) y miras el resultado en el Chrome, verás que todo se ve exactamente como quieres.

    Esta regla del rem (el tamaño en px que quiero / el tamaño en px que decidí como font-size de html) se aplica para margin, padding y font-size, no para el line-height. El line-height funciona parecido pero no es igual, aunque esto ya se escapa a tu duda (que era sobre el padding)

    Resumiento, ¿qué regla uso para conocer el valor rem?

    Bien, lo primero es declarar una regla html:

    html { font-size: 100% }

    Con esta regla decimos que el tamaño base a usar en todo nuestro documento es de 16px.

    Quiero poner un padding de 10px a los párrafos? Fácil, lo que quiero / tamaño base, en nuestro ejemplo: 10/16 => 0.625 por lo que nuestra regla para el párrafo sería:

    p { padding: 0.625rem }

    Como queremos tener retrocompatibilidad con navegadores obsoletos, ponemos también la regla de padding con los px:

    p { padding: 10px; padding: 0.625rem; }

    Aquí es importantísimo que el valor en px esté antes que el de rem, porque el navegador lee por orden y ante declaraciones iguales, la segunda línea sobreescribe la primera, si lo pusiésemos al revés:

    p { padding: 0.625rem; padding: 10px; }

    Usemos el navegador que usemos siempre tomará el valor 10px ignorando el rem y eso no lo queremos 😉

    Bueno, me parece que queda claro, de todas formas creo que esto se merece un artículo propio, así que el próximo artículo será sólo sobre cómo utilizar el rem en CSS, lo preparo bien y lo publico la semana que viene (más a finales).

    Por cierto, aunque tengo bastante claras dos o tres líneas de publicación temática de artículos, estoy abierto a sugerencias sobre temas a tratar o a profundizar 😉

    saludos!

  3. Holla muy interesante tu artículo. Estaba buscando una duda sobre css3 y he llegado hasta aquí.

    Solo un pequeño apunte, sería también interesante indicar/ aclarar que se puede usar:

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

    En vez de:

    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;
    }

    Gracias!

Deja un comentario