Como añadir hojas de estilo a tu web. Como añadir CSS a tu web.

Añadiendo CSS a una página web

Hay varias maneras de añadir las instrucciones de estilo CSS a una página web.

  • Se puede añadir el estilo individualmente a cada elemento HTML.
  • Se puede añadir declarando los estilos CSS en el encabezado del código HTML <header></header>.
  • O se puede añadir toda la lista de estilos CSS en un documento separado con extensión ‘.css’.

Con la combinación de 4 elementos HTML podemos añadir el estilo CSS a una sección de la página web, estos son: <style>, <div>, <span> y <link>. O con 3 atributos de HTML, que son: style, id y class también podemos afectar el estilo CSS mas directamente en un elemento HTML.

Añadiendo el estilo CSS individualmente a elementos HTML

Todos los elementos HTML tienen un atributo llamado style’, basta añadir este atributo junto con la regla CSS que se desea aplicar para añadir el estilo deseado, no es recomendable usar este atributo para aplicar un estilo CSS a tu documento HTML, lo mas optimo es separar el estilo CSS del código HTML, salvo en algunos casos especiales cuando queremos darle mas jerarquia a un estilo CSS sobre el elemento HTML.

Ejemplos añadiendo estilos a diferentes elementos HTML:

Cambiando el color del párrafo: <p style=”color:#fff;”>Este párrafo es de color VERDE</p>

Cambiando el tamaño de la fuente: <h2 style=”font-size:22px;”>Este elemento H2 ahora tiene un tamaño de letra de 22px</h2>

Añadiendo un background a una sección de tu pagina: <div style=”background-image:  url(/imagenes/laimagen.png)”></div>

Es bastante fácil, como puedes ver. Solo es necesario añadir el atributo ‘style‘ en el elemento al cual deseas aplicar un estilo.

Es importante entender que los elementos <div> y <span> pueden ser usados para aplicar estilos CSS por secciones en la página web.

Con el elemento <div> se aplicará un estilo CSS a un bloque entero o sección de tu página en cambio el elemento <span> aplicará el estilo CSS sobre la línea donde se usa, lo entenderemos mejor en este ejemplo:

Código HTML — Ejemplo usando los elementos <div> y <span>.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Untitled Document</title>
</head>

<body>
<div style=”background-color:lightblue;”>
<p>El fondo de este p&aacute;rrafo es azul claro</p>
<p><span style=”background-color:green;”>El fondo de esta p&aacute;rrafo es verde.</span>;</p>
<p>Este párrafo esta dentro del <div> por ende el fondo es azul claro.</p>

<p>El tamaño de <span style=”color: red; font-size: 20px;”>este texto es de 18pixels</span> y es de color rojo</p>

</div>
<p>Y el fondo no tiene ningun estilo, porque esta afuera del bloque <div></p>

</body>
</html>

Para ver el ejemplo en otra ventana haz clic aquí.

Como ves, los elementos <div> y <span> están usando el atributo style para aplicar el estilo CSS. El primer <div> aplicara un estilo de color de fondo. Mas adelante tenemos un  <span> que anulara ese estilo y aplicará un fondo de otro color sobre esa línea. Ya al final vemos que el último párrafo no esta dentro del bloque <div> por lo tanto no tiene ninguna regla CSS para el color de fondo, pero luego una pequeña línea del párrafo tendra un <span> aplicándole un estilo de color y tamaño a la fuente.

Pero style no es el único atributo que <div> o <span> pueden usar para aplicar estilos a una página web, también están los atributos: id y class. Estos 2 atributos se usan para identificar el estilo a usar previamente escrito en una hoja de estilos CSS o en el encabezado de la página web usando el elemento <style>. El atributo id se usa para aplicar el estilo CSS a un solo elemento, class se usa para aplicar el estilo CSS a varios elementos, esa es la única diferencia de estos atributos.

 

Añadiendo el estilo CSS en el encabezado del código HTML.

Código HTML — Ejemplo usando el elemento HTML STYLE

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Untitled Document</title>
</head>
<style>
body {background-color:#ffc;}
p {font-size:14px;}
h1 {font-size:18px; color:red; }
</style>

<body>
<p>El fondo de esta p&aacute;gina es amarillo claro.</p>
<h1> El tama&ntilde;o de este texto es de 18pixels y es de color rojo</h1>
</body>
</html>

Como vemos en el ejemplo de arriba, es posible añadir el estilo CSS dentro del encabezado, <header></header>, de una página usando el elemento <style>. Este elemento solo se usa en el <header></header> del documento y las reglas aquí creadas tienen una mayor jerarquia que las creadas en una hoja de estilos separadas. Las reglas acá creadas afectarán solo esta página.

 

Añadiendo CSS con un documento externo

Hay una manera mas de añadir reglas CSS a un website, esta es llamando a un documento externo. Es hoy en día la forma mas usada para aplicar CSS a websites ya que permite una manera mas sencilla de aplicar estilos de una manera total a tu website. Un webmaster preferira hacer un cambio en un solo documento CSS  y que este afecte todas las páginas del website.

El archivo externo solo debe de tener reglas de estilo CSS y debe de ser guardado con la extensión ‘.css’

Una vez este creado este archivo solo debes de enlazarlo a tu website usando el elemento <link>. El elemento <link> debe de ir en el encabezado de tu website.

 

Añadiendo el estilo CSS usando <link>

Código HTML — Ejemplo usando el elemento LINK

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Usando LINK para llamar un archivo externo que contiene CSS</title>

<link rel=”stylesheet” href=”/style.css” type=”text/css” />

</head>

<body>

… Tu pagina web
</body>
</html>

Muy bien, esas son las 3 maneras que existen para añadir estilos CSS a tu website.

Si tienen preguntas, estamos disponibles para responder tus preguntas en nuestra página de Facebook: http://www.facebook.com/paginasin

Add Comment