Exploring the World of Web Development Part 2 - Styling your page using CSS

Web email HTML and CSS template

In the last chapter you are creating a perfect beautiful layout for your first web page using HTML and CSS. I hope that you really learn a lot about how HTML works, you start to begin recognizing the structure of HTML and remember some basic HTML tags. This chapter is talking about CSS, you will learn step by step creating a CSS style and understand some of the CSS properties and attributes.

Here's a step-by-step guide to creating a `style.css` file for your project:

To begin with styling any HTML page, you can create a separated file with file extension dot CSS. Create a new file called `style.css` in your project directory. And then place it in the same directory as your HTML files, then in your HTML file, you call the CSS using <link> tag inside the <head>. So for sort your calling your CSS like this:

Open the `style.css` file in a text editor or an integrated development environment, in the previous article I recommended you to use VS Code.

In any code you must understand how to add a little documentation for your codes. You can add a comment to describe the purpose of the CSS file and any sections you plan to include. For example:

Define the global styles that apply to the entire document. For example, you might set the font family, font size, and background color for the entire application:

Move on to styling the navbar. You can target the `navbar` class and apply specific styles to it. For example:

Continue by styling the sidebar. Target the relevant classes or elements within the sidebar and apply styles to them. For example:

Move on to styling the inbox list. Target the relevant classes or elements within the list and apply styles accordingly. For example:

Manually open your HTML file on the browser and verify that the styles defined in `style.css` are applied to your HTML elements by reloading your webpage. You can reload your browser by pressing F5.

So, congratulations on creating your first `style.css` file! It is quite an achievement. You can continue to modify and add styles as needed to achieve the desired appearance of your application.

So here I created another full HTML and CSS code for you to learn about HTML and CSS. It is a simple layout of an email platform like Gmail using only HTML, CSS and Javascript to render the list item in the inbox section. I hope that you are really looking into the code and learning each part of the CSS code to make it layouting the page and create a wonderful theme to the webpage.


Comments

Popular posts from this blog

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

How To Create Spring Boot Project Using Netbeans

Which Better WinZip vs WinRAR? Windows Zip and Unzip Tools

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

How To Connect SSH Using PEM Certificate On Windows