Dónde y cómo utilizar CSS. Personalizado web

Dónde y cómo utilizar CSS. Subir CSS a tu web

Si no has llegado hasta aquí desde la primera parte del tutorial donde aprendimos qué es CSS y cómo se usa, quizá te interese empezar por esa sección de la guía. Empieza desde cero con conceptos muy básicos sobre cómo utilizar CSS.

Como durante el recorrido realizaremos algunos ejercicios prácticos, deberás descargar los archivos indicados en cada ejemplo o crear unos propios. Solo podrás utilizar directamente WordPress o cualquier gestor de contenidos en el último de los casos.

En esta parte de los tutoriales vamos a aprender a cómo usar CSS y desde dónde, para que puedas personalizar cualquier tipo de página web.

¿Cómo utilizar CSS?

Existen varios lugares donde utilizar CSS. En el primero de los tutoriales ya aprendimos a añadir CSS en línea dentro de la propias etiquetas HTML. En esta segunda parte vamos a revisar el resto de formas, aunque también insistiremos sobre el estilo en línea.

Podemos insertar CSS en el mismo documento o desde uno o varios documentos externos. Aunque los métodos no son igual de óptimos en cuanto a los tiempos de carga, todos ofrecen los mismos resultados. Con la práctica sabremos decidir qué técnica usar en cada momento.

Regla CSS: selector y declaración

Los archivos CSS están formados de REGLAS formadas por SELECTORES y DECLARACIONES.

En el selector se establecen los elementos HTML que se verán afectados por la regla y en la declaración se asigna una propiedad a la que se le añade un valor determinado. La sentencia finaliza con punto y coma (;).

Si quieres utilizar CSS debes conocer cómo se forma una regla

Previamente a ver dónde y cómo utilizar CSS es necesario saber crear una regla. Así que lo primero que haré es explicarte cómo se programa.

Crear una regla CSS:

Vamos a crear nuestra primera regla CSS:

  • En la primera línea el selector con una llave ( { ) abre la declaración.
  • En la segunda línea asignamos una propiedad y un valor. Siempre serán unidades de medida legibles por los navegadores: px, em, %, etc. Al estar en proceso de iniciación, nosotros usaremos píxeles (px).
  • Terminamos la regla con una llave ( } ) de cierre.

Con esta regla de ejemplo vamos a dar a todos los títulos h1 de la web un tamaño de texto de 20px, por lo que siempre se mostrarán con este valor mientras no le asignemos otro.

h1 {
font-size: 20px;
}

Ya sabes crear una regla CSS.

Durante el manual iremos descubriendo algunas propiedades y valores que podremos aplicar a los elementos HTML. No te preocupes porque al final del curso tendrás la lista completa clasificada.

Ejercicio: Añadir regla CSS en el HEAD

Para realizar la práctica puedes usar el mismo documento HTML que descargaste en el artículo anterior y seguir unas sencillas instrucciones.

Como el lugar donde vamos a añadir CSS es el <head> esta vez no podrás usar tu CMS (WordPress, PrestaShop…).

Para añadir la regla y empezar a familiarizarte con CSS, introduce el código en el <head> dentro de las etiquetas <style> </style>.

  1. Abre el archivo HTML con el editor de código Notepad++ u otro similar.
  2. Crea las etiquetas <style> </style>.
  3. Escribe la regla CSS dentro de <style> </style>.

Utilizar CSS en el head dentro de la etiqueta style

Has creado tu primera regla CSS.

Para ver el resultado haz click en Ejecutar > Launch in Chrome (o tu navegador favorito) en el menú de herramientas superior. Verás que esta regla afectará a los párrafos de esa página.

Párrafo afectado por la primera regla CSS.

Prueba a escribir más párrafos y verás que siempre serán de color rojo. Recuerda que puede tener la longitud que necesites y que su contenido está delimitado por las etiquetas <p> </p>.

¿Dónde y cómo utilizar CSS?

Ahora que ya sabemos crear reglas veamos desde dónde añadir CSS al documento HTML. Podemos utilizar CSS integrándolo desde dos lugares y varios métodos diferentes:

  • CSS en el HEAD del documento HTML.
    • Importando CSS desde un documento externo.
    • Enlazando CSS desde un documento externo.
    • Creando las reglas CSS directamente como en el ejemplo anterior.
  • CSS en el BODY del documento.
    • Añadiendo estilo CSS en línea.

Aunque estos métodos son los más habituales, existen otras formas de incluir CSS en los archivos pero requieren de conocimientos avanzados en programación.

Recordemos visualmente la estructura básica de un documento HTML que como ya habrás visto en la imagen anterior, está estructurado en dos partes: <head> y <body>.

