Home > Course > Aprende a crear tu propio sitio Web con HTML5 y CSS3 > Con gurar

CSS

Aprende a crear tu propio sitio Web con HTML5 y CSS3

20 hours  Easy

Last updated on 2/6/20

 

Con gurar CSS

 Log in or subscribe for free to enjoy all this course has to offer!

Habiendo pasado la primera parte del curso trabajando solo en HTML, ahora vamos a centrarnos en CSS que he
querido dejar a un lado de forma deliberada. CSS no es más difícil que HTML. Complementa a HTML para
ayudarte a dar formato a tu sitio web.

El primer capítulo de CSS trata la teoría que hay detrás de él: ¿Qué es? ¿Cómo es? ¿Dónde se escribe el código
CSS? Aunque estos aspectos teóricos no son muy complicados, es necesario que los conozcas porque son la base
del CSS. Y es lo único que os voy a pedir que os aprendáis de memoria del CSS, ya que el resto podéis encontrarlo
en el apéndice.

Así que empecemos, que os veo muy impacientes.

La teoría que hay detrás del CSS

Os advertí sobre esto justo al comienzo del curso: vamos a aprender dos lenguajes. Ya hemos descubierto muchas 
cosas sobre HTML, aunque todavía quedan algunas cosillas que aprender (volveremos a ello dentro de algunos
capítulos). Sin embargo, ha llegado la hora de centrarnos en el lenguaje CSS.

CSS ( Cascading Style Sheets) es otro lenguaje que complementa al lenguaje HTML.
¿Recuerdas cuál era su nalidad? Gestionar el formato de tu sitio web.

Breve recordatorio: ¿Para qué se utiliza CSS?

¿CSS? Es lo que te permite elegir el color de tu texto.
También te permite seleccionar la fuente usada en tu sitio web.
Y también te permite establecer el tamaño de texto, los bordes, el fondo, etc.
Y también es lo que utilizas para el diseño de tu página web. Puedes usarlo para decir: Quiero que el menú
aparezca a la izquierda y que sea así de ancho. Quiero que la cabecera de mi página web esté alineada en la parte
superior y esté siempre visible. Etc.

Recordemos la comparación que vimos en el primer capítulo ( gura siguiente).

Con y sin CSS

Usábamos HTML para escribir el contenido de nuestro sitio web pero era muy irregular por los bordes. CSS
complementa este código para dar formato a todo el contenido y darle la apariencia que deseas.

CSS: un comienzo dudoso

Cabe destacar que el lenguaje CSS no existía en el momento en que nació la Red. De hecho solo existía HTML.
HTML fue creado en 1991 y CSS en 1996. Así que probablemente os estaréis preguntando: ¿Cómo daban formato al
texto desde 1991 hasta 1996? Bueno, en realidad, solo con HTML. De hecho, había etiquetas HTML para dar
formato. <font color="#aab1c3"> , por ejemplo, se utilizaba para de nir el color del texto.

Sin embargo, las páginas de HTML empezaron a hacerse muy complejas. Había cada vez más etiquetas de
contenido y forma, lo que hacía que cada vez fuese más difícil actualizar las páginas web. Esa es la razón por la
que se creó CSS.

CSS no fue adoptado de forma inmediata por los administradores de sitios web, en absoluto. Había que acabar
con una serie de malos hábitos y eso llevo su tiempo. Incluso ahora, todavía podemos encontrar sitios web con
etiquetas de formato HTML antiguas y obsoletas, como por ejemplo <font> .
CSS: soporte para navegadores
CSS ha cambiado, igual que HTML. Os he dicho que existían cuatro versiones principales de CSS:

CSS 1;
CSS 2.0;
CSS 2.1;
CSS 3.

De hecho, la versión CSS 3 no está totalmente acabada (todavía no es una versión o cial). De todos modos,
se puede usar ya porque está muy avanzada y ya la soportan muchos navegadores.
Sería una lástima perdérsela porque CSS 3 añade muchas funciones a CSS (¡la mitad si lo comparamos con
CSS 2.1!). Por tanto, en este curso usaremos CSS 3, que incorpora y complementa la mayoría de las
funciones de CSS 2.1.

El trabajo más complejo lo realizan los navegadores web: tienen que leer el código CSS y comprender cómo
mostrar la página.

