Empresa de Diseño Gráfico y Diseño Web de Guatemala
info@dgwstudios.com | Tel: (502) 57479313
Guatemala, C.A.
 
Inicio Nosotros Portafolio Servicios Hosting Contacto Login
Digital, Graphic & Web Studios
               
      Tutoriales        
 
               
CSS - Introducción            

Hojas Estilo Cascada (CSS), son indispensables hoy en dia para todo buen diseñador de sitios web.

Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 del World Wide Web Consortium (W3C), es un estándar aceptado por toda la industria relacionada con la Web, o por lo menos, gran parte de navegadores (es verdad el IExplorer de Microsoft nos puede dar un dolor de cabeza). Podemos visitar W3C
Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css

Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca HTML. Se define en la propiedad style los estilos a definir para dicha marca.
Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos.
La sintaxis para definir un estilo a una marca HTML es la siguiente:

  

<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>

        
 

La otra opcion consiste en hacer el codigo mas limpio, y declarar una Hoja CSS con todos sus atributos y clases por separado.
Ventajas:
Por estar por separado, se pueden utilizar las clases en distintas paginas web, sin necesidad de redefinirlas en cada una,
Si se cambia un atributo en una clase, el resultado se refleja en todas las paginas web que tienen instanciada dicha clase.

Ejemplo:

Sin embargo, hay dos alternativas mas, que consisten, 1) en colocar las clases CSS, con sus atributos en la cabecera de la pagina html (<head></head>)

Ejemplo:

        
 

Estilo.css

body {
    color: #fff000;
    background-color: #d8da3d
        }

.primerclase {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }

  

<html>
<head>

<title>Mi primera página con estilo CSS</title>
<style type="text/css">
body {
color: #fff000;
background-color: #d8da3d
}

.primerclase {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
</style>
</head>
<body>
<div class="primerclase">
Este cuadro tiene las propiedad declaradas en la clase “primerclase” de la CSS.
</div>
</body>
</html>

    
       
 

<html>
<head>
<title>Mi primera página con estilo CSS</title>
<link href="Estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="primerclase">
Este cuadro tiene las propiedad declaradas en la clase “primerclase” de la CSS.
</div>
</body>
</html>

  
     

Con esto concluimos el primer nivel de las Hojas Estilo Cascada.
Espero les sirva. Comentarios hágamelos llegar a:
byron@dgwstudios.com

Byron R. Barrientos
DGW Studios
Webmaster

  
               
  Regresar a Tutoriales    
 
               
DGW Studios │ ©2010 Todos Los Derechos Reservados │ info@dgwstudios.com  
     
         
Síguenos: