This tutorial guides beginners through the process of creating a basic website using HTML5 and CSS3. It covers folder structure, HTML document setup, CSS styling, and the use of classes for styling specific elements. Readers will learn how to manipulate text, colours, and layout effectively, providing a solid foundation for web development.
Welcome to this comprehensive tutorial on building a basic website using HTML5 and CSS3. In this part of the tutorial, we will focus on creating a simple website about the Sun, utilising CSS to manipulate the content and layout effectively.
Setting Up Your Project
Creating the Project Folder
To start, we need to create a project folder. Open your directory and create a new folder named Sun. Inside this folder, create two subfolders: images and CSS. This organisation will help keep your project structured.
Gathering Content
Next, we will gather content for our website. A good source for information about the Sun is Wikipedia. You can find images and introductory text that we will use to build our web page.
Creating HTML and CSS Files
Setting Up the HTML File
Open Notepad++ (or your preferred text editor) and create a new blank document. Save this document as index.html in the Sun folder. This file will serve as the main page of our website.
Creating the CSS File
Now, create another new document and save it as style.css in the CSS folder. This file will contain all the styles for our website.
Writing the HTML Structure
Basic HTML Structure
In your index.html file, start by declaring the document type and creating the basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Information About the Sun</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
</body>
</html>
Adding Content
Inside the <body> tag, we will add an <h1> tag for the main title and a <p> tag for the introductory text. For example:
<h1>Information About the Sun</h1>
<p>The Sun is the star at the center of the Solar System...</p>
Styling with CSS
Targeting HTML Elements
Now, let’s open the style.css file to add some styles. We will start by styling the <h1> tag:
h1 {
color: red;
font-size: 250%;
}
Adding Paragraph Styles
Next, we can style the <p> tag:
p {
font-size: 125%;
color: blue;
}
Using Color Picker for Specific Colors
To choose specific colors, you can use a color picker tool. For example, if you want a specific shade of orange, you can find the hex code and use it in your CSS:
h1 {
color: #FFA500; /* Orange */
}
Aligning Text
You can also align text using CSS. For example, to center the <h1> tag:
h1 {
text-align: center;
}
Using Classes for Specific Styles
Creating Classes
To apply different styles to specific elements, we can use classes. For instance, if we want to style the first paragraph differently, we can add a class:
<p class="intro-text">The Sun is the star at the center of the Solar System...</p>
Defining Class Styles
In the style.css, we can define styles for this class:
.intro-text {
color: green;
font-size: 150%;
}
Using the Span Tag for Inline Styles
If you want to style a specific part of a paragraph, you can use the <span> tag. For example:
<p>The Sun is the star at the center of the Solar System, and it is <span class="highlight">essential for life</span>.</p>
Defining Span Styles
In your CSS, you can define the styles for the .highlight class:
.highlight {
color: orange;
font-weight: bold;
}
Conclusion
In this tutorial, we have covered the basics of creating a simple website using HTML5 and CSS3. We learned how to set up our project structure, write HTML, and apply CSS styles effectively. In the next tutorial, we will explore more advanced CSS techniques and how to manipulate images and tables.
Remember, practice is key to mastering web development. Experiment with your styles and continue learning about CSS to enhance your web pages further.
