CSS and HTML featured image

Setting Up CSS and HTML for Your Website: A Tutorial

Building websites is the initial step of getting started with web development. One of the first things web development enthusiasts must learn is how to set up CSS and HTML for a website. By setting up the basic introductory page, a beginner can get ready with the website design basics, hone their web development skills, and learn to collaborate with developers.

This tutorial will walk you through the basics of setting up HTML and CSS files for your website. Let’s Start!

Prerequisites

  • A basic understanding of HTML and CSS.

Step 1- Initial Set Up

Initially, we will create a new project directory and name it a demo-project :

Next, move to the current directory using the cd  command:

In the project folder, let’s add the following files that we will need to launch our basic website:

  • index.html : This file will have all the HTML codes.
  • styles.css : We will keep all the CSS files here for styling our website.
  • images : All the necessary images must be kept in this file.

Now that we have created our project directory and added the necessary files, let’s move forward and add the HTML content in our index.html  in the next step.

Step 2- Adding HTML Content in the index.html  File

In the index.html  file that we created in the previous step, we will add the introductory HTML codes. These basic HTML lines will serve as instructions for the browser, but will not be displayed on the webpage.

Add the following block of code in your index.html  file:

Note: Make sure the index.html  file is empty before you add these blocks of codes. Also, consider changing the title as highlighted in the <title>  section.

Let’s understand the terms used:

  • <!DOCTYPE html> : It is a declaration informing the browser of the type of HTML used in the HTML document.
    • As multiple versions of HTML standards are available, specifying the DOCTYPE  makes it easy for browsers to identify the HTML version effortlessly. For instance, in this guide, we are using the latest version of HTML5.
  • <html> : This tag informs the browser that the contents included inside it must be treated as HTML. When opening an <html>  file, make sure to close it using the </html>  tag. This tag supports lang  attributes, and you can specify the language of the webpage. We have set the language to English in our tutorial using the en  language tag.
  • <head> : This creates a section in the HTML document and contains information about the webpage. However, there is no content detail, and the browser does not display any information here in the head section.
  • <meta charset="utf-8"> : Specifies the document’s character set. It must be in a Unicode format, i.e., UTF-8, supporting most recognized written languages.
  • <title> : The <title>  tag informs the browser about the name of the webpage. The title appears on the browser tab when the website is listed in the search results.
  • <link rel="stylesheet" href="css/styles.css"> : Informs the browser to identify the stylesheet containing the CSS styles.
  • <body> : This tag contains the main contents of the webpage. When using a <body>  tag, make sure to close it using the </body>  tag.

Step 3- Styling Using CSS

In the styles.css  file, add styling as per your project needs. In this example, add the following lines of code in your styles.css  file:

We have finally created the basic HTML and CSS files we will need to launch our website. Additionally, you can add images and keep them in the images folder. Save and close the file. After that, open the index.html  file in your favourite web browser, and you will see a basic page on your screen.

Conclusion

In this introductory tutorial, we’ve learned the basics of setting up HTML and CSS and created a rudimentary website. Now is the time to create new pages, tune them up, add content, and link everything from the navigation bar. As a next step, try adding more content to the index.html  file and style it using CSS.

Furthermore, there are other HTML and CSS tutorials that you can find on our blog:

Happy Computing!