Aunque Internet Explorer era el navegador más común a principios del 2000, la forma en que gestionó el lenguaje
CSS fue mediocre (si no rotundamente mala) durante mucho tiempo. Esto sucedió en el apogeo de la versión 6
(IE6), que desgraciadamente sigue siendo utilizada hoy en día por una pequeña proporción de usuarios
(afortunadamente, esta proporción está disminuyendo).

Desde entonces, muchos navegadores han salido a la palestra y se lo han puesto difícil a Internet Explorer: Mozilla
Firefox por supuesto, pero también Google Chrome. Por no mencionar el éxito de los Mac y los teléfonos iPhone
con su navegador Safari. Esto dio lugar a que Microsoft respondiera y lanzara (tras un largo periodo de inactividad)
IE 7, IE 8 y después IE 9. Ya se está hablando de IE 10.

Bueno, tu lección de historia es bonita, ¿pero por qué ha de interesarme a mí hoy?

¿Qué podemos aprender de todo esto? Que los navegadores no conocen todas las propiedades de CSS existentes.
Cuanto más viejo es el navegador, menos sabe de las funciones de CSS.

Voy a mostraros en este curso un número de funciones de CSS que no tienen por qué funcionar en navegadores
viejos. No puedo evitarlo porque es así: ningún navegador tiene un conocimiento completo de todas las funciones
de CSS de ninguna manera. Si el navegador no conoce una propiedad CSS, lo peor que puede pasar es que lo
ignore y no de el formato, pero la página no se quedará colgada: por tanto, seguirá siendo legible.

Os recomiendo encarecidamente que añadáis a marcadores www.caniuse.com y normansblog.de, donde se

muestran tablas de compatibilidad entre funciones de HTML y CSS en varios navegadores (y sus distintas
versiones). En concreto, echad un vistazo a las tablas de compatibilidad de CSS de www.caniuse.com (siguiente
ilustración).
 Tabla de compatibilidad de CSS de caniuse.com

¿Dónde se escribe el código CSS?

Puedes elegir, ya que el código en lenguaje CSS se puede escribir en tres lugares diferentes:

En un archivo con la extensión .css ( es el método más recomendado);

en la cabecera <head> del archivo HTML;

directamente en las etiquetas del archivo HTML a través de un atributo style ( es el método menos
recomendado).

Aunque voy a describir los tres métodos, os puedo asegurar que el primero... es el mejor.

En un archivo .css (recomendado)

Como acabo de decir, lo más frecuente es escribir el código CSS en un archivo con la extensión .css (a diferencia
de los archivos HTML que tienen extensión .html ). Este es el método más cómodo y exible. Evita mezclarlo todo
en un solo archivo. Voy a utilizar esta técnica en lo que queda de curso.

¡Empecemos ahora mismo! Vamos a utilizar el siguiente archivo HTML:

html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="style.css" />
6 <title>Primeras pruebas de CSS</title>
7 </head>
8
9 <body>
10 <h1>Mi gran sitio web</h1>
11
12 <p>¡Hola y bienvenidos a mi sitio web!</p>
13 <p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
14 </body>
15 </html>
Fijaos en el contenido de la línea 5, <link rel="stylesheet" href="style.css" /> : esta es la línea que indica que

este archivo HTML está asociado con un archivo llamado style.css que se encarga del formato.

Guardad este archivo con el nombre que queráis (por ejemplo, page.html ). Hasta ahora, no hemos hecho nada
especial excepto la nueva etiqueta que hemos añadido.

Ahora cread un archivo nuevo vacío en vuestro editor de texto (por ejemplo, Notepad++) y copiad este trozo de
código CSS (no os preocupéis, os explicaré lo que signi ca más adelante):
css

1 p
2 {
3 color: blue;
4 }

Para activar el color en Notepad++, seleccionad el menú Language > C > CSS .

Guardar el archivo con un nombre que acabe con .css , como por ejemplo style.css . Guardar este archivo
.css en la misma carpeta que vuestro archivo .html .

En Sublime, debéis obtener un resultado similar al de la imagen siguiente.

Archivos HTML y CSS en Sublime Text

En el explorador de archivos, lo veréis mostrador un al lado del otro. El archivo .html a un lado y el archivo .css
al otro lado, como se muestra en la ilustración.

Archivos HTML y CSS en el  nder

Ahora abrid vuestro archivo de página .html en el navegador para probarlo, como siempre. Mirad, es mágico: los
párrafos se muestran en azul, como en la siguiente ilustración.

El texto está escrito en azul

No es necesario abrir el archivo style.css directamente en el navegador. Solo tenéis que abrir el archivo
page.html (que llamará automáticamente al archivo style.css ).

