Colour code

[Html]

/*Theme Name: ChezTheme URI: http://wilcosworld.co.uk/Version: 0.1Author: Adam WilcoxAuthor URI: http://wilcosworld.co.uk/*//* Reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,blockquote,th,td { margin:0;padding:0;}img { border:0;}em,strong, {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}/* WilcosWorld.co.uk Style */body {color: #444;font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;font-size: 12px;line-height: 20px;background-color: #FFFFFF;}.header {width: auto;background-color: #7E94BF;color: #4C6BA6;font-family: Georgia, "Times New Roman", Times, serif;font-size: 50px;text-align: center;margin: auto;padding-top: 30px;padding-bottom: 10px;border-bottom: 5px solid #4C6BA6;}#description {display: none;}strong {font-weight: bold;}h2 {font-size: 14px;}h3 {font-weight: bold;font-size: 14px;padding-top: 5px;padding-bottom: 5px;}h4  {font-weight: lighter;font-size: 19px;border-bottom: 1px solid #ccc;margin-bottom: 15px;}h5 {float: right;font-size: 12px;text-transform: uppercase;}A:link {text-decoration: none; color: #4C6BA6;}A:visited {text-decoration: none; color: #4C6BA6;}A:hover {text-decoration: underline; color: #4C6BA6;}h1 A:link {text-decoration: none; color: #4C6BA6;}h1 A:visited {text-decoration: none; color: #4C6BA6;}h1 A:hover {text-decoration: none; color: #4C6BA6;}h3 A:link {text-decoration: none; color: #444;}h3 A:visited {text-decoration: none; color: #444;}h3 A:hover {text-decoration: none; color: #444;}h4 A:link {text-decoration: none; color: #444;}h4 A:visited {text-decoration: none; color: #444;}h4 A:hover {text-decoration: none; color: #444;}/* Content */#container{width: 800px;margin: auto;background-image: url(images/background.png);background-repeat: repeat-y;}#content {margin-left: 200px;max-width: 579px;padding: 20px 10px 30px;}.entry-edit {font-size: 10px;opacity: .5;-webkit-transition: opacity .25s ease-out;}.entry-edit:hover {font-size: 10px;opacity: 1;}blockquote {border-left: 1px solid #ccc;margin: 30px 20px 10px 10px;padding-left: 10px;}.post {margin-bottom: 60px;margin-top: 2px;}.post p {margin-top: 10px;margin-bottom: 20px;}.post ul {padding-left: 40px;padding-top: 5px;padding-bottom: 5px;}.post li {padding-top: 5px;padding-bottom: 5px;list-style-type: square;}img, object {display: block;margin-left: auto;margin-right: auto;padding: 3px;border: 1px solid #ccc;}.tags {opacity: .2;-webkit-transition: opacity .25s ease-out;}/* Sidebar */#navigation {float: left;width: 160px;margin: 0;padding: 1em;}#navigation ul#menu {list-style: none;line-height: 1em;margin: 0 !important;}#navigation ul#menu li a:hover {background: #dbdddd;}#navigation ul#menu li a, #sidebar ul#menu {text-decoration: none;color: #4C6BA6;text-align: right;display: block;padding: 1.1em 1em 0.8em 0.5em;text-transform: uppercase;font-size: 12px;letter-spacing: 0.24em;}#navigation img, object {border: none;float: right;clear: right;margin: 15px 17px 5px 0px;}/* Footer */#breaker {	clear: both;	margin: auto;}#footer {	clear: both;	width: 800px;	margin: auto;	text-align: center;	padding: 10px 0px 10px 0px;}#footer p {	margin-top: 5px;	margin-bottom: 5px;	font-size: 10px;	line-height: 10px;}/* Archive */#monthly_archives li {	font-weight: bold;	font-size: 14px;	line-height: 25px;	padding-bottom: 3px;}#monthly_archives .archive_entry li {	line-height: 19px;	font-weight: normal;	font-style: normal;	font-size: 12px;}

Can someone pin point me in this code a piece of it that gives a blue bar horizontally?

[Ingolme]

Maybe you can link us to the page, or post a screenshot. And give more information. I don't see anything in your CSS referring to something blue.Where is the blue bar? Does it take the whole screen? How wide is it? Does it have anything inside it?

[jeffman]

You must really like this question. .header has a medium blue background. If it's a div, then it's width is as wide as its container, maybe the full window. Its height will be determined by what it contains. Could be a bar.

[Html]

Yes it is a horizontal blue bar, WilcosWorld.co.uk is the site.

[jeffman]

In the banner at the top, where it says WilcosWorld? Yeah, it's in the .header definition, right where I said it would be.

[Html]

Um, where is that piece?

[jeffman]

/* WilcosWorld.co.uk Style */body {color: #444;font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;font-size: 12px;line-height: 20px;background-color: #FFFFFF;}.header {width: auto;background-color: #7E94BF;color: #4C6BA6;font-family: Georgia, "Times New Roman", Times, serif;font-size: 50px;text-align: center;margin: auto;padding-top: 30px;padding-bottom: 10px;border-bottom: 5px solid #4C6BA6;}

[Html]

I can just stick that into my html right? I won't need a css style sheet.

[jeffman]

I thought it was already part of your document. Are you talking about putting it into a different document?Either way, no. It has to be part of a style sheet. But a stylesheet can be defined internally inside a set of <style></style> tags.

[Html]

Oh no, that was just an example from a website.I thought it might be a nice addition to a very normal looking page. A bit of colour.So,

<style>header {width: auto;background-color: #7E94BF;color: #4C6BA6;font-family: Georgia, "Times New Roman", Times, serif;font-size: 50px;text-align: center;margin: auto;padding-top: 30px;padding-bottom: 10px;border-bottom: 5px solid #4C6BA6;} </style>

That is correct?

[jeffman]

Close, but you need that dot. If you write it like this, it will apply only to <div class="header"> elements:div.headerIf you write it like this, it can be applied to ANY element with class="header" --.header

[Html]

Righty, um, I've got a font in my header.

[jeffman]

Font definitions are part of the header's style. You don't (or shouldn't) have a <font> tag in your HTML. If you have <div class="header">Header Text</div>, then the font for those words is already defined in the definition you posted a few hours ago. That's part of the point of CSS. If you need multiple paragraphs in the header, and their text requires different text styles, then you should create a class definition to be applied to those paragraphs. If that's not the case, don't worry about it.

[Html]

Right, so <div class="header">Header Text</div>You then put the style within, between that?

[jeffman]

Ahh! No. The style declaration always goes in the <head>. Here's a complete, but simplified, document with your style declaration included. It shows how things fit together.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		<title>Welcome</title>		<style type="text/css">			.header {				width: auto;				background-color: #7E94BF;				color: #4C6BA6;				font-family: Georgia, "Times New Roman", Times, serif;				font-size: 50px;				text-align: center;				margin: auto;				padding-top: 30px;				padding-bottom: 10px;				border-bottom: 5px solid #4C6BA6;			}		 		</style>	</head>	<body>		<div class="header">			<p>HELLO</p>		</div>	</body></html>

[Html]

Oh yes, that declare thing for css. I've never got my head fully around with css. Time, that is the key. Thank you for now.