How to Create a Basic Website Using HTML and CSS
In this tutorial, you will learn how to create a simple website using HTML and CSS. This is a great starting point for anyone new to web development.
Step 1: Set Up Your Development Environment
Before you start coding, you need a text editor and a web browser. Some popular text editors include VS Code, Sublime Text, and Atom. You can use any web browser like Chrome, Firefox, or Edge.
Step 2: Create the HTML File
Open your text editor and create a new file. Save it as index.html. This will be the main file for your website.
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first website.</p>
</body>
</html>This code creates a basic HTML structure with a title and a welcome message.
Step 3: Create the CSS File
Next, create a new file in your text editor and save it as styles.css. This file will contain the styles for your website.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}This CSS code styles the body with a background color, font, and some padding. It also sets the color of the headings and paragraphs.
Step 4: Link the CSS to the HTML File
To apply the styles to your HTML file, you need to link the CSS file. Add the following line inside the <head> section of your index.html file:
<link rel="stylesheet" type="text/css" href="styles.css">This line tells the browser to use the styles from styles.css.
Step 5: View Your Website
Open the index.html file in your web browser to see your website. You should see the styled text on a background color.
Conclusion
Congratulations! You have created a basic website using HTML and CSS. From here, you can experiment with more HTML elements and CSS styles to enhance your website.