How HTML and CSS Work Together


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 have not 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 evaluate 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 own 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 would not 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.

Do not 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 is not working, trust me it's you making the mistake. If you forget a "/" or a ">" to close a tag your code will not work.


Leave a Reply