En la cabecera <head> del archivo HTML

Existe otra forma de utilizar CSS en los archivos HTML: esto implica insertar el código CSS directamente en una
etiqueta <style> dentro de la cabecera <head> .

Así es como puedes obtener exactamente el mismo resultado con un solo archivo .html que contenga el código
CSS (línes 5-10):
html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style>
6 p
7 {
8 color: blue;
9 }
10 </style>
11 <title>Primeras pruebas de CSS</title>
12 </head>
13
14 <body>
15 <h1>Mi gran sitio web</h1>
16
17 <p>¡Hola y bienvenidos a mi sitio web!</p>
18 <p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
19 </body>
20 </html>

Probadlo y veréis que el resultado es el mismo.

Directamente en las etiquetas (no recomendado)

Con el último método hay que tener cuidado: se puede añadir un atributo style a cualquier etiqueta. Hay que
insertar el código CSS directamente en este atributo:
html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Primeras pruebas de CSS</title>
6 </head>
7
8 <body>
9 <h1>Mi gran sitio web</h1>
10
11 <p style="color: blue;">¡Hola y bienvenidos a mi sitio web!</p>
12 <p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
13 </body>
14 </html>

Esta vez, solo el texto del primer párrafo (línea 11), que contiene el código CSS, aparecerá en color azul (siguiente
ilustración).

El primer párrafo está escrito en azul

¿Qué método debes elegir?

Creo que el primer método que nos has recomendado es más complicado que los otros dos. ¿Por qué nos
recomiendas crear dos archivos? ¡Me iba bien con tan solo un archivo .html !

Os recomiendo encarecidamente que os acostumbréis a trabajar con el primer método porque es el que utilizan
la mayoría de administradores de sitios web... ¿Por qué?

De momento, vais a realizar las pruebas en un solo archivo HTML. Sin embargo, más tarde vuestro sitio web
incluirá varias páginas HTML, ¿verdad?
Imaginad esto: si ponéis el código CSS directamente en el archivo HTML, tendréis que copiar este código en todos
los archivos HTML del sitio web. Y si mañana cambiáis de opinión y, por ejemplo, queréis los párrafos en color rojo
en vez de azul, tendréis que cambiar todos los archivos HTML uno por uno, como se muestra en la siguiente
ilustración.

El código CSS se repite en todos los archivos HTML

Si trabajáis con un archivo CSS externo, solo tendréis que escribirlo una vez para toda la página web, como se
muestra en la siguiente ilustración.

El código CSS se escribe una sola vez en un archivo CSS

Aplicar un estilo: seleccionar una etiqueta



Ahora que ya sabemos donde poner el código CSS, estudiémoslo más detalladamente. Antes os dí un trozo de
código CSS sin explicároslo:
css

1 p
2 {
3 color: blue;
4 }
El código CSS como éste contiene tres elementos diferentes:

Nombres de etiquetas: se escriben los nombres de las etiquetas cuya apariencia se quiere cambiar. Por
ejemplo, si queremos cambiar la apariencia de todos los párrafos <p> , tenemos que escribir p .

Propiedades CSS: la página "efectos de estilo" está almacenada en propiedades. Por ejemplo, la propiedad
color nos permite especi car el color del texto, y la propiedad font-size se usa para especi car el
tamaño del texto, etc. Existen un montón de propiedades CSS y, como ya os he dicho, no voy a haceros que
os las aprendáis todas de memoria.

Valores: para cada propiedad CSS, tenemos que especi car un valor. Para la propiedad color , por ejemplo,
tenemos que especi car el nombre del color. Para la propiedad font-size , especi caremos el tamaño que
queremos, etc.

Por lo general, una hoja de estilo CSS tiene esta apariencia:

css

1 tag1
2 {
3 property1: value1;
4 property2: value2;
5 property3: value3;
6 }
7
8 tag2
9 {
10 property1: value1;
11 property2: value2;
12 property3: value3;
13 property4: value4;
14 }
15
16 tag3
17 {
18 property1: value1;
19 }

En este fragmento de código, podemos ver las etiquetas, propiedades y valores que acabo de mencionar.

Como podéis ver, se escribe el nombre de la etiqueta (por ejemplo, h1 ) y se incluyen las propiedades y valores
deseados entre corchetes. Se pueden incluir todas las propiedades que queráis dentro de los corchetes. Cada
propiedad va seguida de "dos puntos" (":") y después el valor correspondiente. Por último, cada línea acaba con un
punto y coma ";".

