Introduction
HTML and CSS are popularly known as the building blocks of the web. They are the two most popular technologies used for creating websites. In this article, we will discuss the fundamentals of HTML and CSS, explain why they are useful and provide some learning resources that can help you get started especially if you are self-learning.
Prerequisites
You may need to have a fair idea of the web, internet, and browsers and what they do. If you don't, that's okay, I will introduce them briefly and link resources to further reading.
The Web, Internet, and Browsers
These three can be confusing to differentiate, so I am going to use an analogy that can help you remember their difference all the time.
The Internet
The internet is a global network that connects electronic devices (computers, mobile phones, etc.). Imagine it as a network of roads in your town, that connects buildings within the town together, but on a global scale.
The Web
The web, also known as the World Wide Web (www), is a collection of all websites that can be accessed through the internet. Going back to our town analogy, we can imagine the web as a collection of all the buildings (the websites) connected by the road network (the internet).
Browsers
Browsers are also called web browsers and they are the medium through which we can find websites on the web. In our analogy, the browser can be viewed as a car that allows you to key in your destination in the town and takes you to it.
For further reading, check out this internet basics tutorial and this article explaining the internet.
Now let's take a look at what HTML and CSS are.
What is HTML?
Hyper Text Markup Language (HTML) is mostly referred to as the language of the web. It is the technology that is used to structure the contents of a webpage (a collection of webpages makes a website). HTML consists of elements that tell the browser how to display content. An element consists mainly of tags, attributes, and content.
The content of an HTML element is wrapped around by an opening and a closing tag. Some elements, however, are self-closing and this means they are wrapped around by an opening or a closing tag only.
The below code is an example of an HTML document. This can be written in any text editor of your choosing. I use Visual Studio Code.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<img src="cat_img.png" alt="a grey cat wearing sunglasses">
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Let's take a look at the contents of the document and explain what is happening :)
h1 and p are element names. They are wrapped around by angle brackets to form a tag. <h1> and <p> are opening tags and </h1> and </p> are closing tags. Do you notice the forward slash ( / ) before the element name in the closing tags? This is what differentiates closing tags from opening tags.
This is a heading is the content of the element and the whole statement <h1>This is a heading</h1> is an HTML element.
<img src="cat_img.png" alt="a grey cat wearing sunglasses"> is an example of a self-closing element that has two attributes and can be written like this also <img src="cat_img.png" alt="a grey cat wearing sunglasses"/> with a forward slash.
HTML attributes add more information to or modify the element. The src attribute tells the browser where to locate the image file and the alt attribute describes the image.
What is CSS?
Cascading Style Sheet (CSS) is a design-based language that is used to style HTML elements. Consider HTML being the elements used in constructing a building — roofing sheets, cement blocks, window frames, etc. CSS will include where windows should be placed and what color should be used for painting. CSS adds sizes, font styles, positioning, and colors to HTML elements.
Just like HTML has elements, CSS has rules. A CSS rule consists of a selector and a declaration. Within the declaration is a property-value pair that indicates the features to be added to the HTML element.
Below is an example of a CSS document that can also be written in a text editor.
body {margin: 0;}
img {
width: 200px;
border-radius: 50px;
}
From the code above body and img are the selectors. These refer to the HTML elements being targeted. The statements within the curly brackets are the declarations and they come in a property-value pair. For example, margin is the property and 0 is the value. body {margin: 0;} is the declaration. It can be written in a single line or span multiple lines. For readability and simplicity, write your CSS rules on multiple lines.
Are HTML and CSS Useful?
Hell yeah!
HTML and CSS are the very basics of web development and if you want to be a developer who creates websites, you cannot avoid them. Even if you create websites using Content Management Systems like WordPress, you will need to understand HTML and CSS to customize some components of your websites.
HTML and CSS are not very hard to learn. CSS can however get tricky when it comes to positioning elements and creating layouts (especially for me 😭). But nothing is impossible. If you keep practicing, you will get better at it.
Resources To Help You Get Started
Here are some curated resources to help you set the ball rolling :)
Reading Tutorials
Video Tutorials
Cheatsheets
Conclusion
This article gave a very basic introduction to the internet, the web, browsers, HTML, and CSS and provided resources to help you get started with learning them.
The internet is a global network that connects various electronic devices, the web is a collection of websites that can be accessed through the internet and a browser is what helps you find websites.
HTML and CSS are the building blocks of websites and they are unavoidable if you want to start a web development career.
Thank you for reading!