HOJAS DE ESTILO EN CSS13 min read

EL CSS3

Nuestra web ya tiene el contenido que le hemos dado. Entre texto, títulos, enlaces e imágenes, podemos decir que tenemos una web completa (de momento).
Ahora vamos a aprender cómo aplicar estilos, es decir, decorarla y hacer que tenga diseño.

Lo primero es saber qué es un archivo CSS, bien, pues no es más que otro lenguaje compatible con HTML5. El caso que nos ocupa, vamos a trabajar con CSS en su versión 3, que es la última y definitiva versión y tiene unas capacidades y versatilidad increíbles.

CSS significa Cascading Styles Sheets, o lo que es lo mismo: Hoja de estilos en cascada. Para que lo entendáis bien, es una serie de órdenes que le damos al HTML, para que ponga cada elemento con un estilo, como por ejemplo un color, tamaño de fuente, o un fondo de imagen. La palabra «cascada» viene determinada porque se colocan los elementos en orden descendente, y es  el último elemento el que prevalece al que tiene encima.

El CSS puede ir dentro del HTML, pero nosotros vamos a trabajar con dos archivos: el index.html y el styles.css. Al ponerle la extensión .css, el programa (Brackets, Atom, Sublime text, etc.) ya reconoce qué tipo de archivo es y hace sugerencias de etiquetas en base a ello. «Styles» es el nombre que se le suele dar al archivo principal de CSS, como por ejemplo en las plantillas de WordPress. Para que funcione, debemos poner la llamada al CSS desde el head de nuestra web.
Así nos quedaría:

<head>
<link rel="stylesheet" type="text/css" href="styles.css"> </head>

La etiqueta link rel lo traduciremos como «enlace relacionado», con stylesheet que es hoja de estilos, tipo type texto en css text/css, y href es hypertext reference o lo que es lo mismo, referencia de hipertexto (dónde está el archivo styles.css).
Cuando conectamos estos dos archivos, ya podemos trabajar el código CSS sin que afecte al contenido que tenemos en nuestro HTML, pero sí a su estilo y diseño.

Asignando estilos

La manera que CSS asigna estilos a elementos del HTML es la siguiente:

.selector{ 
propiedad: valor; 
}

Cuando vemos .selector estamos eligiendo un elemento a modificar. En este caso aparece con un punto delante, que indica que es una clase. Cuando aparece con una almohadilla #, indicará que es un id. La principal diferencia es que la clase se repetirá a lo largo de varios elementos en la web, y el id es para un elemento único (por ejemplo un logo).
La propiedad es el qué quieres que haga ese elemento, como por ejemplo «background-color» para cambiar el color de fondo. El valor el el cuánto o el cómo, por ejemplo «white» o «#ffffff» para que sea blanco.

Ya veremos que algunos selectores son considerados por defecto por el navegador, como body, footer o header, y no necesitan del punto o almohadilla delante para funcionar.

Trabajando con CSS

Vamos a cambiar por ejemplo el color de fondo de la página. Para ello, tenemos primero que asignar nombres, o etiquetas a los elementos de nuestra web. Pero eso ya lo habíamos hecho antes, así que sólo bastará con decirle al CSS que nos cambie la apariencia de nuestro HTML. Para el fondo, debo cambiar toda la página, así que la etiqueta a customizar será la de <body>:

body{
background:red;
 }

Box Model y fondo

El modelo de cajas o box model es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:



Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde, y aunque podemos cambiarlo, por defecto aparecen así.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

  • Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
  • Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
  • Borde (border): línea que encierra completamente el contenido y su relleno.
  • Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  • Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  • Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre. También podemos definirle su color a cada uno, con la propiedad background-color.

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se ve encima. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.
A continuación las propiedades para fondo y demás elementos de box model:

Background (fondo)

background-color Aplicar color de fondo a diferentes elementos.
background-image Utilizar una imagen como fondo.
background-repeat La imagen de fondo se repite.
background-attachment Dejar fija la imagen de fondo.
background-position Ubicar una imagen en un lugar determinado.
 background: url(images/imagen.jpg) no-repeat center center fixed;
	       -webkit-background-size: cover;
	       -moz-background-size: cover;
	       -o-background-size: cover;
	       background-size: cover;
Esta sentencia sirve para poner una imagen de fondo de un elemento (un div por ejemplo). La imagen se adapta a tamaño completo y se centra o alinea donde queramos. Es muy útil para poner imágenes de fondo al estilo de las webs actuales.

 