Voy a enseñaros una serie de propiedades en los siguientes capítulos. De momento, solo vamos a cambiar el color
de los ejemplos como ejercicio.

El código CSS que hemos usado hasta ahora:

css

1 p
2 {
3 color: blue;
 4 }

…que signi ca: " Quiero que todos mis párrafos estén escritos en azul.". El resultado se muestra en la ilustración
siguiente.

Párrafos escritos en azul

Intentad cambiar el nombre de la etiqueta afectada por el código CSS. Por ejemplo, si escribimos h1 , el título
estará escrito en azul. Editad vuestro archivo style.css así:

css

1 h1
2 {
3 color: blue;
4 }

Ahora abrid de nuevo la página HTML (recordad que es la página HTML que se abre en el navegador, no el archivo
CSS): debe aparecer el título mostrado en azul (siguiente ilustración).

Título escrito en azul

Aplicar un estilo a varias etiquetas

Tomemos como ejemplo el siguiente código CSS:
css

1 h1
 2 {
3 color: blue;
4 }
5
6 em
7 {
8 color: blue;
9 }

Signi ca que nuestros títulos <h1> y nuestro teto importante <em> se debe mostrar en azul. Sin embargo, es un
poco repetitivo, ¿no creéis?

Afortunadamente, en CSS hay un modo de hacerlo más rápido si se le quiere dar la misma presentación a dos
etiquetas. Simplemente tenemos que combinar la declaración, separando los nombres de las etiquetas con una
coma, así:
css

1 h1, em
2 {
3 color: blue;
4 }

El resultado se muestra en la ilustración siguiente.

Título y texto importante escrito en azul

Esto signi ca: " Quiero el texto de mis etiquetas <h1> y <em> escrito en azul ".

Se pueden especi car todas las etiquetas que queremos una detrás de otra.

Comentarios en CSS
Como ocurre en HTML, se pueden incluir comentarios. Los comentarios no se muestran, simplemente se usan
para especi car información destinada a vosotros, para encontrar, por ejemplo, algo que estamos buscando en un
archivo CSS largo.

Y, como veréis, el archivo HTML generalmente es bastante corto y la hoja CSS bastante larga (si contiene todos los
elementos de estilo de vuestro sitio web, es bastante normal). Tened en cuenta que se pueden crear varios
archivos CSS para un sitio web si tenemos la necesidad de separar el código CSS de alguna forma (dependiendo
de las diferentes secciones del sitio web, por ejemplo).

¿De qué estábamos hablando? Ah, sí. Comentarios en CSS.

Pues eso, incluir un comentario es muy fácil. Tenemos que introducir /* seguido por nuestro comentario, y

después */ para completar el comentario.

Se pueden escribir comentarios en una o más líneas. Por ejemplo:
css

1 /*
2 style.css
3 ---------
4
5 Por Marta Fonda
6 */
7
8 p
9 {
10 color: blue; /* Los párrafos serán azules */
11 }

Puedo utilizar comentarios en el resto del curso para daros explicaciones dentro de los mismos archivos .css .

Aplicar un estilo: class y id


Lo que os he enseñado hasta ahora tiene una limitación: signi ca, por ejemplo, que TODOS los párrafos tendrán la
misma presentación (en este caso, estarán escritos en azul).
¿Qué tenemos que hacer para que solo algunos párrafos estén escritos de forma diferente? Pondremos el código
CSS en un atributo style de la etiqueta en cuestión (esta es la técnica que os enseñé antes), pero como os he
dicho, no se recomienda (es mejor usar un archivo CSS externo).

Para solucionar el problema, podemos usar estos atributos especiales que funcionan con todas las etiquetas:

el atributo class ;

el atributo id .

Seamos claros desde el principio: los atributos class y id son prácticamente lo mismo. Hay solo una pequeña
diferencia que os mostraré más abajo.
Por ahora, y para hacerlo más simple, solo vamos a centrarnos en el atributo class .

Como acabo de deciros, es un atributo que se puede poner en cualquier etiqueta, ya sea título, párrafo, imagen,
etc.
html

1 <h1 class=""> </h1>

2 <p class=""> </p>
3 <img class="" />
 Sí pero, ¿qué valor se incluye para el atributo class ?

Tenemos que introducir un nombre que identi que a la etiqueta. El que queramos, siempre que el nombre
empiece con una letra.

