Tema: consulta de principiante como empezar con los css
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 26/12/2011, 18:11
Avatar de Yacobh
Yacobh
 
Fecha de Ingreso: diciembre-2011
Ubicación: con los pies en la tierra
Mensajes: 32
Antigüedad: 13 años
Puntos: 7
Respuesta: consulta de principiante como empezar con los css
LA mejor forma de empezar con css, es bajarte una hoja de estilos de otra web, o de algún tutorial, y subirla en el servidor donde tengas alojada tu pagina haciendo el enlace entre la pagina y tu hoja de estilos...
este esun ejemplo de una hoja de estilos.. la guardas como estilos.css

Código CSS: 
Ver original
  1. body {
  2.     background-color: #666666;
  3.     font-family: Arial, Helvetica, sans-serif;
  4. }
  5. /*Documento CSS*/
  6.  
  7. #menu{
  8.     float: left;
  9.     width: 150px;
  10.     height: 100px;
  11.     padding: 7px;
  12.     padding-left: 8px;
  13.     border-right-color: #ececf;
  14.     border-right-width: 1px;
  15.     border-right-style: dotted;
  16. }
  17.  
  18. #menu a{
  19.     padding: 3px 1px;
  20.     display: block;
  21.     width: 100%;
  22.     text-decoration: none;
  23.     font-weight: bold;
  24.     color: #CCCCCC;
  25.     border-bottom-width: 1px;
  26.     border-bottom-style: dotted;
  27.     border-bottom-color: gray;
  28. }
  29.  
  30. #menu a:hover{
  31.     background-color: #CCCCCC;
  32.     color: #333333;
  33. }
  34.  
  35. #contenido{
  36.     float:center;
  37.     margin:0 auto 0 auto; 
  38.     width:480px;
  39.     height: 600px;
  40.     padding: 5px;
  41.     padding-bottom: 8px;
  42.     background-color: #CCCCCC;
  43. }
  44.  
  45. .titulo {
  46.     color: #006699;
  47.     font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif, Verdana, Arial, Helvetica, sans-serif;
  48.     text-align:center;
  49. }
  50. .comentario {
  51.     color: #006699;
  52.     font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif, Verdana, Arial, Helvetica, sans-serif;
  53.     text-align:center;
  54.     font-style: italic;
  55. }
  56. .parrafos {
  57.     color: #000000;
  58.     font-family: Verdana, Arial, Helvetica, sans-serif;
  59. }

y luego un codigo html como este
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titulo</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="menu">
este es  el menu <br>
</div>

<div id="contenido">
  <h3 class="titulo">este es el contenido en titulo</h3>
  <br>
  <h2 class="comentario">este un coentario</h2>
  <BR><BR> <h1 class="titulo">este un titulo masgrande</h1>
  <p>Escoge una opci&oacute;n del men&uacute;...  </p>
</div>

</body>
</html>
y si utilizas un editor como notepad++ podrias probarlo. se baja rapido y no te quita mucho tiempo, si despues quieres cambiar los estilos vas probando y asi te daras cuenmta de que es cada cosa