La gua rpida para

aprender CSS bsico

desde cero

por Berto Lpez, lt. act. el 5 de Agosto del 2016

Categoras: Diseo & Tecnologa Web
25
Si te gusta, comprtelo
439

80

Cuando trabajas con pginas web hay una diferencia enorme entre
saber manejar solamente herramientas
como WordPress o Joomla que te hacen el trabajo ms fcil porque
te abstraen de las tecnologas subyacentes a las pginas web o tener
conocimientos, incluso solamente bsicos, de estas tecnologas que
son, fundamentalmente, HTML y CSS.
 Imagen de Fotolia - Coloures-pic

Creme, simplemente no hay color en cuanto al techo de tus

posibilidades. Por eso, seas bloggero cualquier otro perfil de persona
que trabaja en la web, te recomiendo tan encarecidamente que
aprendas los fundamentos de estas dos tecnologas, los cuales,
adems, no son nada difciles de entender.

En un post anterior le toc el turno a un tutorial bsico de HTML y

hoy toca el post sobre las hojas de estilo en cascada o CSS
(Cascading Style Sheets en ingls). Si HTML es el lenguaje con el que
se construyen los contenidos de una pgina, las hojas de estilo CSS
son el lenguaje en el que se usa para trabajar el diseo de cualquier
web actual.

Qu encontrars aqu?
Aprender CSS es fcil si te lo planteas bien
Cmo funcionan las hojas de estilo en cascada?
Los conceptos clave en las hojas de estilo CSS
o Reglas, selectores y propiedades
o La cascada: herencia, sobreescritura y conflictos de estilos
 Un ejemplo prctico
Propiedades bsicas que deberas conocer
o 1. Maquetacin bsica
o 2. Fuentes y texto
o 3. Color y fondos
o 4. Listas
o 5. Bordes
Vincular los estilos CSS a pginas HTML
o 1. Hojas de estilo CSS inline
o 2. Hojas de estilo CSS internas
o 3. Hojas de estilo CSS externas
Personalizar CSS en blogs: WordPress y Blogger
o CSS en Blogger
o CSS en WordPress.org
o CSS en WordPress.com
Referencias para profundizar ms

Si no tienes an conocimientos de HTML, te recomiendo

encarecidamente que te leas antes el tutorial de HTML ya que no
tienen mucho sentido aprender CSS sin saber, al menos, algo de
HTML.

Aprender CSS es fcil si te lo planteas bien

Incluso con una herramienta como WordPress (que francamente te
recomiendo como mejor opcin para crear una web normal hoy en
da) dnde en principio se supone que las miles y miles de plantillas
de diseo (temas WordPress) de las que goza WordPress haran
innecesario cualquier conocimiento de CSS, no habr color entre
saber o no saber un poco de CSS.

Tener simplemente unos conocimientos bsicos de CSS como los

que puedes adquirir en este post y no estar limitado a las opciones
de configuracin de la plantilla de turno te llevar a otro nivel en lo
que sers capaz de hacer con tu web.

En el caso de WordPress, por ejemplo, saber un poco de HTML y CSS

significa que la plantilla ya no marca el techo de lo que puedes hacer
con tu blog o tu web basada en WordPress. Incluso con temas
gratuitos muy simples y un poco de imaginacin y habilidad podrs
conseguir unos resultados que te sorprendern, y mucho.

Aunque una hoja con reglas CSS de una web grande y compleja,
como lo puede ser este mismo blog, ciertamente puede llegar a
intimidar un poco cuando la ves las primeras veces, pero no te
asustes: los fundamentos bsicos de CSS son muy fciles de
aprender y ya te van a dar mucho juego.

Lo que ocurre simplemente es que se trata de una especificacin

muy grande y muy potente, de ah que un diseo CSS profesional
puede ser algo realmente muy sofisticado. Pero te aseguro que en el
99% de las ocasiones con un nivel medio-bsico te apaars ms
que de sobrada y llegar a este nivel de conocimientos, insisto, no es
muy complicado si e echas un poco de ganas.

Cmo funcionan las hojas de estilo en

cascada?
Las hojas de estilo CSS son un conjunto reglas que enumeran en un
fichero .css y que describen el aspecto que deben tener los
diferentes elementos HTML de una pgina.

Lo interesante de esto es que funcionan con una filosofa de

patrones o plantillas, es decir, no es necesario especificar cada uno
de los elementos, sino que se pueden definir reglas como estas dos:

Los ttulos de nivel 1 y 2 han de ser de color negro y un tamao de

fuente de 16 y 14 pixeles respetivamente.

El texto de los prrafos estn alineados a la izquierda, tienen un

tamao de fuente de 12 pixeles y un color gris oscuro.

A modo de comparacin, si dominas el uso de estilos en Microsoft

Word, vers que esto se parece mucho al concepto de estilo en
Word, aunque las CSS son infinitamente ms potentes que Word en
todas sus posibilidades.

Veamos un ejemplo concreto de cmo se expresaran las reglas

anteriores en el lenguaje de las CSS:

3 h1, h2 {

4 color: black;

5 font-size: 16px;

6 }

8 h2 {

9 font-size: 14px;

1 }

1 p{

1 color: rgb(32,32,32);

1 text-align: left;

2 }

Los conceptos clave en las hojas de estilo

CSS
Este ejemplo muy sencillo de reglas CSS ya nos sirve perfectamente
para habla de los conceptos clave que hay que tener claros en todo
esto.
Reglas, selectores y propiedades
En el ejemplo anterior tenemos un total de 3 reglas, cada una se
compone de un selector que indican a qu elementos HTML aplica
la regla que es el texto que precede a las llaves de apertura y cierre
de la regla. En la primera regla, el selector es h1, h2, en la segunda
h2 y en la tercera p.

Cada regla se compone a su vez de propiedades que especifican

qu exactamente se har con esos los elementos HTML a los que
aplica.

El selector de la primera regla, por ejemplo, indica que esta regla se

refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarn
el color negro (propiedad color) y un tamao de letra de 16 pixeles
al texto (propiedad font-size).

Hay cientos de propiedades de las cuales destacar luego las que,

en mi experiencia, me han parecido las ms frecuentemente usadas
y ms tiles. En cuanto a los selectores, los ejemplos han sido
triviales puesto que se refieren a elementos HTML sin ms, pero hay
formas mucho ms sofisticadas de disear selectores.

Un ejemplo rpido de esto:

1p a {

2 text-decoration: underline:

3}

5 p.text-izq {

6 text-align: left;

7}
En la primera regla se han anidado dos elementos para indicar que
esta regla slo se refiere a enlaces (etiqueta <a> en HTML) dentro de
prrafos de texto (etiqueta <p> en HTML) y que a estos enlaces se le
aplicar un subrayado. Es decir, esta regla no aplica a elementos
<a> que no se encuentren dentro de un prrafo (<p>).

En la segunda regla se ha especificado algo parecido, pero jugando

con un elemento y un atributo de clase (ver estos conceptos en el
tutorial HTML). Es decir, esta regla aplicar a prrafos que contienen
un atributo class con el valor text-izq tal como ste:

1 <p class=text-izq>Texto del prrafo</p>

Fjate que en la regla text-izq empieza con un punto. Es la manera

de especificar en el lenguaje CSS que text-izq se refiere a un
atributo de clase.

No voy a profundizar ms aqu puesto que este post no pretende ser

un curso completo de CSS. Sin embargo, ya slo con esto ya tienes
cierto juego y creo que puedes ver la filosofa de cmo funcionan los
selectores y qu pretenden. Para profundizar en el tema selectores
te recomiendo esta referencia sobre los selectores bsicos y esta
otra sobre los avanzados.

La cascada: herencia, sobreescritura y

conflictos de estilos
El nombre de hojas de estilo en cascada no es casual, expresa que
los estilos que especifican con reglas se pueden heredar de una
manera jerrquica.

Es decir, veamos esta regla:

1 body {

2 font-family: Arial;
3}

Aqu estamos diciendo que la etiqueta <body> que es la que

envuelve el contenido de cualquier pgina web tenga un tipo de letra
Arial. Esto no tendra mucho sentido si no fuera porque gracias a la
capacidad de herencia de las reglas de este modo por defecto
cualquier elemento hijo como un ttulo o un prrafo va a heredar
ese estilo, salvo que especifique lo contrario como, por ejemplo, en
esta regla:

1p {

2 font-family: Verdana;

3}

En esta ltima regla aplica el principio de especificidad. En principio,

se planteara un conflicto entre la regla general de <body> con lo que
dice la regla de <p>, pero se resuelve fcilmente puesto que se aplica
la regla ms especfica y referirse a un prrafo es ms especfico que
referirse a los elementos hijos que pueden dentro de <body>.