Por ejemplo, voy a asociar el atributo class introduction con mi primer párrafo (línea 12):
html

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="style.css" />
6 <title>Primeras pruebas de CSS</title>
7 </head>
8
9 <body>
10 <h1>Mi gran sitio web</h1>
11
12 <p class="introduction">¡Hola y bienvenido a mi sitio web!</p>
13 <p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
14 </body>
15 </html>

Una vez hecho esto, el párrafo ya está identi cado. Tiene un nombre: introduction . Podremos volver a usar este
nombre en el archivo CSS para decir: " Quiero que se muestren en azul solo las etiquetas llamadas 'introduction'".

Para hacer esto en CSS, introducimos el nombre de nuestro atributo class con un punto al principio, como se
muestra a continuación:
css

1 .introduction
2 {
3 color: blue;
4 }

Probad el resultado: solo el párrafo llamado introduction se mostrará en azul (siguiente ilustración).

Solo el primer párrafo se muestra en azul

 ¿Y el atributo id ?

Funciona exactamente igual que el atributo class , con una excepción: solo se puede utilizar una vez en el
código.

¿Qué nalidad tiene esto? No mucha, para ser honestos. Os sería útil si utilizarais JavaScript más adelante para
reconocer ciertas etiquetas. Y ya hemos visto el atributo id en el capítulo sobre enlaces (para introducir

hipervínculos). En la práctica, solo introducimos un atributo id sobre elementos que son únicos en la página,
como el logo:
html

1 <img src="images/logo.png" alt="Logo del sitio web" id="logo" ></code>

