Ha llegado el momento de continuar esta saga que empezamos hace algún tiempo sobre las hojas de estilo y sus diferentes aplicaciones a nuestros sitios Web.

Viendo que ya hemos cubierto las temáticas más básicas, hoy adentraremos en algunos contenidos más avanzados, como siempre con sus respectivos ejemplos para dejar todo mucho más claro.

El detalle, como siempre, después del salto.

Cómo dominar CSS sin salir del escritorio – Parte 4

Nota: Si es el primer número que leen, recomendamos leer las ediciones anteriores de esta guía para un mayor entendimiento. Pueden encontrarlas en el siguiente enlace.

Tal como prometimos en la última edición, hoy cubriremos:

Contenidos:

1. Uso de Id.
2. Propiedades de bordes de marcas HTML.
3. Padding.
4. Propiedades de márgenes.

Así que sin más que decir, vamos de lleno a ver las temáticas de hoy.

1.- Uso de Id.

En el último número de esta saga, veíamos con algunos ejemplos lo relativo al uso de clases, y como eso nos ahorraba un buen trabajo al momento de definir un estilo que usaríamos en una serie de marcas o etiquetas HTML.

Junto al uso de clases, tenemos el uso de id’s, que en su definición más básica apuntan a cumplir la misma funcionalidad que las clases, es decir, definir el estilo a usar en una etiqueta HTML. La gran diferencia radica en la frecuencia de uso de cada una, ya que si bien las clases podíamos utilizarlas en todas las etiquetas que quisieramos, sin importar número o lugar, para el caso de los id’s, solo podemos utilizar ese estilo en una sola etiqueta sin posibilidad de repetir.

Pero.. ¿Una etiqueta? ¿Una sola?, entonces nos preguntamos ¿Cuál es la gracia?, bueno, lo explicamos. Por convenciones y estándares, el uso correcto de CSS para estilizar nuestros sitios implica el uso de clases e id’s para aplicar en las marcas, por lo que siempre es bueno enfocarse en usarlos para todo loq ue podamos.

Si, estamos claros con eso, pero ¿por qué no usar siempre clases?. Principalmente porque en muchas ocasiones querremos definir un estilo único para un solo espacio de nuestro sitio Web y que no se replique ni siquiera por error en otro lado, para eso lo mejor es el uso de Id’s, ya que lo utilizaremos en la etiqueta que deseamos y nunca más se usará, al menos en la misma página.

La definición de usos e id’s es tremendamente sencilla y muy similar al uso de clases que veíamos en el número anterior. Si para definir las clases solo dabamos un nombre al estilo y le anteponíamos un punto, para las id’s hacemos algo similar, pero anteponiendo un símbolo #, algo así:

Definiendo una clase:

.uno
{
font-family:Arial;
color:#ff0000;
}

Definiendo un id:

#uno
{
font-family: Arial;
color: #ff0000;
}

Y finalmente como lo usaríamos en nuestro HTML, comparando con el uso de clases:

Uso de un estilo definido en clase:

<h1 style=”uno”>Texto ejemplo</h1>

Uso de un estilo definido en id:

<h1 id=”uno”>Texto ejemplo</h1>

Como podemos ver, el uso es bastante similar en los 2 casos, recordando que la diferencia es que la segunda marca, la que usa id, se adjudica el uso exclusivo de ese estilo.

2.- Propiedades de bordes de marcas HTML

Cada vez que utilizamos alguna marca o etiqueta HTML, como por ejemplo h1, h2 o h3, en nuestra página Web se crea un rectángulo, de distintos tamaños, el cual a simple vista no se puede apreciar si la etiqueta no ha sido estilizada correctamente, por ejemplo, si nosotros definiéramos:

<h1>Texto ejemplo</h1>

Ese texto ejemplo que se desplegaría en nuestro HTML, estaría encerrado en un rectángulo de medida de acuerdo al tamaño de ese texto. Este rectángulo presenta bordes, los cuales son posibles de manipular a nivel de CSS y estilizarlos según estimemos conveniente. Las propiedades que podemos manejar para estos bordes son:

border-width: Determina el ancho del borde. Se puede definir en pixeles.

border-style: Determina el estilo del borde. Puede tomar varios valores como: none, hidden, dotted, slashed, solid, double, groove, ridge, inset, outset.

border-color: Define el color del borde. Se determina como todas las propiedades relativas a color que hemos visto.

Todas estas propiedades podemos personalizarlas a nivel individual de cada trazo del borde (superior, inferior, derecho, izquierdo), añadiendo el lado correspondiente a la propiedades (top, bottom, right, left) de la forma:

border-top-width
border-bottom-color

Y así sucesivamente.

Veamos un ejemplo para que todo quede más claro, imaginemonos que definiremos estilos de borde para escribir el nombre y apellido de una persona. Los definiremos en un CSS a nivel de clases, de la siguiente forma, el cual llamaremos estilos.css:

.nombre
{
border-width: 1px;
border-color: #ff0000;
border-style: solid;
}

.apellido
{
border-width: 2px;
border-color: #0000ff;
border-style: dashed;
}

Luego, en nuestro HTML haríamos las llamadas correspondientes de la forma:

<html>
<head>

<title> Ejemplo </title>
<link  rel=”StyleSheet” href=”estilos.css” type=”text/css”>
</head>
<body>
<p class=”nombre”>Juan</p>
<p class=”apellido”>Pérez</p>
</body>
</html>

Ahora si guardamos nuestro CSS y HTML, ejecutando el último en nuestro navegador, deberíamos ver que el nombre y el apellido se encuentran encerrados en rectángulos, cada uno con sus propiedades de estilo de acuerdo a lo que definimos a nivel de clases.

3.- Padding.

Cuando hablamos de padding, nos referimos especificamente a un espacio que se genera entre el contenido de una marca o etiqueta HTML y su respectivo borde. Al igual que en el caso anterior, el padding es posible manipularlo de manera independiente referente a cada extremo, o sea superior, inferior, derecho e izquierdo, de la misma forma que en los bordes.

Por ejemplo, si quisiéramos que se generara un espacio superior e inferior de 10px y un espacio derecho e izquierdo de 5px en una marca, lo definiríamos de la siguiente forma en nuestro CSS:

.espacio
{
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
}

Luego, haríamos la llamada respectiva desde nuestro HTML, tal como llamamos cualquier clase:

<p style=”espacio”>Este es un texto ejemplo con espacio desde los bordes</p>

Como podemos apreciar, es una propiedad que se puede manipular sin complejidad y que presenta una utilidad bastante interesante.

4.- Propiedades de márgenes:

Lo primero que debemos apreciar cuando llegamos a este punto es que cuando hablamos de márgenes nos referimos a algo completamente distinto a cuando hablamos de bordes. Tal como podemos ver en la imagen inicial de este tutorial, el margen se encuentra en la parte más externa de la composición de una etiqueta HTML, mientras que el borde se encuentra inmediatamente adyacente al contenido.

Este margen, al igual que el padding, podemos manipularlo en cuanto a su grosor, aplicando medidas en pixeles, y también es posible manejar independiente cada trazo de este, o sea superior, inferior, derecho e izquierdo.

Por ejemplo, si quisiéramos definir un margen derecho e izquierdo de 1px y un margen superior e inferior de 2px, en nuestro CSS definiríamos:

.ejemplo
{
margin-top:2px;
margin-bottom:2px;
margin-left:1px;
margin-right:1px;
}

Y luego en nuestro HTML hacemos la llamada:

<p style=”ejemplo”>Este es un ejemplo de manipulación de margenes</p>

Tal como las propiedades anteriores, son bastante simples de aplicar y sin duda que nos sirven para las distintas aplicaciones que le queramos dar.

Con esto damos por terminada la edición de hoy de Como dominar CSS sin salir del escritorio, preparando para el próximo número los siguientes contenidos:

1. Propiedades de listas.
2. Propiedades relacionadas al fondo.
3. Pseudoclases.
4. Estilizando enlaces.

Como siempre, recuerden que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.