Igualmente, una regla con un selector p a (enlace dentro de un

prrafo) tendra precedencia sobre una regla con un selector a que
se refiere a un enlace a secas.

De nuevo, sabiendo esto, te apaaras bien en el 99% de los casos.

Pero lo cierto es que el tema de la precedencia de las reglas entre s
tiene cierta tela, si lo quieres conocer ms a fondo, chale un vistazo
a esta referencia.

Un ejemplo prctico
Ahora que creo que ya vas viendo cmo funciona esto, te propongo
un pequeo ejercicio prctico para jugar un poco con tus nuevos
conocimientos: modificar el diseo este blogcambiando una de sus
reglas CSS, concretamente el color de los ttulos de los posts. Y
tranquilo: el cambio slo afectar a la pgina en tu navegador, mi
blog no sufrir daos smile

Para ello te propongo utilizar la herramienta de inspeccin de

cdigo que traen consigo las versiones actuales de los
navegadores FireFox, Chrome e Internet Explorer. Con ellas
puedes ver y manipular el cdigo de una pgina web tanto a nivel de
HTML como a nivel de CSS de una manera realmente cmodo e
intuitiva.

En cualquiera de estos navegadores se activa la herramienta con F-

12, en el ejemplo he usado Firefox que es la que ms me gusta en
conjunto, aunque utilizo tambin mucho la de Chrome.

Para que te sea ms fcil seguir lo que viene a continuacin te dejo

un vdeo-tutorial de esta herramienta, el interfaz de usuario ha
cambiado ligeramente con respecto a la versin utilizada en el vdeo,
pero te podrs hacer perfectamente una idea:

El ejercicio que te propongo es cambiarle el color a los ttulos

<h1> de los posts en este blog.

Para ello, necesitamos encontrar la(s) regla(s) CSS que determina(n)

la esttica de estos ttulos. Gracias a estas herramientas esto es
tan simple como realizar los siguientes 4 pasos que puedes ver en la
captura de abajo:

1. Activar el selector de elementos con el icono al que apunta

la flecha en el paso 1.

2. Una vez activado, puedes colocar el ratn sobre el elemento

a examinar. En Firefox me gusta particularmente cmo los
resalta. Adems puedes ver cmo en el cuadro indica que el
selector empleado en el HTML es h1.entry-title, es decir,
aplican las reglas para etiquetas <h1> y la clase entry-title.
Luego vemos estos conceptos un poco ms despacio.
 3. Dentro del rbol de cdigo HTML, se ha identificado el
elemento HTML exacto que has seleccionado antes con el
ratn. Fjate como concuerda con las reglas CSS.

4. En el lado derecho se listan todas las reglas que concuerdan

con el elemento <h1> y la clase entry-title que corresponden
al elemento HTML seleccionado. Los blogs WordPress suele
tener muchas reglas CSS de diferentes ficheros, por eso vers
que salen varias reglas. Lo importante es que el orden de
prioridad es de arriba abajo.

Echa ahora un vistazo con calma a la siguiente captura de pantalla y

observa cmo se reflejan estos cuatro pasos en ella. Intenta
reproducirlos en tu ordenador. Si usas Chrome o Internet Explorer te
costar algo ms porque sus interfaces de usuario varan algo, pero
el proceso y resultados son idnticos.

Los inspectores de cdigo incorporados en los navegadores son tremendamente tiles

cuando se trabaja con HTML y CSS.
Ahora toca modificar el ttulo. Para ello vamos a modificar la
siguiente regla:

1 h1, .fpost .entry-title {

2 font-size:33.6px;

3}

Aadimos una lnea (haz clic con el ratn justo delante de font-size
y podrs editarla) para que quede as:

1 h1, .fpost .entry-title {

2 font-size:33.6px;

3 color: red;

4}

El resultado esttico es discutible, pero desde luego nadie podr

discutir que el cambio se ve con claridad

Propiedades bsicas que deberas conocer

1. Maquetacin bsica
width: Ancho de un elemento.

height: Alto de un elemento.

vertical-align: Alineamiento vertical dentro de un elemento.

margin: Espacio que se aade entre el elemento y sus vecinos.

Se puede diferencia por lado (arriba, abajo, izquierda, derecha).

padding: Relleno interior que se aade en los bordes del A

diferencia de margin, cuenta para el tamao del elemento.
 float: Mueve el elemento todo lo posible hacia el lado
