Introduction:

In this document I will be describing how the HTML and CSS languages work together to produce webpages. I will describe both of their purposes in the development of websites and also compare them and explain how they work together in the development of websites.

HTML:

HTML stands for Hyper-Text Mark-up Language, just by the name alone you can tell that HTML was meant to be used to display and manipulate text. HTML is the skeleton of a webpage in the sense that you’ll need the basics of HTML code to apply any form of CSS formatting. HTML is used to layout content. It deploys tags and properties to lay out the foundation of a webpage. If you were to look at a human and look at the skeleton bone structure you could think of the skeleton as the HTML code, like how we need our skeleton for us to stand, HTML is needed for a webpage to work.

It’s also used for creating ordered and unordered lists; an unordered list is a bullet-point based list while the ordered list is an ordered numbered list. Additionally you can use HTML to make headings of varying sizes. It can even create tables that can be filled with tabular information. HTML is not used for any kind of formatting this is where Cascading Style Sheets (CSS) come into play.

CSS:

CSS is used to format and customize the look of the webpage, it can do things like change the colour, font size, font type and the back ground colour of a web page. In a sense it’s the second layer of a webpage, and is usually the one that will set up the design of webpage. CSS can edit the layout of a webpage and controls the aspects of it as well, for example the “margin” property can be used to set up the margins of a webpage, you can then edit each value of a webpage. As an example here is a HTML page without any CSS applied:

With CSS:

As you can see CSS makes a big difference in terms of laying out and formatting a webpage, as it enables you to describe the different aspects of the page and what happens to it. Several things are applied here, the followings properties were used:
“color”, “background-color”, “margin”, “border”, “font-size” and “font-family”.

However CSS is not meant to be used in laying out content or text, it is meant to only format the text that is already implemented by HTML, which brings me to the next point.

Comparison and Contrast:

When comparing HTML and CSS you must keep in mind they were meant to be used together and they aren’t better than one another. HTML allows a foundation to be created that is used for the basis of the webpage, CSS then formats it, and makes it appealing to the eye. If we were thinking of someone building a house, they would first build the framework of the building (HTML), and then apply a design to it (CSS).

CSS can be applied to multiple tags in HTML; a style sheet looks something like this:

You first type in the tag the CSS will be applied to and then a list of CSS tags. For example “body” is a HTML tag, and everything surrounded in curly brackets are the properties that will be applied when the HTML tag “body” is used inside of a webpage. The example above this one showed what one page looked like without CSS, this is the same code that was used to design that page.

CSS can also be used to be applied to different parts of a webpage, in the above example it was applied to the tag “body” which means the following CSS will apply to all of the webpage’s text. However you can also apply CSS to specific HTML tags like “p” which is the tag used to create a paragraph, or even apply CSS to a table, to give it a unique look. CSS can also be used for the layout of a webpage, so things like creating margins and columns is possible here. Once you’re done setting up a CSS style sheet like the one above, once you create a webpage that is linked to the sheet via HTML it will have all the properties you have listed.