Understanding HTML & CSS Simply

What you want on your page is HTML

Header Box
Header Image
Content Box
Footer Box
Footer Information

How it will look is CSS

I want a bit of spacing at the top and then my header image.
I want to have my title be blue and be bigger then the regular text.
I want my text to be grey and I want to use Arial font.

HTML stuff are called Tags & Elements

CSS stuff are called Selectors & Properties

They are both code languages.

To convert what you want to on the page we have to say it in the HTML language.

<header><img src="myheaderimage.png" /></header>

header is the tag <header></header> is the element.

<header><img src="myheaderimage.png" /></header>
 <h1>This is my content</h1>
 <p>The is where I talk about my content.</p>
 <p>This is all copyright Shari Lynn Smith</p>

To convert how you want it look on the page we have say that in the CSS language.

header { padding-top: 25px; }

header is the selector padding-top is the property

header { padding-top: 25px; }
 h1 { color: blue; font-size: 30px; }
 p { color: grey; font-size: 16px; }
 * { font-family: "Arial"}

WordPress handles all of this for you, however understanding what is where can be helpful when you want to change something. this is not all the information nor all that is needed to create a web page, there are many websites that will explain and teach you how to write code. This however will help you to know where you have to go to change something on your WordPress site.


Your Theme writes the HTML Structure code
Your Theme CSS writes the Styling code
WordPress core writes the content HTML code

I work in Thesis because anything you can do with HTML you can do with Thesis. The Thesis Skin Editor does all the HTML structure stuff, the CSS is customizable easily, and WordPress handles all the content stuff.

Next post:

Previous post: