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 position, font-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.
Selectors
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.
.classname{
color: blue;
text-align: justify;
}
#id{
color: blue;
text-align: justify;
}Properties and Values
| Properties | Type of Values | Example |
| color | Color Names, RGB values, HEX values | black, rgb(125, 128, 131), #7D8083 |
| border | pixel value followed by the colour | 1px solid black |
| border-radius | px or % | {border-radius: 2px;} |
| margin, margin-top, margin-left, margin-right, margin-bottom | px or % | {margin-top: 2px; margin-bottom: 2%;} |
| background-color | Color Names, RGB values, HEX values | black, rgb(125, 128, 131), #7D8083 |
| background-image | Url | {background-image: url(‘profile.jpg’);} |
| padding, padding-top, padding-right, padding-bottom, padding-left | px or % | {padding-top: 2px; padding-bottom: 2%;} |
| height/width | auto, 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>
<html>
<head>
<title>Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="nav">
<ul>
<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>
</ul>
</div>
</body>
</html>Result:
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.
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.
Published: | Last Updated: | Views: 1