Screenshot (103)

Transforming basic HTML into an interactive Web page using CSS

Home > Creations > Transforming basic HTML into an interactive Web page using CSS

Raj KumarLast Seen: Oct 17, 2023 @ 6:35pm 18OctUTC
Raj Kumar

Table of Contents

Cascading Style Sheets, in short CSS, serves as a vital enchantment for designing layouts and transforming static web pages into interactive masterpieces. But for me, grasping and becoming proficient in CSS felt like setting off on a grand adventure.

Today, we will dig deep into CSS and see how it helps us make web pages look great with some practical examples. Let’s begin our quest for mastering CSS by introducing its syntax and critical components.

Understanding CSS Syntax

CSS allows us to select HTML elements as the selector and design them as per our desire.

selector {
  property: value;

For instance, consider the following example:

p {
  color: blue;
  text-align: justify;

Here, we are using the “p” tag as our selector, specifying that we want to style all paragraphs, and setting their colour to blue while aligning the text to justify.

Imagine you’re a composer; the HTML elements are your musical notes, and CSS is your baton. Each CSS property, from background-color to positionfont-weight to font-style, is a note on your musical score. You set the tempo (animation speed), volume (text size), and tone (colour scheme) to craft a digital masterpiece.

Before we move into real-world examples of CSS, let’s take a closer look at selectors, properties, and values.


In CSS, HTML elements, classname and idattributes from HTML code can be considered as selectors. To select classname and idattributes as selectors we have to add . (dot) before the classname and # (hash-symbol) before idattributes respectively.

  color: blue;
  text-align: justify;
  color: blue;
  text-align: justify;

Properties and Values

PropertiesType of ValuesExample
colorColor Names, RGB values, HEX valuesblack, rgb(125, 128, 131), #7D8083
borderpixel value followed by the colour1px solid black
border-radiuspx or %{border-radius: 2px;}
margin, margin-top, margin-left, margin-right, margin-bottompx or %{margin-top: 2px; margin-bottom: 2%;}
background-colorColor Names, RGB values, HEX valuesblack, rgb(125, 128, 131), #7D8083
background-imageUrl{background-image: url(‘profile.jpg’);}
padding, padding-top, padding-right, padding-bottom, padding-leftpx or %{padding-top: 2px; padding-bottom: 2%;}
height/widthauto, px, or %{height: 20px; width: 10%;}

These properties and values are the key factors in transforming the HTML elements or sections into user-interactive pieces.

Now let’s move towards the example.

Crafting a Navigation Bar

A navigation bar, referred to as a navbar, is a fundamental component of a website’s user interface. It serves as a menu and guides the audience across various pages or main sections of a website.

Here’s how you can create a simple navigation bar using HTML and CSS:

Firstly we need the HTML structure of the navbar. First, create a separate HTML and CSS file named “styles.css”.

Now add the HTML part in the HTML file:

<!DOCTYPE html>
    <title>Navigation Bar</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <div class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>


Screenshot (99)

Now, let’s add the CSS to style our navigation bar.

/* Style the navigation bar */
.nav {
  background-color: #333;
  overflow: hidden;

/* Style the navigation bar list items */
.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

.nav li {
  float: left;

/* Style the navigation bar links */
.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

/* Change the link color on hover */
.nav li a:hover {
  background-color: #ddd;
  color: black;

Finally, you’ve crafted a simple, yet effective navigation bar that will guide your website’s audience through your digital composition.

Screenshot (100)

As we conclude this instalment in our full stack development series, remember that each article is a stepping stone in your journey toward mastery. If you missed the previous chapter, you can catch up here and stay excited for what lies ahead in the next episode. The adventure continues, and your path to becoming a full-stack developer is illuminated by knowledge and passion.

Click here to view my previous article.

Raj KumarLast Seen: Oct 17, 2023 @ 6:35pm 18OctUTC

Raj Kumar


Published: | Last Updated: | Views: 1


You may also like

Leave a Reply