Dónde y cómo utilizar CSS en el personalizado web

Desde dónde y cómo se utiliza CSS

Ernesto BarrachinaDesarrollo web, Diseño webDeja tu comentario

Contenido actualizado el: 20 agosto 2018

Dónde y cómo utilizar CSS en el personalizado web
5 (100%) 15 votos

Si no has llegado hasta aquí desde la primera parte del curso; donde descubrimos qué es el estilo CSS y para qué sirve, quizá te interese empezar por esa sección que explica desde cero cómo utilizar CSS.

A lo largo de este artículo tendrás la oportunidad de realizar una serie de ejercicios prácticos en los que necesitarás un par de archivos. Tienes dos opciones: descargar los que te he preparado o crearlos por ti mismo, que es lo que te recomiendo.

➡ Solo podrás utilizar WordPress o tu gestor de contenidos en uno de los casos.

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

¿Cómo utilizar CSS?

Existen varios lugares donde utilizar CSS.

En el primer tutorial aprendimos a añadir en línea el CSS (dentro de la propias etiquetas HTML). Y aunque en esta segunda parte aprenderás otras formas, también insistiré en esa técnica.

Es posible insertar CSS desde:

  • El mismo documento.
  • Un documento externo.
  • Varios documentos externos.
A pesar de que 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 utilizar en cada momento.

Cómo se usa CSS para personalizar una web Cuéntalo en las redes

Regla CSS: Selector y Declaración

Los archivos CSS están formados por “reglas”, formadas a su vez por “selectores” y “declaraciones”.

  • En el selector se establecen los elementos que se verán afectados por la regla.
  • 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 ” ; “.

La regala CSS se compone de selector y declaración

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

Crear una regla CSS

