Curso de Marketing Online

Asignatura 1. Bloque 2: El entorno web.

Tipos de web. Navegación web. Usabilidad

Anexo: CSS básico

1
Página

_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Ed. - Oct. 2015, www.cursosmarketingonlinefuned.com
 Índice

1 Ubicación código CSS ...................................................... 3

1.1 Ejemplo .................................................................. 4

1.2 Conflictos CSS .......................................................... 5

2 Uso del CSS .................................................................. 6

2
Página

_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Ed. - Oct. 2015, www.cursosmarketingonlinefuned.com
 1 Ubicación código CSS

El CSS nos permite especificar el estilo con el que se visualizarán los elementos de
nuestra página web. Dicho código CSS lo podemos colocar en distintas ubicaciones:

 Como atributos en las propias etiquetas HTML.

Para colocar estilos CSS dentro de etiquetas utilizaremos el atributo style con el
formato style=“atributo:valor;atributo:valor”

 En la cabecera del fichero HTML.

Para colocar estilos CSS en el head de nuestra web usando la etiqueta <style>. En ella
definimos sobre qué elementos queremos aplicar nuestros estilos y los mismos.

3
Página

_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Ed. - Oct. 2015, www.cursosmarketingonlinefuned.com
  En un fichero externo.
Podemos colocar el código CSS en un archivo separado de forma que podemos usar
el mismo código para distintas páginas. Es la alternativa más utilizada.

En nuestro fichero de estilos vamos a ir definiendo:

 Los estilos que queremos que tenga cada uno de los elementos de la web.
 Y los estilos de las clases que definamos.

Guardamos nuestro fichero de estilos y lo insertamos en la web en la que queramos

ponerlo.

1.1 Ejemplo
Vamos a verlo con un ejemplo:

1. Definimos nuestros estilos y los guardamos en la carpeta correspondiente con el

nombre estilos.css 4
Página

_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Ed. - Oct. 2015, www.cursosmarketingonlinefuned.com
 2. Creamos nuestro HTML y lo guardamos en la carpeta correspondiente con el nombre
index.html.

3. Como habíamos insertado el fichero estilos.css en nuestra web index.html al

visualizarla en el navegador el texto se nos verá formateado con los estilos que le
hemos puesto.

1.2 Conflictos CSS

Todas las formas de insertar códigos CSS en una web son igualmente válidas y todas ellas
pueden convivir dentro de una misma web.

Nos surge aquí una duda ¿Esto no podría llevar a conflictos si definimos dos estilos
distintos para la misma etiqueta?

La respuesta a la anterior pregunta es que NO. Según donde esté definido un estilo, este
tendrá mayor o menor prioridad con respecto a otros, en caso de solaparse.
5
Página

_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Ed. - Oct. 2015, www.cursosmarketingonlinefuned.com
 El orden de prioridad de los estilos de menor a mayor prioridad es fichero externo, en la
sección HEAD y en la etiqueta.

2 Uso del CSS

La forma de definir los estilos de una o varias etiquetas es de la forma:

Del mismo mimo podemos definir clases de estilos que luego aplicaremos sobre distintas
etiquetas. Lo primero que haremos será definir la clase.

Y finalmente asociar a la etiqueta la clase que queremos que se le aplique:

6
Página

_______________________________________________________________________
Fundación UNED, Curso de Marketing Online 3ª Ed. - Oct. 2015, www.cursosmarketingonlinefuned.com