HTML and CSS: Explained Simply

HTML & CSS: Explained Simply

Got a website? You should know the basics

It’s everywhere

If you don’t know what these are, and you currently own a website - you’ll most likely find it significantly easier to manage and grow your site once you’ve learned the basics. If you’re already familiar with these languages, then you might also benefit from checking to make sure your understanding is correct.

HTML and CSS are essentially markup languages used to present information on the web, with each of them serving a unique and important purpose. HTML serves as the foundation - the structure - of a web page, while the CSS modifies the appearance - adding styles to the structure.

To demonstrate the differences and purposes of these languages, you can think of them as parts to a building.

A collage of developers and engineers. There’s a reason developers call most coding activities ‘building’, due to the structural similarities with construction.

Creating good blueprints

Every building has a foundation, with walls and supports throughout it. This is what Hypertext Markup Language (HTML) is to a website.

The different parts of a building have their own names, just like how the unique parts of a web page have their own names. These are specifically called ‘tags’ with HTML, and each tag serves a purpose on a web page.

If you’ve built or hired someone to build your website, you’ll want to be confident that they did it correctly. When a site isn’t built properly, there can be issues created throughout it that might make it unusable, unresponsive, and frustrating.

A collage of developers and engineers. Building a site the ‘right’ way takes time, critical thinking, and planning - just like building a house.

Adjusting the appearance

The Cascading Style Sheets (CSS) is responsible for styling the structure of your website, into something that aligns with a creative vision, branding requirements, or any other visual style.

When building a house, the appearance is something considered at the start of the project, but really only comes into focus towards the end of construction. It is the same for creating and applying styling to a website, which involves adjusting the appearance of the web page after it’s built.

A frustrated man looking at his laptop. When your site isn’t built right, you’re going to get really frustrated - really quickly.

A solution to an old issue

The importance of CSS comes from the need to style web pages, without filling up the page with additional coded information. Additionally, CSS helps with the DRY (Don't Repeat Yourself) principle, by allowing you to create global styles throughout a website. This is why most CSS styling across the web is done through creating a separate document to the page, and linking that page to the styling in the CSS document.

This distinction is important to understand, because it can help you find issues with the appearance of your website quickly if your styling is well organized. Text looks odd? Check the CSS. Colours are off? Check the CSS.

You’ll know your website is styled properly, if there are few visual issues, and if there are - they’re easy to find and fix.

A variety of paint samples. Adjusting the CSS on a website is a lot like picking the colours in a room.

Where we’re headed

Modern websites require modern solutions to structural and design challenges. This is why there’s been a large push over the years for new programming languages, which allow for more complex page designs and experiences.

Essentially, the most basic structural and appearance-related parts of a website come from HTML and CSS, and the complex features that go alongside these are usually done through another programming language.

Not every website is coded the same, which is why knowing the basics will always help you when trying to learn how your site was built, designed, and styled.

Want to learn more about how your site functions? Chat with us today.


A happy man working on his laptop.