Създаване на външния вид на сайта ни с помощта на CSS

След като сме разписали нашия сайт дотук, можем бързо да го разкрасим. Всичко е като пудриерата на дадена дама. Тя е ефектна в умелите ръце и смешна в неловките. Резултатът обаче е двойнствен - имаме някакъв външен вид, а съдържанието не е повлияно. Разбира се, кое е важно, решавате вие. Аз ще акцентирам на външния вид, защото тази глава е посветена на него. И така, създайте моля следващия текстов файл. Този път го кръстете style.css. Ако сте наблюдавали кода дотук, може би сте забелязали този анонс. Ето и текста:

body {background-color:#8a8;}
#wrapper {width:960px; margin:0 auto;position:relative;}
#contents {width:620px;min-height:500px;}
#contents h1 {margin-top:20px;margin-left:-21px;background-color:#373; height:75px;padding:10px 10px 15px 40px; border-bottom:2px inset #262;width:922px;}
#contents p {padding:0 15px;border-left:2px solid #cce0cc;border-right:2px solid #cce0cc;min-height:450px;}
#container{width:920px;height:auto;border:1px outset #555;padding:20px;background-color:#ddd;margin-top:20px;}
#navigation {width:300px;left:100%;margin-left:-290px;top:30px;position:absolute;border:0;border:1px outset #666;padding:2em;background-color:#eee;}
#navigation ul,#navigation ul li {list-style-type:none;}
#navigation ul {padding:0;}
#navigation ul li a {text-decoration:none;font-size:15px;font-weight:bold;color:#373;}
#navigation ul li a:hover {text-decoration:underline;}
#navigation ul li ul li a {font-size:14px;}
#navigation ul li ul,#navigation ul li ul li ul{padding-left:.5em;}
#navigation ul li ul li ul li a {font-size:13px;font-weight:normal;}
#navigation ul {padding-bottom:10px;border-bottom:1px solid #484;}
#navigation ul li ul {border-bottom-width:0px;padding-bottom:2px;}
		

Сега запишете файла на същото място, където записахте и останалите. Можете да видите примера на това място...

« Структура на нашия сайт ... Да помислим за машините »