HTML Styles Tutorial for Beginners - Web Development Course

Welcome to this tutorial on HTML styles! In this guide, you will learn how to create a simple HTML file, add styles to your text, and view the results in your web browser using a web hosting file manager. Let’s get started!

Step 1: Log into Your Web Hosting Control Panel

Open your web browser and go to your web hosting control panel login page (e.g., cPanel, Plesk, etc.).
Enter your username and password to log in.

Step 2: Open the File Manager

Once logged in, look for the File Manager option in your control panel dashboard.
Click on File Manager to open it.

Step 3: Navigate to the Public Directory

In the File Manager, navigate to the public_html directory or the appropriate directory where you want to create your HTML file.
This directory is typically where you place files that you want to be accessible via your web domain.

Step 4: Create a New File

In the public_html directory, click on the + File or New File button.
Name the new file styles.html and click Create New File.

Step 5: Edit the HTML File

Locate the styles.html file you just created in the file list.
Right-click on styles.html and select Edit or use the Edit button/menu option to open the file in the text editor provided by the file manager.

Step 6: Add HTML Styles Code

Copy and paste the following HTML code into the text editor:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Styles Tutorial</title>
    <style>
        .example1 {color: red;}
        .example2 {font-size: 20px;}
        .example3 {font-family: Arial, sans-serif;}
        .example4 {text-align: center;}
        .example5 {font-style: italic;}
    </style>
</head>
<body>

<h1>HTML Styles Examples</h1>

<p class="example1">This text is red.</p>
<p class="example2">This text is 20 pixels in size.</p>
<p class="example3">This text is in Arial font.</p>
<p class="example4">This text is centered.</p>
<p class="example5">This text is italic.</p>

</body>
</html>

This code includes various HTML style attributes applied using CSS classes:

.example1 sets the text color to red.
.example2 sets the font size to 20 pixels.
.example3 sets the font family to Arial.
.example4 centers the text.
.example5 sets the text to italic.

Step 7: Save the File

After pasting the code, click Save or use the save option in the text editor.
Close the text editor once the file is saved.

Step 8: View the File in a Web Browser

Open your preferred web browser (e.g., Chrome, Firefox, Edge, Safari).
Type your domain name in the address bar followed by /styles.html (e.g., http://yourdomain.com/styles.html).
You should now see a webpage displaying the styled text as specified in your HTML code.

Congratulations! You’ve successfully created an HTML file, added styles, and viewed it in your web browser using your web hosting file manager. Experiment with the HTML and CSS styles to see how they change the appearance of your text. Happy coding!