Estructura de un archivo HTML5 para utilizar CSS
La etiqueta <!DOCTYPE html> es una instrucción para que el navegador sepa que versión de HTML se está usando, mientras que <html> </html> abre y cierra el contenido del documento.

Antes de empezar a desarrollar con ejemplos prácticos las lista de métodos y lugares desde donde usar CSS, necesitamos crear un documento CSS externo. Puedes hacerlo mediante el editor de código Notepad, o descargando un archivo CSS desde aquí.

Crear un archivo CSS externo

Para crear y editar el archivo debes usar el editor de código. Aunque te sirve Adobe Dreamweaver yo siempre recomiendo Notepad++ por su sencillez. Puedes descargarlo de forma gratuita desde su página oficial y tienes un tutorial enlazado al inicio de este mismo artículo.

Si te atreves, vamos a crear un archivo CSS externo con Notepad++.

Abre un documento nuevo en el editor de código y guárdalo en blanco con la extensión .css desde la ruta Archivo > Guardar como. El contenido del archivo irá creciendo en función de las necesidades de diseño del sitio web que tengas pensado.

Crear archivo CSS externo para usarlo en el head
Ahora que tenemos el documento creado vamos a ver dónde y cómo colocarlo para que se apliquen las reglas.

Estilo CSS en el HEAD

Como el HEAD es la primera parte del documento que leen tanto el navegador, como los motores de búsqueda, es ahí donde se coloca la información importante que necesitan antes de recorrer nuestra página web.

Recordemos que desde el HEAD podemos añadir CSS de 3 formas diferentes:

  • Importando CSS un documento externo.
  • Enlazando CSS un documento externo.
  • Creando las reglas CSS directamente.

Importar una hoja de estilo CSS

Con la sentencia @import y con el documento CSS podemos importar la hoja de estilos externa.

Esta sentencia debe ir al principio de la etiqueta <style> antes de cualquier otra regla si la hubiera. Esto permitirá realizar cambios sobre la hoja importada sin tocarla.

Aunque se suele utilizar en algunas ocasiones, ya te he dicho que esta no es la mejor forma de insertar un archivo de estilo.

<head>
<style type="text/css">
@import url('http://tu-dominio.com/style-demo.css');
</style>
</head>

Ejercicio: ¿Cómo importar una hoja de estilo CSS?

Vamos a hacer una práctica de importación. Te hace faltan los archivos HTML y el CSS anteriores, que para estos ejemplos deben estar dentro de la misma carpeta.

Escribe dentro del HEAD de tu archivo HTML esta instrucción:

<style type="text/css">
@import url('style-demo.css');
</style>

En la url debes usar el nombre de tu archivo CSS.

Ahora añade en ese archivo CSS esta regla:

p{
color: green;
}

Te dejo una imagen de cómo quedan tus archivos:

Utilizar CSS con importación de archivo CSS externo
Has importado la primera regla CSS a tu documento HTML desde un archivo externo.

Cuando lo ejecutes en el navegador te dará un resultado como este:

Tu texto importado desde un archivo externo

Como para aprender CSS es necesario repetir, para practicar un poco añade otras reglas. Puedes probar con estas.

p{
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
text-transform: uppercase;
}

Enlazar un archivo CSS externo

El camino recomendado para incluir CSS es enlazándolo desde el HEAD.

<head>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo.css"/>
</head>

Si tenemos más de un archivo externo los enlazaremos uno tras otro.

<head>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo.css"/>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo-2.css" />
</head>

Puedes enlazar todos los que necesites, aunque supondrá varias peticiones al servidor que afectarán negativamente a la velocidad de carga de la web. Lo ideal es tener la menor cantidad de archivos posibles.

Dentro del archivo CSS implementaremos las reglas como ya sabemos, y según nos hagan falta. El archivo CSS estará vivo durante todo el trabajo de desarrollo de una web.

Ejercicio: ¿Cómo enlazar una hoja de estilos CSS?

En el mismo archivo HTML con que hemos estado trabajando hasta ahora, copia este código dentro del HEAD. Elimina el código de importación que has usado antes.

<link rel="stylesheet" type="text/css" href="style-demo.css"/>

Te tiene que quedar así:

Usar CSS con archivo CSS enlazado
Si recargas la página en el navegador (tecla F5) y no se produce ningún cambio es que lo has hecho bien. Ten en cuenta que el archivo CSS utilizado es el mimo.

Para asegurarte aún más de que la hoja está bien enlazada, en el archivo CSS sustituye el valor de la propiedad color por otro, por ejemplo el color púrpura (color:purple;).

