h ( 

Blog
 ( HTTPS://EBWEB.ES/)  BLOG ( HTTPS://EBWEB.ES/COMO-MANTENER-TU-WO R DPRESS-SI N-M OR I R -EN-EL- I NTENTO/ )

DÓNDE Y CÓMO UTILIZAR CSS EN EL PERSONALI ZADO W EB ( HTTPS://EBWEB.ES/PERSONALIZADO-WEB-UTI L I ZAR -CSS/)

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

Ernesto Barrachina / 20 marzo, 2017 /

Desarrollo web (https://ebweb.es/desarrollo-web-en-valencia/), Diseño web (https://ebweb.es/diseno-web-en-valencia/) /
Deja tu comentario (https://ebweb.es/personalizado-web-utilizar-css/#respond)

Contenido actualizado a fecha: 4 febrero 2020

4.6 / 5 ( 20 votos )

Si no has llegado hasta aquí desde la primera parte del curso; donde descubrimos qué
es el estilo CSS y para qué sirve (https://ebweb.es/guia-basica-css/), 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 su cientes con las que personalizar cualquier página web.

Contenido [Ocultar]

1 ¿Cómo utilizar CSS?

2 Regla CSS: Selector y Declaración
2.1 Crear una regla CSS
2.2 Añadir una regla CSS en el HEAD del HTML
3 ¿Dónde y cómo utilizar CSS?
4 Crear un documento CSS externo
5 Estilo CSS en el HEAD
5.1 Importación de una hoja de estilo CSS
5.1.1 ¿Cómo importar una hoja de estilos CSS?
5.2 Enlazar un archivo CSS externo
5.2.1 ¿Cómo se enlaza una hoja de estilos CSS?
5.3 Incrustar estilos CSS
5.3.1 Cómo sobrescribir una regla CSS
6 Estilo CSS en el BODY
6.1 Estilo en línea
7 Usar CSS en el HEAD y en el BODY de forma simultánea
8 Aprende a utilizar CSS más profundamente

¿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

(https://twitter.com/intent/tweet?
url=https%3A%2F%2Febweb.es%2Fpersonalizado-web-utilizar-
css%2F&text=C%C3%B3mo%20se%20usa%20CSS%20para%20
personalizar%20una%20web&via=ebwevo&related=ebwevo)
TTPS://TWITTER.COM/INTENT/TWEET?URL=HTTPS%3A%2F%2FEBWEB.ES%2FPERSONALIZADO-WEB-

O%20SE%20USA%20CSS%20PARA%20PERSONALIZAR%20UNA%20WEB&VIA=EBWEVO&RELATED=EBWEVO)

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 naliza con punto y coma » ; «.

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 nal del curso tendrás la
lista completa clasi cada.

Añadir una regla CSS en el HEAD del HTML

Para realizar la práctica puedes usar el mismo documento HTML que descargaste
(https://ebweb.es/archivos-descargas/basico-html.html) 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 (https://ebweb.es/descargar-

notepad-instalacion/).
2. Crea las etiquetas <style> </style>.
3. Escribe la regla CSS entre <style> y </style>.
 <head>
<style>
p {
color: red;
}
</style>
<head>

😉 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 con rmarlo 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.
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í.
 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í (https://ebweb.es/archivos-descargas/style-demo.css).

 Dónde y cómo se usa el estilo CSS

(https://twitter.com/intent/tweet?
url=https%3A%2F%2Febweb.es%2Fpersonalizado-web-utilizar-
css%2F&text=D%C3%B3nde%20y%20c%C3%B3mo%20se%20u
sa%20el%20estilo%20CSS&via=ebwevo&related=ebwevo)
S (HTTPS://TWITTER.COM/INTENT/TWEET?URL=HTTPS%3A%2F%2FEBWEB.ES%2FPERSONALIZADO-WEB-

B3NDE%20Y%20C%C3%B3MO%20SE%20USA%20EL%20ESTILO%20CSS&VIA=EBWEVO&RELATED=EBWEVO)

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 (https://ebweb.es/)
que tengas pensado.

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.

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:

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.

 ¡ME APUNTO!
(https://ebweb.es/newsletter-
ebweb/)

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.cs
s"/>
</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.cs
s"/>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo-2.cs
s" />
</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

(https://ebweb.es/desarrollo-web-valencia/).

¿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>.

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 nal.
 <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 🙁

¿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! (https://ebweb.es/contacto/)

 Seguro que también te interesa:

 Hacer algo de SEO OnPage para principiantes (https://ebweb.es/seo-on-

page-para-principiantes-basico/)
 Qué es el diseño web con Bootstrap (https://ebweb.es/diseno-web-con-
bootstrap/)

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.

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ódigo y descubriremos 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 CSS (https://ebweb.es/personalizar-web-selectores-

css/)

Guía básica CSS. Parte 1 (https://ebweb.es/guia-basica-css/)

Si te ha gustado comparte

