How HTML and CSS Work Together
by Chris G Bell
HTML stands for Hyper Text Markup Language and it's used behind the scenes to construct the layout of website pages. Forget about the fancy colors, images and slide shows for a minute and think about a research paper that needs an introduction, body and conclusion. The introduction is always at the top of the page, the body is in the middle and the conclusion is at the bottom.
HTML is used to set up blocks of pages into table formats. First there's a <header>, then a <body> and finally a <footer>. Those HTML tags open the section and a backslash closes them. For instance, all of the header information will be placed between <header> and </header> and all of the footer information is placed between <footer> and </footer>. From there you can add variables to each section as you see fit.
<header width="800" height="250"> HEADER IMAGE </header>
Numbers in HTML equate to pixels, so the header section of code above will be 800 pixels wide and 250 pixels high. You can create an image in a simple paint program, save it, and use it in your header section like this:
<header width="800" height="250"> <img src="your-header-image.jpg"> </header>
Then you can start your body section: <body> This is my first website using HTML </body>
Be sure to end your header section before starting your body section. If you haven't heard of CSS, Cascading Style Sheet, you should start to familiarize yourself with that language at the same time because the two go hand in hand. CSS is used to make the background of the page green, the header section red, the color of your links blue, the font size and colors of each section and much more.
For instance, CSS will designate all <header> text to be Times New Roman, while all <body> text is Currier New. Also, every time you create a <table></table> the contents will be centered in each field. CSS coding is done on a separate document so that it controls your entire website design from a single page. For instance, it would be easy for me to change the height of the <header height="250"> by going into the HTML and changing it. However, what if I already copied and pasted the header onto 500 other pages? It wouldn't make sense to go into 500 pages to change a little piece of information.
CSS Page: header {height:250px;}
HTML Page: <header> IMAGE </header>
Now, every single <header> section of my website will be set at a height of 250 pixels. If I change it on the CSS page it will also change across every page of my website. That's why it's important to incorporate the two languages together at the beginning of your project.
Don't overwhelm yourself with every single line of code in HTML and CSS because, before you know it, you'll be moving onto a more advanced coding language such as PHP. You can use websites online to find particular lines of code you need each time you need it. Before you dive into code you should have drawn a basic layout of what you want to create. Then search, "HTML code to change header width" or "CSS code to insert background image". Try not to get frustrated if your code isn't working, trust me it's YOU making the mistake. If you forget a "/" or a ">" to close a tag your code will not work.
Creating Visits is a company in New Hampshire that builds websites using HTML and CSS. We also offer NH SEO services if you want to show up in search engines for certain keywords and phrases.
