How to make CSS and HTML Work Together Part 1

For the last week or so I have been struggling to figure out how to place an image into the header of my Wordpress blog that covered the entire area of the header. Though I had a reasonable amount of knowledge about HTML, CSS (Cascading Style Sheet) was completely foreign to me.  I’ve been doing a lot of research online trying to figure out the mystery of CSS, and after a lot of dead ends and partial explanations I was finally able to come to some real conclusions about CSS, and how it relates to HTML.

None of the sources I found describe what I believe to be the key to understanding how CSS and HTML interact.  If you think of your website as a room, HTML is the furniture, and CSS is where you put the furniture.

When you look at your CSS, you will likely see something like this on the sheet:

#header {
width: 960px;
height: 180px;
color: #FFFFFF;
font-size: 16px;
font-weight: normal;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

Pixels (px) is the spacial representation of your header. To be honest I started out just playing with the numbers and previewing each change to see what took place. This also makes it easier to correct mistakes quickly.

CSS does not change the size of HTML objects. If your CSS framework is smaller than your HTML image, the image will not show completely. For instance if your header is 760px and your HTML image is 960px, you will only see 760px of that image.

In the next section, I will explain how HTML and CSS interact.