(Cascading Style Sheets) Hojas de Estilo en Cascada:
Sirve para centralizar en un documento la dispocision y presentacion de los elemento de un archivo HTML o XML.
De esta manera podemos separar el contenido del disenio y realizar ediciones en cada documento q este vinculado a la hoja de estilo (archivo CSS) y contar con un orden mayor al momento de diagramar y diseñar un sitio, junto a la posibilidad de realizar cambios mas rapido q editando documento por documento.
en un documento CSS podemos colocar las especificaciones y estilo de cada elemento que incluyamos en el documento HTML.
podemos crear elementos como DIVS aplicar clases de estilos propios o podemos designar algun disenio espefico a las etiquetas propias de HTML.
ELEMENTOS
DIVS
un div vendria a representar un espacio por nosotros generados (un contenedor) actulamente se utiliza para reemplazar a las tablas de html para secciones donde no se inluyen datos tabulares.
La principal diferencia que tenemos en este tipo de elemento con respecto a las etiquetas propias de HTML y las Clases, es q unicamente podemos incluir el div q nosotros generamos una unica vez por documento HTML.
para crearlos se coloca el nombre del div que queremos generar anteponiendo el simbolo numeral# y luego entre LLaves {} podemos colocar las propiedas q queremos otorgales a ese DIV (elemento), la forma de colocar las propiedades es colocacando el nombre de la popiedad seguidop por dos puntos (:) y luego los valores, terminado con punto y coma (;)
Ejemplo:
#miDiv {propiedad : valorDeLaPropiedad;}
Luego de crear nuestro documento CSS devemos vincularlo al documento HTML donde queremos incluir los estilos y elementos creados en nuestra hoja de estilos.
para vincularlo debemos insrtar entras las etiquetas <Head> y </head> la vinculacion de la siguiente manera.
<link href=”miHojaDeEstilos.css” rel=”stylesheet” type=”text/css” />
una vez vinculada Nuestra Hoja de estilos podemos incluir en div por nosotros creados de la siguiente manera.
dentra del cuerpo del documento HTML donde queremos incluir nuestro DIV colocamos las siguientes etiquetas.
<div id=”miDiv”> contenido para mi div </div>
CLASES:
Las clases se genran de la misma manera que un div con la diferencia que el nombre q queremos otorgarle debe comenzar con un punto (.) en vez de comenzar con el simbolo numeral que identifica a los DIVS y podemos reutilizarlo dentro del mismo documento HTML las veces que queramos.
Ejemplo:
.miClase {propiedad : valorDeLaPropiedad; }
ETIQUETAS HTML
para las etiquetas propias de html seguimos con la misma metodologia pero no es necesario que coloquemos ningun simbolo por delante del nombre de la etiqueta:
etiquetaHtml {propiedad : valorDeLaPropiedad; }
COMENTARIOS:
para aplicar comentarios dentro del documento CSS podemos hacerlo de la siguiente Manera.
Ejemplo:
/* mi comentario */
EJEMPLO DIV:
#cabecera{
width:800px; /* ancho de nuestro div */
height:120px; /* alto de nuestro div */
background-image:url(images/fondoCabecera.jpg); /* imagen de fondo de nuestro div */
float:left; /* alineacion de nuestro div */
}
EJEMPLO CLASE:
.miTitulo{
font-family:Arial, Helvetica, sans-serif; /*fuentes para miTitulo */
font-size:12px; /* Tamaño de tipografia para miTitulo */
color:#999999; /* Color para miTitulo */
font-weight:bold; /* para que el texto al q le apliquemos nuestra clase sea Bold */
}
EJEMPLO ETIQUETAS HTML:
h1{
font-family:Arial, Helvetica, sans-serif; /*fuentes para el encabezado 1 */
font-size:16px; /* Tamaño de tipografia para el encabezado 1 */
color:#999999; /* Color para miTitulo */
}
te recominedo una vuelta por aqui asi pruebas un sistema q te genera automaticamente layouts en css y pueden ver como funciona todo esto 