Introducción al Desarrollo 

Web: HTML y CSS 

Hola,  soy  Sergio  Luján  Mora,  profesor  de  informática  de  la  Universidad  de  Alicante,  y  en  este 
vídeo  que  forma  parte  del  curso  “Introducción  al  desarrollo  web”,  te  voy  a  ayudar  con  tus 
primeros  pasos  con  CSS,  las hojas de estilo en cascada. En este vídeo, formado por tres partes, 
te voy a explicar cómo se usa CSS en HTML. 
 
Antes  de  empezar,  me  gustaría  recordarte  algunos  de  los  sitios  web  en  los  que  puedes 
encontrar  más  información  sobre  mí  y  sobre  mi  trabajo,  y  dos  formas  de  contactar conmigo, a 
través  de  mi  correo  electrónico  [email protected]  y  a  través  de  mi  cuenta  en  Twitter 
@sergiolujanmora. 
 
CSS,  Cascading  Style  Sheets,  las  hojas  de  estilo  en  cascada,  es  la  tecnología  que  se  emplea 
para  definir  la  presentación  visual  de  las  páginas  web.  Antes  de  ver  cómo  se  usa  CSS  en  una 
página  web,  vamos  a  aprender  un  término  muy  importante  en  los  sistemas  informáticos,  el 
acoplamiento, un factor que incide en la calidad de los sistemas informáticos. 
 
Según  la  Wikipedia,  “El  acoplamiento  informático  indica  el  nivel  de  dependencia  entre  las 
unidades  de  software  de  un  sistema  informático,  es  decir,  el  grado  en  que  una  unidad  puede 
funcionar  sin  recurrir  a otras; dos funciones son absolutamente independientes entre sí (el nivel 
más  bajo  de  acoplamiento)  cuando  una  puede  hacer su trabajo completamente sin recurrir a la 
otra. En este caso se dice que ambas están desacopladas”. 
 
Evidentemente,  lo  mejor  sería  un  desacoplamiento  total,  es  decir  que  no  hubiese  ninguna 
dependencia  entre  las  partes  que  constituyen  un  sistema  informático.  Pero  esa  situación  es 
más  bien  imposible  de  lograr.  Por  lo  tanto,  al  final  lo  que  se  intenta  lograr  es  reducir  el 
acoplamiento  al  mínimo  posible:  cuanto  menos  dependientes  sean  las  partes  que  constituyen 
un sistema informático, mejor será el resultado final. 
 
Cuando  usamos  CSS  para  definir  la  presentación  de  una  página  web  escrita  en  HTML,  se  crea 
un  acoplamiento  entre  HTML  y  CSS.  Como  acabamos  de  ver,  debemos de intentar reducir este 
acoplamiento  entre  estas  dos  tecnologías.  En  HTML  se  puede  indicar  que  queremos  aplicar 
unas  reglas  CSS  de  tres  formas:  mediante  el  atributo  style,  mediante  la  etiqueta  <style>  y 
mediante  la  etiqueta  <link>.  En  este  vídeo  vamos  a  ver  el  uso  del  atributo  style,  que  es  la  peor 
opción  ya  que  lleva  aparejado  un  acoplamiento  máximo  entre  HTML  y  CSS,  como  veremos  a 
continuación con un ejemplo. 
 
El  atributo  style  es  uno  de  los  pocos  atributos  de  HTML  que  se  puede  aplicar  a  casi  cualquier 
elemento  de  HTML.  En  HTML  4.01  y  XHTML  1.0,  el  atributo  style  se  puede aplicar a casi todos 
los  elementos  o  etiquetas  excepto  BASE,  BASEFONT,  HEAD,  HTML,  META,  PARAM,  SCRIPT, 
STYLE  y  TITLE.  Sin  embargo,  en  HTML5  se  ha  cambiado  y  ahora  se  indica  que  todos  los 
elementos pueden tener el atributo style. 
 
A  continuación  te  voy  a  mostrar  cómo  utilizar  este  atributo,  pero  antes  vamos  a  ver  las 
propiedades de CSS que voy a utilizar. Voy a utilizar: 
● color para definir el color del texto. 
● background-color para definir el color de fondo del texto. 
● font-family para definir el tipo de letra o fuente. 
● Y font-size para definir el tamaño del texto. 
 
Esta  es  la  página  web  que  voy  a  usar  como  base  para  enseñarte  a  utilizar  el  atributo  style. 
Vamos  a  ver  primero  cómo  se  visualiza  esta  página  web  en  un  navegador,  en  Google  Chrome. 
Este  es  el  aspecto  que  tiene  la  página  cuando  se  visualiza  sin  CSS.  Ahora  voy  a  empezar  a 
añadirle propiedades visuales con el atributo style. 
 
En  primer  lugar  me  voy  a  la  etiqueta  body,  ya  que  al  cambiar  el  color  del  texto  y  el  color  del 
fondo  de  la  etiqueta  u  elemento  body  voy  a cambiar todo el color del fondo y todo el color de la 
página.  Así  que,  le  añado  el  atributo  style  y  primero  voy  a  cambiar  el  color  del  texto,  le  voy  a 
indicar  este  color  #333.  Y  a  continuación  voy  a  cambiar  el  color  del  fondo  y  le  voy  a  poner  el 
color #CCC. 
 
La  forma  de  indicar  los  colores  la  tienes  explicada  en  otro  video,  donde  se  te  explican  las 
distintas  formas  que  existen  en  CSS  para  indicar  un  color.Fíjate  que  estas  dos  propiedades de 
CSS,  color  y  background-color,  las  he  separado  con  un  punto  y  coma  y  al  final  de  la  última 
propiedad también he puesto un punto y coma.  
 