Si quitamos el fixed, la foto hará scroll, si no, quedará bloqueada en el fondo y la web hará un efecto básico de Parallax.

Bordes

border-width Establecer el ancho del borde del elemento.
border-color Colorear el borde.
border-style Uso de bordes ocultos.
Uso de bordes punteados.
Uso de bordes a rayas.
Uso de bordes sólidos.
Uso de bordes dobles.
Uso de bordes sombreados.
Uso de bordes en relieve.
Uso de bordes en recuadro.
Uso de bordes resaltados.

Margen

margin Como dejar un margen alrededor de un elemento con medidas. (px)
Como dejar un margen alrededor de un elemento con porcentajes. (%)

Padding (Relleno)

padding Como controlar el relleno que hay entre el borde y el contenido. (En px y %)

Dimensiones

width Defina el ancho de un párrafo a su gusto. (En px y %)
min-width Defina un ancho mínimo para un párrafo. (En px y %)
max-width Como definir un ancho máximo para un párrafo. (En px y %)
height Como establecer la altura de un elemento. (En px y %)
min-height Defina una altura mínimo para un elemento. (En px y %)
max-height Defina una altura máxima para un párrafo. (En px y %)
line-height Declare una separación entre líneas. (En px y pt)

Efectos

overflow Insertar una barra de desplazamiento en caso que el contenido sea superior a la caja que lo contiene
clip Mostrar parte de una imagen
display Como convertir diferentes elementos en Ítems de una lista
visibility Mostrar u ocultar un texto

Ubicación

position Posiciona un elemento dentro de la página por medio del método estático
Por medio del método relativo
Por medio del método absoluto
Por medio del método fijo
top
right
bottom
left
Ubicar un elemento por medio de estas propiedades.
float Posicionamiento flotante a la izquierda.
Posicionamiento flotante a la derecha
clear No permite elementos flotantes a la izquierda.
No permite elementos flotantes a ambos lados
vertical-align Alineación vertical del texto : Línea de referencia.
Por debajo
Por arriba
Por encima
Texto superior
Medio
Inferior
Texto inferior
Longitud
Porcentaje
z-index Coloca los elementos por capas dependiendo del número que les demos. Por ejemplo, z-index:1;
estará por encima de todo, pero z-index:2; estará por encima de todo y de z-index:1.

TEXTO Y FUENTES

El texto es una parte importantísima del diseño y de la transmisión de la información. Si bien es cierto que las webs actuales tienden a cada vez tener menos texto, es fundamental su tratamiento y composición. Para personalizar nuestros textos tenemos algunas sentencias sencillas como las que ya vimos (poner el cursiva o en bold), o ya un poco más avanzadas estas:

text-indent Como dejar sangría en un texto.
text-align Posicionar  un texto.
text-decoration Definir un texto tachado o subrayado.
text-transform Convertir un texto a minúsculas o mayúsculas.
letter-spacing Controlar el espacio entre letras.
word-spacing Controlar el espacio entre palabras.
color Colorear el texto.
direction Definir el sentido de la escritura.

Fuentes

Para las fuentes, no podemos elegir una tipografía como hacemos en Illustrator o Photoshop, sino que debemos decirle al navegador de dónde queremos que coja esa fuente. Hay algunas que se consideran por defecto, como Arial o Times, ya que todo el mundo tiene esas fuentes en sus equipos, pero si pusiéramos un tipo de letra que el usuario no tiene instalada, no podría verla. Imaginad el caos en el diseño que podría causar esto, así que San Google nos ofrece esta solución:

GOOGLE FONTS
Aquí la dirección que debéis poner si queréis una fuente de Google Fonts.
Una vez en la web, elegís la fuente que queráis. Le damos click al icono de v  +  y luego desplegamos el panel de  Family Selected  y hacemos click en el  – .
Aparecen dos menús: Embed y Customize. Seleccionamos Customize:

En el menú Customize elegimos dentro de la familia que Google Fonts nos ofrece de esa tipografía. Por defecto, en este caso de la Montserrat, nos selecciona «regular 400». Si os fijáis, arriba en verde marca el tiempo de la carga de la tipografía: al ser sólo una, la carga es rápida (Load time: Fast / Tiempo de carga: Rápido). Si por el contrario elegimos muchas variantes, la velocidad de carga de nuestra web será más lenta ya que tiene que embeder (incrustar) varios archivos de fuentes:

Vemos como ahora marca que la velocidad de carga será lenta.
El caso es que una vez seleccionadas las variantes dentro de nuestra familia tipográfica, vamos a incrustarlas en nuestro archivo. Hacemos click en EMBED, y por defecto nos marca el submenú STANDARD.

