En el el curso de HTML hemos tratado de evitar el uso de estilos y colores, aunque se puede hacer, ya que en las primeras versiones se comenzaron a introducir elementos con la finalidad de mejorar el aspecto del contenido.
Después se creó CSS, tecnología que sirve exclusivamente para mejorar el aspecto del contenido HTML mediante las hojas de Estilo.
Con esto se ha conseguido separar el aspecto o diseño del contenido y por cuestiones de efectividad es preferible usarlo siempre mediante CSS y dejar el HTML sólo para incluir el contenido.
Veamos la sintaxis para aplicar color de fuente y fondo a un elemento HTML mediante CSS:
<!DOCTYPE html>
<html>
<head>
<title>título página</title>
</head>
<body>
<h1 style="color:#0000ff">Noticias del día.</h1>
<p style="color:#888888;background-color:#ffffdd">
Aquí la descripción de la noticia.
Aquí la descripción de la noticia.
Aquí la descripción de la noticia.
Aquí la descripción de la noticia.
</p>
</body>
</html>
El atributo a emplear en la etiqueta es style y la tienen todos los elementos HTML. En el ejemplo anterior empleamos las propiedades color, que determina el color del texto y background-color, que determina el color de fondo.
Cuando asignamos un valor a una propiedad CSS usamos el separador “:” (dos puntos) en lugar del signo igual que empleamos en los atributos HTML.
Si empleamos más de una propiedad CSS en el atributo style, debemos separarlas por “;” (punto y coma).
Para definir el color se ha empleado la notación hexadecimal: #0000ff.
Todas las etiquetas HTML tienen asignados unos estilos prefinidos, lo cuales modificamos mediante CSS.
Ojo! Las hojas de estilo distinguen entre mayúsculas y minúsculas.
A este método de trabajar lo llamamos CSS in line, ya que va dentro del mismo código de la etiqueta HTML. Es en realidad un método no recomendado de trabajar, pero por el que debemos comenzar para aprender.
Propiedades relacionadas con texto en CSS
En el ejemplo anterior hemos visto la propiedad color. Esta es una propiedad CSS para estilar textos. Veamos otras tantas:
text-align: Sirve para definir la alineación del texto y le podemos asignar alguno de los siguientes valores: left, right, center,justify. text-align:center; El texto aparecerá centrado. Si queremos justificarlo a ambos lados emplearemos justify. Para derecha e izquierda, right y left.
text-decoration: Propiedad que permite que aparezca subrayado el texto, tachado o una línea en la parte superior. Los valores posibles son: none, underline, overline, line-through.
letter-spacing: Para indicar el espacio entre caracteres.
word-spacing: Para indicar el espacio entre palabras.
font-weight: Para poner negrita o cambiar el grosor de la letra. Se puede especificar bold (negrita) o un valor numérico entre 100 y 900. El valor predefinido sería normal o 400 y bold equivale a 800. Ver más en W3schools.
text-indent: Para indentar o poner sangría en la primera linea del texto. Podemos indicar un valor negativo para obtener un desplazamiento en sentido contrario y crear una sangría francesa.
text-transform: Sirve para cambiar la estructura de mayúsculas y minúsculas del texto con los siguientes valores: none (no cambia nada, predefinido), capitalize (la primera letra de cada palabra en mayúscula), lowercase (todas en minúscula) y uppercase (todas en mayúscula).
Tamaños, códigos de color y unidades de medida en CSS
Unidades de medida en CSS y HTML
Las unidades absolutas son específicas y no se suelen usar, pero por si las vemos por ahí:
Unidad
Descripción
cm
Centímetros
in
Pulgadas, 2,54 cm
mm
Milímetros
pt
Puntos, 0,35mm
pc
Picas, 4,23mm
Las unidades relativas dependen de otros factores, como en el caso de los píxeles, que su tamaño depende de la resolución de pantalla que emplee el usuario:
em
Tamaño relativo a la fuente predefinida del navegador, aproximadamente equivalente a la anchura de la letra M.
ex
Tamaño de la altura de la x.
px
Tamaño relativo respecto a la resolución de pantalla del dispositivo.
%
Porcentaje relativo al elemento actual en que se aplica.
1em = 16px = 100% = tamaño predefinido de párrafo.
2em = 32px = 200% = tamaño predefinido de H1
Códigos de color y uso de colores en CSS
Código Hexadecimal para el uso de colores web
Los colores en hexadecimal ven precedidos por # y constan de 6 dígitos. En ocasiones los podemos encontrar con 3 dígitos expresados de forma abreviada. Ejemplo: #fff, que sería equivalente a #ffffff, blanco.
Podemos extraer el código de color de una imagen con herramientas de extracción de color de las aplicaciones de edición de imágenes, normalmente representada con una pipeta.
Adicionalmente podemos instalar un extractor de color como extensión del navegador como Eye Dropper o como aplicación: Just Color Picker.
Este código es el más cómodo de usar por su simplicidad.
Códigos RGB y HSB útiles para dar transparencia
Se pueden expresar los colores en otros formatos como RGB o HSB, cuyos valores nos suministra cualquier editor de fotografía como Gimp o Photoshop.
La ventaja de estos sistemas es que nos permiten indicar también el grado de transparencia, de forma que podemos hacer elementos translúcidos u opacos.
El valor de la transparencia va siempre de 0 a 1, siendo el 0 totalmente transparente y el 1 totalmente opaco (valor predefinido).
Un ejemplo de aplicar color en HSB con transparencia sería:
background-color: hsla(40,50%,80%,.5);
Dónde el último valor, .5, expresa 0,5, es decir, un 50% de opacidad.
Propiedad para incluir transparencia a cualquier elemento
También disponemos de una propiedad que permite especificar el nivel de transparencia de un elemento HTML, incluyendo a sus descendientes:
opacity: .3;
Propiedades relacionadas con fuente (tipo de letra) en CSS
Las propiedades relacionadas con las fuentes más frecuentes en CSS son:
font-family: Define la fuente que se aplicará al elemento HTML. La fuentes más comunes presentes en los navegadores son: Arial, Arial Black, Courier New, Georgia, Impact, Tahoma, Times New Roman, Verdana
font-size: Define el tamaño de la fuente. Entre otras medias podemos indicarlo en píxels.
font-style: Podemos indicar alguno de los siguientes valores: normal, italic, oblique
font-weight: Lo hemos visto antes. También podemos indicar bolder o lighter.
Ejemplo:
En esta página de W3 Schools podemos ver los nombres y ejemplos de uso de las fuentes compatibles con cualquier navegador:
Ten cuidado, ya que la nomenclatura utilizada en este documento corresponde a cuando utilizamos un método más avanzado para utilizar las propiedades CSS y como verás, aparecen entre comillas. Pero cuando introducimos los estilos en línea, tal y como hemos aprendido hasta ahora, no ponemos la fuente entre comillas puesto que la propiedad ya se encuentra entrecomillada en el atributo style de la etiqueta.
Si:
style="font-family:Verdana"
No:
style="font-family:"Verdana""
Tamaños de fuente de referencia
Es útil saber que por defecto, en los navegadores, los tamaños son relativos al tamaño por defecto de los párrafos p: 1em = 100% = 16px.
Si esto es así por defecto, el h1 sería el doble de manera predeterminada. 2em o 32px y el primer li 0,8em o 13px.
Cómo usar Google Fonts en tu web
Podemos importar cualquier fuente que deseemos de proveedores externos. El más popular en los últimos años es Google Fonts. En su página podemos previsualizar, importar y ver ejemplos de uso de una enorme cantidad de fuentes.
Un ejemplo de uso con la fuente Roboto sería el siguiente:
Más info en W3Schools. Y en el generador de Font Squirrel podemos convertir las fuentes de otros formatos a woff y woff 2.0 (más moderno), que nos asegura la compatibilidad en la mayoría de navegadores, junto con el formato ttf.
Etiquetas y atributos HTML que no se deben usar
No se deben usar porque su funcionalidad actualmente se consigue mediante CSS:
Etiquetas
u Muestra un texto subrayado.
s Muestra un texto tachado.
strike Muestra un texto tachado.
center Muestra un texto centrado.
menu Crea una lista
dir Define una lista multicolumna
layer (solo Netscape) Agrupa un bloque de elementos HTML (utilizar div)
blink Resalta un texto
marquee Muestra un texto desplazandose de izquierda a derecha o viceversa. Tiene muchas propiedades para definir fuente, color, velocidad de avance etc.
font Permite definir mediante una serie de propiedades el tipo de fuente, tamaño y color
b Muestra el texto en negrita.
i Muestra el texto en itálica.
big Muestra el texto con fuente grande.
small Muestra el texto con fuente pequeña.
hr Muestra una línea horizontal.
basefont Establece el tamaño base de fuente.
isindex Crea un control de entrada de una línea.
Atributos
text Fija el color de texto para la página si se aplica al elemento body.
bgcolor Fija el color del fondo de texto si se aplica al elemento body.
background Fija una imagen de fondo a la página. Propiedad del elemento body.
link Fija el color de los enlaces no visitados. Se aplica al body.
alink Fija el color del enlace activo. Se aplica al body.
vlink Fija el color de los enlaces ya visitados. Se aplica al body.
align Se lo utiliza para alinear texto a izquierda, derecha, centro etc.
Método 2 para incluir CSS. En el head y nomenclatura
Podemos usar la etiqueta
con su cláusula de cierre dentro de una página, normalmente en el head.
En el interior de la etiqueta style incluimos selectores en los que a su vez, entre llaves, declaramos las propiedades, siempre finalizando por punto y coma.
El selector especifica el elemento o conjunto de elementos a los que se aplicará el formato definido. En el ejemplo anterior, a los párrafos.
A cada una de las especificaciones separadas en líneas que incluimos dentro, separadas por punto y coma las llamaremos declaración.
Veamos un esquema:
Podemos emplear más de un selector de una vez:
p, h1{
text-align:justify;
}
El ejemplo anterior justificaría el texto de todos los párrafos y H1 en la página.Veremos opciones avanzadas de selectores más adelante.
Veamos un ejemplo más completo:
Incluir CSS mediante archivo externo. Método 3. El bueno
En realidad, lo más eficiente es declarar todos los estilos de un sitio web en un fichero externo. De esta forma tenemos centralizados y separados ambos códigos, lo cual es también más eficiente a nivel de velocidad de carga para los navegadores, ya que podemos referenciar varias páginas al mismo archivo CSS y así aplicar los mismos estilos de una vez.
El fichero externo debe llevar la extensión .css y lo referenciaremos mediante la etiqueta <link> dentro del head.
Dentro del archivo CSS escribiremos únicamente CSS y es conveniente hacer uso de comentarios para ir excplicando qué vamos estilando y mejorar la legibilidad del código.Los comentarios en CSS son distintos que en HTML:
Utilizo cookies para optimizar el sitio web y el servicio.
Cookies funcionales
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
