This is the third article in the series “Becoming a frontend engineer”. In the first article, I introduced what frontend engineering is all about, explained the three aspects of frontend engineering.The second article explained how to add texts to a webpage. In this article, I will show you how to style a webpage using CSS.
What is styling?
Styling is the art of adding features to an application to make it more appealing to the eye. As I mentioned in the first article, styling is added using CSS. If you don’t already know, CSS stands for Cascading Style Sheet, and it comes with properties and values used to add colors, sizes, spacing, fonts, margins, etc to a website.
Before we delve into it, create a folder named “Project” or whatever you find appealing and then add your style.css and index.html files into this folder. Now head over to your IDE (VScode in my case) and click on the “file” tab on the top panel. Then go ahead and click “Open Folder”, navigate to where your project folder is located and select it. To see what you have done, open the folder location, click on the “index.html” file, and it should open with your default browser.
How to create a CSS file
To create a CSS file, the filename should have an extension of .css. For example style.css, or file.css. In the previous article, I explained that programming languages are written in code editors, and I recommended VScode. So if you have been following, open your VScode and create a file called “style.css”.
Basics of writing CSS
In writing CSS, you would need to reference the particular tag that you want to add the style to, i.e the “tagname”,” class”, or id. Before going into detail about how to style a website with CSS, let’s learn about CSS class and IDs and how they are used.
A class is added to a tag when you want to give a tag or a group of tags with specific styling, different from other tags with the same tagname. For example, if you have five paragraph tags<p> in a file, and you want three of them to have the color blue, you would add a class to differentiate them from the rest. Here’s how it would look: <p class=”red”>. The class name can be anything you want to give it, but there are best practices you would get more familiar with as you go. You can give the same class name to as many tags as you would like, provided you want them to have the same styling.
An id is just like the class, but the major difference is that you can give an id name to just one tag. If you give two or more tags the same id name, it won’t show the styling given to them in the browser.
To give a particular class a style, you have to add a point to the front of the class name i.e “.red”. The point indicates to the browser that what is referenced is a class name. Similarly, to give an id a style, you have to add a pound sign to the front of the id name i.e “#red”. Let’s practicalize this by creating an HTML file with three “p” tags in it. Each of them can have anything you want inside them. To style them, give one of them a class name, the second one an id, and leave the third one without any. Here’s how your HTML file would look:
<p class=”red”> I am a man </p>
<p id=”green”> I am forty six years old</p>
<p> I support Chelsea football club </p>
In the CSS file, style the “p” tag with a class name of red, giving it a color of red. Then, style the “p” tag with an id of green, giving it a color of green. Finally, style the last “p” tag with the color blue. Here’s how it would look:
.red {
color: red
}
#red {
color: green
}
p {
color: blue
}
To see this in the browser, we would have to link our HTML file to our css file. To link the CSS file to the HTML file, add this line of code to the HTML file:
<link rel=”stylesheet” href=”./style.css”>
For context:
rel explains that the file you are referencing is a css file
href is used to get where the CSS is located inside your project folder.There is a shortcut to it for VScode. If you write link and press the tab key, the link tag should come out but you would have to specify the href address yourself.
Conclusion
There are a lot of CSS properties that are available, so it is impossible to know them all. One thing is sure, for whatever CSS trick you might want to perform, someone else has done it, and how to go about it is readily available on the internet. You just need to know where to look (just Google it!).
Additionally, there are what we call CSS libraries. These are prepped and ready-to-use stylesheet collections created to make styling easier. We have Tailwind, bootstrap, material design, etc. You can research them yourself.
I will talk about the last aspect of frontend engineering in my next article. Until then, have fun creating HTML and CSS files. Cheers!
Top comments (0)