Your First CSS Website

In this tutorial, you will create your very first styled web using HTML and CSS.

We’ll guide you though each part of the process – from setting up hour tools to writing your first CSS code.

Part 1: Setting Up the Environment

Before you start coding, you need the right tools. We’ll use visual code (VS Code), a free and popular editor.

Installing Visual Studio Code

Open your web browser and go to Google.
Search for Visual Studio Code download.
Click the official link and download the version for your operating system.
Follow the instructions to install it on your computer.

Installing the Live Server Extension

Live Server is a helpful extension automatically reloads web page time you change.

Steps to install:

Open Visual studio code.
Click on the Extensions icon in the left sidebar, or press Ctrl + Shift + X
Search for Live Server.
Click Install by Ritwick dey.

After installation, you can HTML file and select “open with Live Server” in the browser.

Part 2: Creating HTML Page

Now that your ready, you can start building your webpage using HTML.

Step 1: Create a New File

In Visual studio code, click File > New File.
Save the file as index.html in a folder.

Step 2: Add Basic HTML Code

In the index.html file, type ! and Enter. This shortcut generates a basic HTML template.

Update the code to include a title and some content in the body:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First CSS Website</title>
</head>
<body>
  I'm learning CSS and building my first styled webpage!
</body>
</html>

Part 3: Adding CSS to Your HTML Page

To style webpage, you’ll write CSS inside the <style> tag in the <head> section.

Here is the updated HTML code with CSS.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First CSS Website</title>
  <style>
    body {
      text-align: center;
      color: white;
      background-color: purple;
      font-family: Arial, sans-serif;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  I'm learning CSS and building my first styled webpage!
</body>
</html>

Explanation of the CSS Code

text-align: center; centers the text horizontally on the page.
color: white; changes the text color to white.
background-color: purple; sets the background color of the page to purple.
font- family: Arial, sans-serif; applies a clean, readable font to the text.
margin-top: 100px; adds space between the top of page and the text.

Summary

You’ve now created your first web page styled with CSS. You’re learned how to:

Set up VS Code and live server.
Write a basic HTML document.
Add CSS to style the page.