What is HTML and CSS?

For many of us who aren’t in the know, or those who are new to website development or design, we will view and use a website, whilst being oblivious as to how it is made. However, behind the surface, there are two elements that are most commonly used when creating a website – HTML and CSS. These affect how a web page is structured and how it looks to the user, and provides users with a website which is visually appealing and easy to use.

In order to understand how each interlinks with one another, we’ve explained all you need to know about the basics of HTML and CSS and their role in website creation.

What is HTML?

HTML, or Hypertext Markup Language to give it its full name, provides structure to a page. Most commonly, these pages are linked up to form a website as we know it today. To break down HTML, hypertext stands for the way that a user moves around the web, clicking hyperlinks to go from page to page. While markup is how each ‘tag’, as it’s widely referred to, should be displayed on the web page. This structure is how a website, newsletter or other online page is put together.

The first version of HTML was built in 1989, and up until 1995 there were no version numbers associated with the process. The Internet Engineering Task Force first introduced numbering HTML in 1995, with the Worldwide Web Consortium following suit in 1997. Since then, new versions of HTML are continually being worked on, with the latest approved version being HTML 5.2. There is also another version called XHTML, which is similar in language to HTML but also includes XML, allowing users to use some of the latter’s associated tools with it.

HTML introduced a standardised way for documents to be read by computers, as prior to this, plain documents were the most common format. However, this limited documents as to the media and styles that they could contain, as it also failed to have semantic structure, it was unable to identify other key areas of the document.

Adding HTML tags to a current plain text document allows you to turn it into a file which can be created and ordered to create a web page. In fact, a HTML document requires no more than a text editor to be created, however, you need to ensure that the files saves as a ‘.html’ rather than ‘.txt’.

HTML tags need to be written in pairs, as for the page to be structured correctly, a beginning and end tag needs to be present. The first tag tells the document how the following text or media should be displayed, while the closing tag instructs the document that this needs to no longer be shown in this way. For example, a <b> means that the following text should be bold, and </b> signals the end of bold text. And then more complex tags such as <picture> allow a developer to include further attributes which tell a browser how to display an image, such as size and type of the file.

Once a HTML document has been created so that it includes how a web page should be structured – including headlines, content, links, image holders etc, it effectively ‘talks’ to the browser software that you are using to translate HTML in readable content for the user.

What is CSS?

Cascading Style Sheets, or CSS for short, is closely linked to HTML and defines how a website should look visually. It was first developed in 1997, as prior to this, developers were unable to separate the structure of a website from how this was displayed to the user. This enabled HTML to focus on creating a guide on how a document and website should be structured, while CSS determined the look of it.

To further understand CSS, style sheet is the name given to the document which contains technical details as to how a page should be built, as well as how this page should be seen when displayed to the user. Cascade is more complex, but refers to how a style sheet flows from one to another – as every sheet is often affected by another, regardless of whether a style has been set. For example, hyperlinks in documents are often underlined and blue in colour, however, this can be changed through the CSS file. The majority of browsers have a style that they default to unless they are told to display it differently otherwise.

Both properties and values are key to CSS. Properties allows a designer to identify which features need to be changed on a webpage, e.g. font. While, value is what this should be changed to, e.g. Times New Roman to Calibri.

CSS is one of the most versatile elements that a website has, as it allows a designer to change the look of a website, rather than the markup to make a change as to how it is displayed.

There are three commonly used ways to add CSS to a HTML document: external stylesheet, internal stylesheet and inline styles.

An external stylesheet includes CSS in a separate file to HTML, and refers to HTML through a <link>. This allows greater flexibility when editing multiple HTML documents, as the CSS can be updated in one master file.

Internal style sheets are where the CSS is included inside a <style> tag, underneath HTML. If changes need to be replicated across a whole site, then each page would need to be edited and updated individually.

If you only want to change one tag within an overall style attribute, then you can use inline styles. However, it can become complex as CSS and HTML information become consumed. Therefore, using either an internal or external sheet is recommended.

Both HTML and CSS are integral to online page creation and design, and have helped to standardise the languages used when building a web page or newsletter, for example, and finalising its look. While these elements can be self-taught, undertaking a training course from a professional can improve your understanding and allow you to gain experience on how to use HTML or CSS individually, or together.

For more information about courses for HTML and CSS visit the HTML/CSS training page