Este  punto  y  coma  no  es  obligatorio,  pero  es  una  buena  costumbre  ponerlo,  ya  que  ahora, 
rápidamente  podría  añadir  otra propiedad de CSS y no me tendría que preocupar en ver si tengo 
que  poner  o  no  poner  el  punto  y  coma.  Si  me  acostumbro  a  ponerlo  siempre,  podré añadir una 
nueva propiedad rápidamente. 
 
Bien,  hemos  cambiado  el  color  del  texto  le  hemos  puesto  #333,  que  es  un  gris  muy  oscuro 
cercano  al  negro.  Y  el  color  del  fondo  de  la  página  le  he  puesto  #CCC,  que  es  un  gris  claro, no 
muy  claro.  Vamos  a  guardar  la  página  y  la  visualizamos  en  Google  Chrome.  Y  podemos  ver  el 
resultado,  vemos  cómo  el color del texto ahora no es un negro completo, sino un negro un poco 
apagado porque es un gris oscuro, y el color del fondo ha cambiado a gris. 
 
Vamos a añadir más propiedades, ahora voy a cambiar los encabezados etiqueta <h1> y <h2>. 
Primero  me  voy  a  la  etiqueta  <h1>,  le  añado  el  atributo  style  y  voy  a  cambiar  lo  siguiente. 
Primero  voy  a  cambiar  el  tipo  de  letra  o  fuente  y  le  voy  a  poner  "Georgia".  Y  también  le  voy  a 
cambiar  el  tamaño  del  texto  y  le  voy  a  poner  "3em",  que  indica que quiero que el <h1> tenga un 
tamaño  del  texto  tres veces el tamaño base actual. Voy a copiar esta propiedad, esta propiedad 
style,  porque  en  el  h2  la  voy  a  reutilizar.  Voy  a  usar  el mismo tipo de letra "Georgia", pero ahora 
voy  a  indicar  un  tamaño  del  texto  "2em",  el  doble.  Y  ahora  copio  esta  propiedad  y  la  aplico  al 
otro <h2>. 
 
Lo  guardo,  lo  ejecuto  otra  vez  en  Chrome  y  vemos  el  resultado.  Vemos  que  ha  aumentado  el 
tamaño  de  los  encabezados,  del  <h1>,  del  <h2>,  y  además  ha  cambiado  su  tipo  de  letra,  su 
fuente.  Si  lo  comparo  con  la  visualización  anterior,  podemos  ver  que  el  cambio  es  evidente. 
Vuelvo  al  código  HTML  y  ahora  lo  que  voy  a  cambiar  son  los  párrafos, y lo que voy a indicar es 
que en mis párrafos de texto quiero usar un tipo de letra "Arial".  
 
Y,  por  si  no  está  disponible  en  tipo  de  letra  "Arial",  indico  un segundo tipo de letra, "Helvética. Y 
finalmente,  un  tipo  de  letra  "sans-serif",  que  es  un  tipo  de  letra  genérico,  indica  la  familia  de 
tipos  de  letra  "sans-serif".  Voy  a  copiar  ahora  este  atributo  style  para  aplicárselo  1a  los  otros 
párrafos  de  texto  que  hay  en  mi  página  web. Lo guardo, lo visualizo otra vez en Google Chrome 
y  podemos  ver  el  cambio,  como  ahora  el  tipo  de  letra  de  mis  párrafos  es  "Arial".  Si lo comparo 
con la versión anterior vemos que hay un cambio significativo. 
 
Así  de  fácil  es  usar  el  atributo  style  para  indicar  las  propiedades  de  un  elemento  o  etiqueta  de 
una  página  web.  Pero  vemos  que  hay  un  problema  importante.  El  problema  importante  sobre 
todo  lo  hemos  visto  aquí  en  el  párrafo  que  me  ha  tocado  copiar,  una,  dos,  tres, cuatro veces la 
misma  propiedad  style  porque  quería  aplicar  las  mismas  propiedades  visuales  a  mis  cuatro 
párrafos  de  texto.  ¿Qué  ocurre  si  ahora  añado  más  párrafos  de  texto?  Tendré  que  volver  a 
copiar  esta  propiedad  style  a  cada  uno  de  los  párrafos  de  texto.  ¿Y  qué  ocurre  si  yo  ahora 
quiero  cambiar  y,  por  ejemplo,  ponerle  un  tipo  de  letra  distinto?  Pues  tendría  que  ir  párrafo  a 
párrafo,  cambiándolo.  Vemos  que  hay  un  alto  acoplamiento  entre  el  CSS  y  el  HTML.  ¿Esto  lo 
podemos resolver, podemos reducir el acoplamiento?  
 
Sí,  eso  lo  veremos  en  el  siguiente  vídeo,  donde  te  explicaré  cómo  usar  la  etiqueta  <style>  para 
indicar  los  estilos  de  una  página.  No  te  confundas,  aquí  estamos  viendo  el  uso  de  un  atributo 
style  y  en  el  siguiente  video te voy a explicar el uso de la etiqueta <style>. Atributo, etiqueta, son 
dos cosas distintas. 
 
Muchas gracias por tu atención. 
 
 
 
 
 
 
AVISO IMPORTANTE 
Este  documento,  su  texto  y  gráficos  e  imágenes,  puede  ser  utilizado  bajo  una  licencia  Creative  Commons  de  tipo 
Atribución,  No-Comercial.  En  caso  de  utilizarse  este  material  o  de  la  creación  de  un  derivado,  la  atribución  se  debe 
respetar  citando  la  fuente  como  “Actívate,  Google  España”  y  expresamente, si es posible, mediante un enlace activo 
​ ttp://google.es/activate​.  
a​ h