Si utilizamos atributos id , al de nir sus propiedades en el archivo CSS, tenemos que poner una almohadilla (#)

delante del nombre de id :

css

1 #logo
2 {
3 /* Especificad las propiedades CSS aquí */
4 }

No os molestéis en probarlo, funciona exactamente igual que class .

Si confundís los atributos class y id, recordad que dos etiquetas pueden tener el mismo nombre con el
atributo class. Y el nombre de id, sin embargo, debe ser único en la página HTML.

Etiquetas de propósito general

Quizás alguna vez tengamos que aplicar un atributo class (o un atributo id ) a algunas palabras que
originalmente no iban entre etiquetas.

De hecho, el problema de class es que es un atributo. Así que solo podemos introducirlo en una etiqueta. Si, por
ejemplo, solo quiero cambiar "bienvenido" en el siguiente párrafo:
html

1 <p>¡Hola y bienvenido a mi sitio!</p>

Sería fácil hacerlo si "bienvenido" estuviera entre etiquetas, pero no lo está. Por suerte, alguien inventó... la
etiqueta-sin-propósito.

De hecho, se inventaron dos etiquetas llamadas de propósito general, que no tienen un signi cado especial (no
especi can que la palabra es importante, por ejemplo). Existe una pequeña (aunque importante) diferencia entre
estas dos etiquetas:
 <span> </span> : es una etiqueta de tipo inline, es decir, una etiqueta situada dentro de un párrafo de texto,

para seleccionar solo ciertas palabras. <strong> y <em> son de la misma familia. Esta etiqueta se utiliza en
medio de un párrafo y es la etiqueta que vamos a usar para darle color a "bienvenido".

<div> </div> : es una etiqueta de tipo block, entre la cual se encuentra un bloque de texto. <p> , <h1> ,
etc. son de la misma familia. Estas etiquetas tienen algo en común: crean un nuevo "bloque" en la página y,
de este modo, insertan un salto de línea necesariamente. <div> es una etiqueta que se usa
frecuentemente para crear un diseño, como veremos más adelante.

Por ahora, utilizaremos la etiqueta <span> en su lugar. La colocamos alrededor de "bienvenido", le añadimos un
atributo class (el nombre que queráis), creamos el archivo CSS y ya lo tenemos.
html

1 <p>¡Hola y <span class="heybuddy">bienvenidos</span> a mi sitio web!</p>

css

1 .heybuddy
2 {
3 color: blue;
4 }

Podéis observar el resultado en la siguiente ilustración.

La palabra bienvenido está escrita en azul

Aplicar un estilo: los selectores avanzados



En CSS, lo más difícil es saber cómo dar en el clavo con el texto al que queremos cambiar el formato. Para
seleccionar los elementos de la página que queremos cambiar, usamos los llamados selectores. Ya hemos usado
varios de ellos anteriormente en este capítulo, así que vamos a resumirlos para comenzar.

Los selectores que ya conocemos

Estos selectores, como hemos visto más arriba, son los más usados con diferencia. Tenéis que aprendéroslos de
memoria. Empecemos por el principio:

css
 1 p
2 {
3
4 }

signi ca "quiero cambiar todos los párrafos". Después de eso, es decisión tuya lo que quieras hacerle a estos
párrafos (escribirlos en azul, por ejemplo).

También vimos:
css

1 h1, em
2 {
3
4 }

... que signi ca "Todos los títulos y todo el texto importante". Hemos seleccionado dos etiquetas a la vez.

Y, por último, hemos visto cómo seleccionar etiquetas especí cas a las que les hemos dado un nombre utilizando
los atributos class y id :

css

1 .class
2 {
3
4 }
5
6 #id
7 {
8
9 }

¿Y sabes qué? Hay muchas más formas de seleccionar etiquetas en CSS. No vamos a verlas todas porque son
muchas y algunas son bastante complejas, pero a continuación te doy algunos consejos a tener en cuenta para
ser más efectivo en CSS.

Los selectores avanzados

*: selector de propósito general
css

1 *
2 {
3
4 }

Selecciona todas las etiquetas sin excepción. Se llama selector de propósito general.

A B: una etiqueta dentro de otra

css

1 h3 em
2 {
3
 4 }

Selecciona todas las etiquetas <em> situadas dentro de una etiqueta <h3> . Ten en cuenta que no hay coma
entra los nombres de las dos etiquetas.

Ejemplo de código HTML correspondiente:

html

1 <h3>Título con <em>texto importante</em></h3>

A + B: una etiqueta seguida de otra etiqueta

css

1 h3 + p
2 {
3
4 }

Selecciona la primera etiqueta <p> situada después de un título <h3> .

Ejemplo:
html

1 <h3>Título</h3>
2
3 <p>Párrafo</p>

A[attribut]: una etiqueta que tiene un atributo

css

1 a[título]
2 {
3
4 }

Selecciona todos los enlaces <a> que tienen un atributo title .

Ejemplo:
html

1 <a href="http://site.com" title="Descripción emergente">

A[attribute="Valor"]: una etiqueta, un atributo y un valor exacto

css

1 a[title="Clic aquí"]
2 {
3
4 }

Igual, pero el atributo también debe tener el valor exacto "Clic aquí".

Ejemplo:
html
 1 <a href="http://site.com" title="Clic aquí">

A[attribute="Valor"]: una etiqueta, un atributo y un valor

css

1 a[title*="aquí"]
2 {
3
4 }

Igual, pero el atributo esta vez tiene que contener la palabra "aquí" en este valor (en cualquier posición).

Ejemplo:
html

1 <a href="http://site.com" title="Por aquí">

¡También existen otros selectores!

Aquí solo he descrito algunos selectores CSS y hay muchos más. Si queréis una lista completa, podéis encontrarla
directamente en el sitio web de W3C website. Es muy completa.

Descubriremos más selectores más adelante.

En resumen

CSS es otro lenguaje que complementa al lenguaje HTML. Su función es dar formato a tu sitio web.
Tienes que tener cuidado con la compatibilidad de los navegadores con algunas funciones recientes de
CSS3. Cuando un navegador no conoce una instrucción de formato, simplemente la ignora.
Podemos escribir código CSS en varios sitios diferentes, siendo el más recomendado crear un archivo
separado con la extensión .css (por ejemplo: style.css ).

En CSS, seleccionamos qué partes de la página HTML queremos editar y después cambiamos su
presentación con propiedades CSS:
css

1 tag1
2 {
3 property1: value1;
4 property2: value2;
5 }

Hay muchas formas de seleccionar la sección de la página a la que queremos dar formato. Por ejemplo,
podemos seleccionar:

todas las etiquetas del mismo tipo, con tan solo introducir su nombre ( h1 por ejemplo);

algunas etiquetas especí cas, a las que hemos asignado etiquetas utilizando los atributos class o

id ( .classname o #idname ) ;

solo etiquetas situadas dentro de otras etiquetas ( h3 em ).

...
  QUIZ: QUIZ 1 DAR FORMATO AL TEXTO 

Teacher
Mathieu Nebra
Entrepreneur à plein temps, auteur à plein temps et co-fondateur d'OpenClassrooms :o)

OpenClassrooms

What we do

Our blog

Work at OpenClassrooms

Business solutions

Business

Learn more

Become a mentor

Help and FAQ

Terms of Use

Privacy Policy

Contact us

English