Creando La Hoja de estilo:

La hoja de estilo es aquel trozo de codigo el cual se encarga de definir los estilos, colores, maquetacion del
contenido mostrado, Es el como veran nuestros usuarios nuestra aplicacion web, Este sera Identico da igual que
Sistema de programacion que Utilizemos (Html, Php, Etc), Este Puede estar dentro del mismo codigo fuente de nuestra aplicacion o en una hoja de estilo independiente.

Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, justificación del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital.

Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o un editor TXT. Asimismo, constituyen una parte esencial de los lenguajes de marcas para edición digital: LaTeX, XML y XHTML. Dos lenguajes de hojas de estilo son CSS y XSL.

Ejemplo hoja de estilo dentro del mismo codigo fuente

Archibo Index.html o Index.Php

<html>
 <head>
  <title>El titulo del Documento</title>
  <style>
  h1 { font-size:18px; color:#060 ; }
  .cuadro_rojo { float:left;  border:1px #F00 solid;}
  .cuadro_azul { float:right; border:1px #00C solid;}
  </style>
 </head>
 <body>
  <h1>Contenido Visible de la pagina</h1>
  <div class="cuadro_rojo">Este es un cuadro rojo</div>
  <div class="cuadro_azul">Este es un cuadro azul</div>
 </body>
</html>

Ejemplo hoja de estilo Externa en un archibo llamado style.css

Hoja de estilo externa style.css

  h1 { font-size:18px; color:#060 ; }
  .cuadro_rojo { float:left;  border:1px #F00 solid;}
  .cuadro_azul { float:right; border:1px #00C solid;}

Archibo Index.html o Index.Php

<html>
 <head>
  <title>El titulo del Documento</title>
  <link rel="stylesheet" type="text/css" href="aqui la ruta de tu hoja de estilos externa"  />
 </head>
 <body>
  <h1>Contenido Visible de la pagina</h1>
  <div>Este es un cuadro rojo</div>
  <div>Este es un cuadro azul</div>
 </body>
</html>