How to make CSS and HTML Work Together Part 2

In part 1 we learned what CSS is, now we can see what it does. We now know how to move our furniture around, lets bring it in the room. HTML is one of the languages of the internet. It is how the internet interprets images, words, music etc.

Thanks to the sharing and teaching power of the internet there are may great places to generate HTML codes. Because of that, actually creating the proper HTML code is easy, its the placement that has become a little more difficult to understand.

If you’re using a templated website (and most of us are), when you place an HTML object onto the web page, you preview it and tweek the CSS code to make sure the object is place where you want it. Usually you see this problem with objects like headers, footers, and images to name a few.

Initially, my CSS header template was 760px which caused it to look like this: as a result, the header is centered like this in the template:

When I edited the header, i changed the pixel field to 960px: which made the field wider. As a result, the expanded header looked like this: .

As you can see, CSS has the ability to stretch and shape the HTML objects you place into your template.

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.