If you manage a website or spend time adding content to a site you’ve no doubt come across the term HTML. Less likely it is that you’ve heard of CSS but you’ve probably dabbled in it without even knowing. HTML and CSS are types of code and pretty much every website you see today uses them, in fact, you’d be hard pushed to come across a website that doesn’t use them. These two codes are the basic building blocks of any site, pretty much every developer knows how to use them and so do most designers. When you set about learning to build websites it’s where your journey begins and it’s a long and winding road with surprises around every corner.
What is HTML and what does it do?
Hypertext Markup Language (HTML) represents the basic building blocks of a web page. It is a set of layout instructions that tell a webpage how it should be displayed. Think of a newspaper for example and its blocks of content. Large headers followed by small paragraphs next to images laid out in rows and columns. In fact, the term ‘Markup Language’ comes from the production of newspapers when sections carried identifying marks (being ‘marked up’) before going to print. HTML offers a way for a web browser to recognise the formatting of certain elements and how the data is structured and divided on the page.
Let’s take a basic piece of HTML as an example and see how that would look in a web browser.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>How are you?</p>
</body>
</html>
The markup is identified through tags such as <p> </p> which means Paragraph. The text wrapped inside <p>is to be recognised as a paragraph by the web browser</p>. Or we might use the header tag, in this case <h1></h1> which tells the browser this is our Header 1 or our primary heading.
In a browser it will look something like this:
Go ahead, try it. Copy the code above and open a program on your computer called Notepad (PC), or TextEdit (Mac) and paste the code in. Call the file index.html and save it to your desktop. Right click on the file and select to open it in a web browser, you should get the above result.
You can clearly see the browser can identify which is the main heading and the paragraph of text. Try adding another paragraph or a <h2> perhaps and see what happens.
Now, this is a very basic example but the elements of a webpage are there. There are a few tags I haven’t mentioned such as <html>, <head>, <title> and <body> and if you’d like to learn more about them you’ll find some information right here.
HTML has many many other tricks up its sleeve, the above is just to give you a brief introduction and explanation of what it is and how it is used. Even though it’s a simple example, there’s no reason it needs to look as dull as it does, so let’s spice it up a bit!
What is CSS and what does it do?
Cascading Style Sheets (CSS) is a coding language used to add ‘styles’ to markup (such as HTML). It can influence fonts, colours, container sizes and positions and is designed to help add a certain flow and separation of content to web pages for ease of use and clear presentation. Abused, you can end up with a garish and garbled mess of colours and fonts unreadable by most, but used properly you can turn your HTML into a clear, flexible and relevant design that users and their devices can easily engage with.
On the face of it CSS is an extremely simple language to grasp, but like HTML it’s full of thousands of variations, handy tricks and shortcuts that leave a lifetime of learning and developing for those venturing to use it. As web browsing devices have changed and developed over the years, CSS has done the same. Enabling websites to become responsive and organic creatures that will work just as well on a widescreen desktop and they do on small screen mobile devices. So, let’s take the HTML file we’ve already created and add a little style to it.
CSS can be added in a number of ways, but we’re going to keep it simple and keep all of our code in the same file. So let's say that we want to jazz up our heading a bit. Maybe we want it to be centralised on the page and have a nice background colour to help it stand out. Easy!!
Taking the HTML from earlier we’re going to add a little something extra to it. Firstly we’re going to add our <style></style> tags to the <head> section of our HTML. It’s inside these tags we’ll be adding our CSS. These tags basically tell of HTML document that everything that lives in between these tags is style information.
<html>
<head>
<title>Hello World</title>
<style>
</style>
</head>
<body>
<h1>Hello World</h1>
<p>How are you?</p>
</body>
</html>
So let’s write our first piece of CSS. I would like the Hello World heading to be central on our webpage. To do this I first need to target that element in our CSS and I can do this with the following piece of code:
h1{}
Simple as that. The h1 means that we are targeting our <h1> tag and all the cool stuff we’re going to do to your h1 element will go in between the { }. Let’s centralise it.
h1{text-align:center;}
OK, so we’ve added, text-align:center; between our {}. This simple piece of code contains two elements, ‘text-align and ‘centre’ or in plain speak .. align the text inside our h1 tag centrally. This could have been text-align:right; instead of centre for example. Text will align left by default.
So now we have the following. Give it a try.
<html>
<head>
<title>Hello World</title>
<style>
h1{text-align:center;}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>How are you?</p>
</body>
</html>
So let’s say we want to change the text and background colours of the heading, this is easily done now that we have our style set up.
Try adding color:white; and background:blue; after our text-align style. Save your file and refresh the browser and see what happens. Color (American spelling) and background refer to the colour of the text and the h1 background respectively.
h1{text-align:center;color:white;background:blue;
I think you get the picture. CSS is allowing us to manipulate our plain HTML and make it more visually stimulating.
This isn’t supposed to be an HTML/CSS tutorial and we haven’t exactly broken any boundaries with our code here but you should now begin to understand the difference between the two codes and how we use them. If it’s something you'd like to learn more about I’d strongly suggest taking a look at Code Academy as they have some great HTML and CSS courses to get you started.
Before we finish, why not try and centralise the <p> text and maybe increase the font size a little?
*Hint - font-size:20px
- Dave