Tu texto enlazado desde un archivo externo ahora es color púrpura

Incrustado del CSS

Para tu tranquilidad ya hemos pasado lo difícil en lo referente a desde dónde utilizar CSS. Ahora vienen las formas más sencillas de usar CSS. Una de ellas la hemos visto en el primer ejemplo, pero vamos a repasarla y ampliarla.

Ya sabes que podemos incrustar reglas CSS directamente dentro del HEAD. Puedes hacerlo también aunque antes hayas enlazado un documento externo. Solo debes tener en cuenta que las reglas posteriores sobrescribirán a las del archivo enlazado.

<head>
<link rel="stylesheet" type="text/css" href="style-demo.css" />
<style type="text/css">    
p{
font-weight: bold;
color: orange;
}
</style>
</head>

Esto quiere decir que aunque en el último ejemplo hemos asignado a los párrafos el color púrpura mediante el archivo externo, la regla posterior la sobrescribe y el color con que muestra es el naranja.

Ejercicio: Sobrescribir una regla CSS

Te reto a que hagas este ejercicio sin que yo te de tantas facilidades. Solo tienes que añadir el código de arriba a tu archivo. El resultado será un texto naranja porque aunque en el archivo enlazado el texto era púrpura, la última regla que lea el navegador es la que utilizará.

Tu texto enlazado desde un archivo externo ahora es color naranja

De la misma forma que sobrescribimos una regla de un archivo externo podemos sobrescribir las incrustadas, teniendo en cuenta que siempre prioriza la regla que quede al final.

<style type="text/css">
p{
color: black;
}
... otras reglas ...
p{
color: green;
} 
</style>

Ten cuidado porque si no tienes mucha práctica en utilizar CSS, al añadir una regla puede que sin querer sobrescribas a otras y te provocará momentos de gran confusión.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Estilo CSS en el BODY

La forma más sencilla de insertar CSS en HTML es en línea. Este caso ya lo vimos en el primer capítulo del tutorial, pero como todo es cuestión de práctica vamos a revisarlo.

CSS en línea

Mientras escribimos el texto podemos utilizar CSS añadiéndolo dentro de las etiquetas HTML del <body>. Las reglas se añaden dentro del atributo style=”” y afectan solo al elemento que las contenga.

En este ejemplo, tanto si usas WordPress como otro gestor de contenidos, podrás hacerlo desde su editor.

<p style="letter-spacing: 5px;">Este párrafo tiene las letras separadas</p>

Este párrafo tiene las letras separadas

Ejercicio: Estilo en el HEAD y en línea

¿Te has detenido a pensar qué ocurre si tienes una hoja de estilo enlazada o reglas incrustadas en el HEAD y decides aplicar otras diferentes en línea? ¿Cuáles surtirán efecto?

Borra el contenido anterior y añade esta regla a tu archivo CSS externo:

p{
font-size: 15px;
color: red;
letter-spacing: 3px;
}

y en el HEAD dentro de la etiqueta <style>:

p{
font-weight: bold;
}

Ahora en el archivo HTML con el método en línea añade nuevas reglas al párrafo:

<p style="font-size:20px; color:green; letter-spacing:0px; font-weight:normal;">¿Qué pasa con este párrafo?</p>

En la siguiente imagen tienes una vista de los archivos.

Lo que ocurre al utilizar CSS en el head y el body
El estilo CSS que priorizará será el que escribamos en linea. Puedes escribir otros párrafos sin ningún estilo en línea y verás lo que ocurre.

¿Qué pasa con este párrafo?

Párrafo que tendrá el estilo de las reglas del HEAD

Este párrafo también tendrá el estilo asignado en el HEAD

La explicación está en que los documentos HTML se leen de arriba a abajo. El navegador primero hace un recorrido por el HEAD y después lee el BODY con los párrafos. Si tienen una nueva instrucción, esta ultima regla será la que prevalezca.

Aprender a utilizar CSS aún más

En esta lección hemos visto dónde y cómo utilizar CSS. En el siguiente tutorial describiremos cómo seleccionar grupos de elementos para no escribir tanto código y tenerlo optimizado. Aprenderemos sobre los id y las clases CSS.

Mientras tanto vuelve a los ejercicios anteriores y practica con ellos. Ya sabes solo se aprende a utilizar CSS usando CSS.

Ver el tercer tutorialIr al primer tutorial

Ya sabes que si tienes alguna duda sobre la forma de utilizar CSS o sobre los ejercicios, puedes acudir al formulario de comentarios. No se quedará ninguna pregunta sin respuesta.

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar un Presupuesto!

Si te ha gustado comparte

Información del autor

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

Siguiente
Anterior

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*