Vamos a crear nuestra primera regla CSS:

  • El selector abre la declaración con una llave ( { ).
  • Luego asignamos una propiedad y un valor; con unidades de medida legibles por los navegadores (px, em, %…). 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 40px, por lo que siempre se mostrarán con este valor mientras no le asignemos otro.

h1 {
font-size: 40px;
}

🙂 Ya sabes crear una regla CSS.

Mediante los ejercicios iremos descubriendo algunas propiedades y valores que podremos aplicar a los elementos. Y no te preocupes que al final del curso tendrás la lista completa clasificada.

Añadir una regla CSS en el HEAD del HTML

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

Vamos a añadir la regla CSS en el <head>, dentro de las etiquetas <style> </style>, con lo que esta vez no podrás usar un gestor de contenidos 🙁

  1. Abre el archivo HTML con el editor de código.
  2. Crea las etiquetas <style> </style>.
  3. Escribe la regla CSS entre <style> y </style>.
<head>
  <style>
    p {
    color: red;
    }
  </style>
<head>

Para utilizar CSS en el head hay que introducir la regla dentro de la etiqueta style

😉 Has creado tu primera regla CSS en el head del documento.

Para ver el resultado haz click en Ejecutar > Launch in Chrome (o tu navegador favorito) desde el menú de herramientas superior.

Párrafo afectado por la primera regla CSS.

➡ Esta regla afectará a todos los párrafos de esa página que siempre serán rojos.

Para confirmarlo introduce otros párrafos, recordando que pueden tener la longitud que quieras pero que su contenido hay que delimitarlo con las etiquetas <p> </p>.

¿Dónde y cómo utilizar CSS?

Ahora que ya sabemos crear reglas, veamos desde dónde añadir el CSS al documento HTML.

Puedes insertar CSS en el head y en el body

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 incrustadas como en el ejemplo anterior.
  • CSS en el BODY del documento.
    • Añadiendo estilos en línea como vimos en el primer tutorial.

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.

En cualquiera de los casos, el CSS irá colocado antes de que el navegador lea el contenido de los elementos HTML. Así sabrá con qué propiedades y valores debe mostrarlos.

¿Tiene lógica no?

Para entender dónde vamos a introducir el CSS recordemos la estructura básica del documento HTML que está estructurado en dos partes:

  • Head: con información importante para el navegador.
  • Body: el contenido web en sí.

Lugares donde ubicar el CSS en el documento HTML

Pero antes de desarrollar con ejemplos prácticos la 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í.

Dónde y cómo se usa el estilo CSS Cuéntalo en las redes

Crear un documento CSS externo

Para crear y editar el archivo ya sabes que hay que usar un editor de código.

Puedes complicarte la vida con Adobe Dreamweaver, pero te recomiendo Notepad por su sencillez.

😉 Si te atreves, vamos a crear un archivo “style-demo.css” externo con Notepad++.

Abre un documento nuevo en el editor de código, llámalo style-demo y guárdalo en blanco con la extensión .css desde la ruta Archivo > Guardar como.

Ya lo irás rellenando según 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 veamos dónde ubicarlo para que se apliquen las reglas CSS.

Estilo CSS en el HEAD

Como el HEAD es lo primero que leen tanto los navegadores 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 incluir CSS de 3 formas diferentes:

  • Desde un documento externo importado.
  • Desde un archivo externo enlazado.
  • Incrustando las reglas dentro de la etiqueta style.

Importación de una hoja de estilo CSS

Con la sentencia @import importamos la hoja de estilos CSS externa.

La 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, 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>

¿Cómo importar una hoja de estilos CSS?

➡ Vamos a hacer una práctica de importación.

Lo más cómodo por el momento es que los archivos HTML y CSS estén dentro de una misma carpeta.

Para no complicar la URL al importar un archivo CSS es usar la misma carpeta para almacenar el CSS y el HTML

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 si es diferente al mío.

Ahora añade en ese archivo CSS esta regla:

p{
  color: green;
}

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

No es muy recomendable utilizar CSS mediante la importación de un documento 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

😉 Practica un poco añadiendo otras reglas.

Puedes probar con estas para cambiar el tamaño del texto, el grosor de la fuente, el espacio entre letras y la transformación automática a mayúsculas respectivamente.

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

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.

Enlazar un archivo CSS externo

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

Simplemente hay que insertar el link al documento CSS obviando las etiquetas <style> </style>, que en este casi no son necesarias.

<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 documentos de estilo 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, según nos hagan falta.

😀 El archivo CSS estará vivo durante todo el desarrollo de una web.

¿Cómo se enlaza una hoja de estilos CSS?

Copia este código dentro del HEAD.

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

➡ Recuerda que en este caso NO usamos la etiqueta <style>.

La mejor forma de usar CSS es con archivo de estilo enlazado

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

Incrustar estilos CSS

😉 Para tu tranquilidad ya hemos pasado lo difícil en lo referente a “dónde utilizar CSS”.

Ahora vienen otras formas más sencillas de usar CSS. Una de ellas la hemos visto en el primer ejemplo pero vamos a repasarla y a ampliarla.

Ya sabes que es posible incrustar reglas CSS directamente dentro del HEAD. Y lo mejor es que puedes hacerlo aunque antes hayas enlazado un documento externo.

Solo debes tener en cuenta que «las reglas posteriores priorizan sobre las anteriores», incluso sobre 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 se traduce en que aunque hayas pintado los párrafos de color púrpura mediante las reglas de un archivo externo, la regla incrustada posteriormente la sobrescribe y el color con que se mostrará será el indicado por esta última. Es decir, naranja.

Cómo sobrescribir una regla CSS

Prueba con el código de arriba en tu archivo.

El resultado será un párrafo naranja, porque ya sabes que aunque en el archivo enlazado era púrpura, la última regla que lea el navegador es la que va a 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 reglas 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 otras». Lo que provocará un momento de confusión 🙁

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!

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 y a ampliarlo un poquito.

Estilo en línea

Mientras redactamos el texto podemos insertar CSS 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 SI puedes recurrir al editor de código de tu gestor de contenidos.

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

Este párrafo tiene las letras separadas

Usar CSS en el HEAD y en el BODY de forma simultá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?

¡Espero que sepas de antemano cuáles surtirán efecto! 😉

Desde el documento enlazado aplica estilo al párrafo para que tenga un tamaño de fuente, color y espacio entre letras (interletrado) determinados.

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

Ahora desde el HEAD, dentro de la etiqueta <style>, dale grosor a las letras:

p{
  font-weight: bold;
}

Mediante el método en línea, desde el HTML, añade nuevas reglas al párrafo que sobrescriban a todas las anteriores:

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

En la imagen tienes una vista de los archivos.

Puedes utilizar CSS desde el head y el body
Evidentemente el estilo CSS que priorizará será el que escribamos en linea, puesto que será el último que lea el navegador.

😀 Aunque con el curso más adelantado veremos que «esto NO es del todo cierto», de momento vamos a dar esta información por válida.

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 será la que prevalezca.

Aprende a utilizar CSS más profundamente

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ódigodescubriremos los id y las clases CSS.

Mientras tanto vuelve a los ejercicios anteriores y practica sobre ellos.

Ya sabes que solo se aprende a utilizar CSS usando CSS 😉

Parte 3. Selectores CSSGuía básica CSS. Parte 1

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

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.

¿Quieres un Diseño Web Valencia?

« Siguiente
Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.