indicado. Esta propiedad se usa en el posicionamiento
flotante de CSS. El tema del posicionamiento en CSS no es trivial
y conviene estudiar cmo funciona antes de usar esta
propiedad.

2. Fuentes y texto
font-family: Tipo de letra

font-size: Tamao de letra

font-weight: Peso (normal, negrita, )

font-style: Estilo (normal, cursiva, )

text-decoration: Decoraciones como subrayado, tachado,

etc.

text-align: Alineacin del texto (izquierda, derecha, etc.)

text-transform: Mostrar un texto en maysculas, minsculas

o la primera letra de cada palabra en maysculas.

3. Color y fondos
color: Color del elemento. Se puede especificar en diferentes
formatos como palabras predefinidas (red, green, etc.) RGB o
como valor hexadecimal.

background-color: Color del fondo del elemento.

background-image: Permite especificar una imagen de fondo.

background-repeat: Permite usar una imagen a modo de

mosaico en diferentes modalidades.

box-shadow: Crear un efecto de sombra para un elemento.

4. Listas
 list-style-image: Usar la imagen especificada como vieta para
la lista.

list-style-type: Diferentes estilos de vietas y estilos de

numeracin para elementos de lista.

5. Bordes
border: Aade un borde a un elemento y establece algunas
propiedades (grosor, estilo de lnea, etc.)

border-color: Color del borde.

border-style: Diferentes estilos para el borde (slido, puntos,

etc.)

border-radius: Permite crear esquinas redondeadas para un

elemento.

Vincular los estilos CSS a pginas HTML

Ya sabes cmo crear reglas CSS, pero cmo se aplican a una pgina
HTML?

Para ello tienes bsicamente 3 opciones:

1. Hojas de estilo CSS inline

La primera opcin consiste en usar el atributo style en un elemento
HTML tal como se puede ver aqu:

1 <h1 style=font-family:Verdana; color:red>Ttulo de nivel 1</h1>

En este caso, no hay selector puesto que no hay elemento que

seleccionar, es el que es. Por tanto, se especifican simplemente las
propiedades a aplicar al elemento en cuestin. Este tipo de reglas
tienen mayor prioridad de todas las reglas.
Se suele recomendar encarecidamente evitar esta manera de
vincular estilos CSS puesto que al tener que aplicarse a cada
elemento individualmente, implican un esfuerzo y mantenimiento
disparatado.

No obstante, hay casos de uso muy concretos en los que son

prcticas. Por ejemplo, en un widgetsencillo de WordPress que
permita configurar directamente ciertas propiedades CSS desde su
interfaz de configuracin puede ser una buena opcin implementar
estas propiedades con esta tcnica.

2. Hojas de estilo CSS internas

La segunda opcin es escribir las reglas dentro de un elemento
<style> dentro de esta etiqueta que, a su vez, se encontrara dentro
del elemento <head> de la pgina HTML.

Obviamente la desventaja es que en este caso las reglas slo son

visibles para esa pgina concreta en las que se han declarado y no se
pueden usar para otras pginas.

3. Hojas de estilo CSS externas

La ltima opcin es la ms usad y consiste en crear uno o varios
ficheros con extensin .css en los cuales se declaran las reglas CSS.

La manera de vincular estas reglas a una pgina HTML consiste en

referencia el fichero .css desde esa pgina. De este modo se puede
crear un fichero global para una web entera y usarlo en todas las
pginas que se quiera.

En este caso, la declaracin tambin se incluye dentro del elemento

<head> y tiene el siguiente aspecto:

1 <link rel="stylesheet" type="text/css" href="/css/estilos-1.css" />

2 <link rel="stylesheet" type="text/css" href="/css/estilos-2.css" />

Aqu hay que tener tambin en cuenta que en el caso de usar varios
ficheros el orden de inclusin marca precedencia en el orden
inverso. En el caso de existir un conflicto por haber diferentes reglas
con igual selector en varios ficheros, las reglas de los ficheros
siguientes sobreescriben los anteriores.

Es decir, si en estilos-1.css tenemos una regla como:

1p a {

2 text-decoration: underline;

3}

Y luego en estilos-2.css otra que dice:

1p a {

2 text-decoration: none;

3 color: blue;

4}

La propiedad text-decoration genera un conflicto que se resuelve

dando prioridad a la propiedad de estilos-2.css.