We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.


Posted By

aurele on 09/20/06


Tagged

et


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

marcoba


css ET


Published in: CSS 


con nombre style.css

  1. body {
  2. text-align: center;
  3. color: #777777;
  4. background-color:#ffffff;
  5. }
  6.  
  7. #container {
  8. display: table;
  9. width: 750px;
  10. margin: 0 auto;
  11. }
  12.  
  13.  
  14. h1 {
  15. margin: 8px 0px 0px 0px;
  16. font-family: "Trebuchet MS", Helvetica, sans-serif;
  17. font-size: 15px;
  18. color: #505050;
  19. letter-spacing: 4px;
  20. padding-bottom: 3px;
  21. border-bottom: 1px #777777 solid;
  22. background-color:#ffffff;
  23. }
  24.  
  25. /******************************
  26.   Header + Navigation Menu
  27. ******************************/
  28. #header {
  29. width: 246px;
  30. height: 40px;
  31. float:left;
  32. padding: 25px 0px 25px 0px;
  33. font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
  34. font-size: 36px;
  35. color:#aaaaaa;
  36. background-color:#ffffff;
  37. }
  38.  
  39. #nav {
  40. clear: both;
  41. text-align: left;
  42. width: 750px;
  43. height: 22px;
  44. border-top: 2px #777777 solid;
  45. border-bottom: 2px #777777 solid;
  46. }
  47.  
  48. #nav ul {
  49. margin: 0;
  50. padding: 0;
  51. list-style: none;
  52. }
  53.  
  54. #nav ul li {
  55. margin: 0;
  56. float: right;
  57. }
  58.  
  59. #nav a {
  60. float: left;
  61. font-family: Verdana, Arial, Helvetica, sans-serif;
  62. font-size: 14px;
  63. font-weight: bold;
  64. letter-spacing: -1px;
  65. padding: 2px 10px 0px 10px;
  66. color: #666666;
  67. text-decoration: none;
  68. background-color:#ffffff;
  69. }
  70.  
  71. #nav a:hover {
  72. color: #cc0000;
  73. background-color:#ffffff;
  74. }
  75.  
  76.  
  77.  
  78. /******************************
  79. News Updates Column
  80. ******************************/
  81.  
  82. #newsupdate {
  83. width: 240px;
  84. float: left;
  85. }
  86.  
  87. .newstitle {
  88. margin-top: 8px;
  89. width: 233px;
  90. text-align: left;
  91. padding-left: 7px;
  92. font-family: Arial, Helvetica, sans-serif;
  93. font-size: 17px;
  94. font-weight: bold;
  95. color: #cc0000;
  96. float: left;
  97. background-color:#ffffff;
  98. }
  99.  
  100. .newstitle span {
  101. color: #666666;
  102. background-color:#ffffff;
  103. }
  104.  
  105. #newsupdate p {
  106. margin: 0;
  107. padding-left: 3px;
  108. font-family: "Trebuchet MS", Helvetica, sans-serif;
  109. font-size: 14px;
  110. text-align: left;
  111. color: #505050;
  112. background-color:#ffffff;
  113. }
  114.  
  115. .date {
  116. width: 240px;
  117. float: left;
  118. margin-top: 7px;
  119. text-align: right;
  120. font-family: Verdana, Arial, Helvetica, sans-serif;
  121. font-size: 12px;
  122. color: #6A6A6A;
  123. background-color:#ffffff;
  124. }
  125.  
  126. /******************************
  127. Welcome Message IMG+TEXT
  128. ******************************/
  129. .rightcontainer {
  130. width: 510px;
  131. float: right;
  132. }
  133.  
  134. #welcome {
  135. width: 480px;
  136. height: 150px;
  137. padding: 82px 0px 10px 30px;
  138. border-bottom: 1px #ccc solid;
  139. background: url(images/apple.gif) top right no-repeat;
  140. text-align:left;
  141. font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
  142. font-size: 36px;
  143. color:#aaaaaa;
  144. background-color:#ffffff;
  145. }
  146.  
  147. /******************************
  148. Webpage Contents
  149. ******************************/
  150.  
  151. #content {
  152. margin-top: 10px;
  153. padding-left: 10px;
  154. width: 500px;
  155. float: right;
  156. }
  157.  
  158. #content h3 {
  159. width: 500px;
  160. text-align: left;
  161. font-family: "Trebuchet MS", Helvetica, sans-serif;
  162. color: #777777;
  163. float:left;
  164. margin: 0;
  165. background-color:#ffffff;
  166. }
  167.  
  168. #content p {
  169. margin: 0;
  170. padding: 0;
  171. text-align: left;
  172. font-family: "Trebuchet MS", Helvetica, sans-serif;
  173. font-size: 16px;
  174. color: #000;
  175. background-color:#ffffff;
  176. }
  177.  
  178. /******************************
  179.  images in content if you want - align left or right;
  180.  
  181. ex: <img src="blah.jpg" class="left" />
  182. ******************************/
  183. #content .left {
  184. float: left;
  185. color : #777777;
  186. background-color:#ffffff;
  187. }
  188.  
  189. #content .right {
  190. float: right;
  191. color : #777777;
  192. background-color:#ffffff;
  193. }
  194.  
  195. /******************************
  196. Footer
  197. ******************************/
  198.  
  199. #footer {
  200. float: left;
  201. margin-top: 10px;
  202. padding-top: 3px;
  203. width: 750px;
  204. border-top: 1px #a4a4a4 solid;
  205. font-family: Arial, Helvetica, sans-serif;
  206. font-size: 12px;
  207. color: #333333;
  208. background-color:#ffffff;
  209. }
  210.  
  211. #footer a {
  212. color: #cc0000;
  213. text-decoration:none;
  214. background-color:#ffffff;
  215. }
  216.  
  217. #footer a:active, a:visited {
  218. color: #cc0000;
  219. background-color:#ffffff;
  220. }
  221.  
  222. #footer a:hover {
  223. color: #666666;
  224. background-color:#ffffff;
  225. }

Report this snippet 

You need to login to post a comment.