Le damos a @IMPORT y copiamos el código que nos marca en el primer recuadro gris.

Copiamos en nuestro archivo CSS desde donde pone @import url, hasta el punto y coma final.  Descartamos las etiquetas <style> y </style>. 
Después, copiamos el segundo cuadrado gris dentro de cada una de los selectores que hagan referencia a una parte de nuestro html, y así conseguiremos que la tipografía que aparezca en nuestra web, sea esta de Google Fonts.
Si por ejemplo queremos hacer que toda la web sea en esta fuente, le diremos al CSS:

body{
font-family: ‘Montserrat’, sans-serif;
}

Si además queremos que en vez de la fuente por defecto, sea por ejemplo el tipo «medium» (un poco más gruesa), tendremos que añadir el peso=500 (como vimos al seleccionar tres imágenes más arriba). Para ello escribimos la etiqueta font-weight (peso de fuente). Al final quedaría así:

body{
font-family: ‘Montserrat’, sans-serif;
font-weight:500;
}


A continuación, sentencias de CSS para fuentes:

font-family Definir un tipo de fuente.
font-style Escribir en itálica.
font-variant Variar la fuente a mayúsculas más pequeñas.
font-weight Como darle intensidad a la fuente.
font-size Definir el tamaño de la fuente. Recomiendo poner en pt en vez de en px

Listas

Dentro del texto podemos crear listas con diferentes tipos de puntos. También podemos quitarlos y dejarlo vacío. Esto último será muy útil a la hora de hacer menús con <ul> y <ol>.

list-style-type Aplicar diferentes marcadores a los Ítems de una lista desordenada.
Aplicar números decimales y números romanos en listas ordenadas.
Aplicar letras, números y blancos para listas ordenadas.

Pseudo clases

El texto puede albergar hipervínculos, y es con las pseudo clases con las que decoramos los estados del botón de texto.
Las pseudo clases son añadidos que se le dan a clases concretas para especificar acciones. Por ejemplo, en un enlace de texto, en CSS la clase que se establece por defecto es «a».

a {

font-family: arial;
}

Quiere decir que todos los textos con enlaces, aparecerán en la tipografía Arial. Si le colocamos además una pseudo clase, servirá para dar acciones a ese «botón».
Para decirle al navegador que coloree el texto del enlace cuando pasemos el ratón por encima, utilizamos la pseudo clase :hover:

a:hover {

font-family: arial;
color: #FF0000;
}

Así, el texto se colorea de rojo cuando pasamos el puntero por encima.

:visited Define el color de un enlace que ya ha sido visitado
:active Comportamiento del color de un enlace mientras se esta presionando
:hover Comportamiento del color de un enlace al pasar el cursor sobre él

Para asignar dos pseudo clases, es decir, tener dos botones de distinto tipo, deberemos poner el siguiente código:

.estilo2 a{
propiedad: valor;
}

.estilo2:hover a{
propiedad: valor;
}

Efectos especiales

box-shadow: 3px 2px 5px #999;
Añade sombra al elemento. En este ejemplo, tenemos 3px de distancia en horizontal, 2px en vertical, y 5px de desenfoque. El color 999 es un gris oscuro. Si queréis poner un color transparente, utilizad RGBA.
color: rgba(255, 33, 56, 0.3); Color RGBA (transparente). Sirve para dar un color con parámetros RGB y no hexadecimal (#). En Photoshop u otros programas, podemos seleccionar los colores en diferentes modos. Para dar transparencia, seleccionamos el color en RGB y ponemos sus valores. En el ejemplo, 255 el el valor para Rojo, 33 para Green (verde), y 56 para Blue (azul). El 0,3 significa que ese color aparecerá al 30% de opacidad (transparencia).

Vamos pues con los primeros ejercicios de CSS3. Iremos de manera progresiva y resolviendo todas las dudas. Aquí podéis descargarlos.


Todas las propiedades y valores en CSS3 en desarrolladores de Mozilla, aquí.

Fuentes: virtualnauta.com / w3schools.com / google.com/fonts / librosweb.es/libro/css / hicksdesign.co.uk/boxmodel / https://www.silocreativo.com/css4-nueva-version-css-nunca-existira/

Este sitio web utiliza cookies para tengas la mejor experiencia de usuario. Si continúas navegando estás aceptándolas y también nuestra política de cookies. Más info aquí.

ACEPTAR

Aviso de cookies