All about CSS3 for Absolute Beginners: Part 1
Finally the time has come to go beyond basic structure and make something beautiful! In the past 8 blogs, we have covered the fundamentals of HTML that were needed to move to CSS. Let's address common concerns beginners often have when starting to learn something new.
Is CSS harder than HTML?
Nothing is hard; I believe it depends on how it is taught and your determination to excel. CSS might become a little more complex than HTML at some point; however, with proper guidance, practice, and effort, those concepts can easily come to your fingertips, and you can use them to create something amazing.
How far can I go with only HTML and CSS?
Very far! You can build highly graphical website designs and many kinds of modern visual effects. However, you will need JavaScript when it comes to functionality.
How much time will it take to learn CSS?
There is no set amount of time in which you can learn all CSS. Computer technologies are constantly updating, so you will always be learning new trends. There is a time when you are confident enough and can build a given design smoothly; that's when you have become a great CSS developer.
For that to come, learn and practice patiently. With consistent effort, it might take about 2 or 3 months, but it entirely depends on you.
Let's start our journey!
What is CSS?
CSS stands for cascading stylesheet. In CSS, we can apply multiple styles to a single element. So the browser has to decide which one to apply in that specific case. That's why it is called a cascading stylesheet. If it doesn't make sense to you, then leave it because once you have a basic knowledge of writing styles, it will be a lot easier to grasp this concept.
When talking about the example of a building, the HTML does the work of the structure. After the structure, there are paints, different tiles, decorations, and more. Those you can relate to CSS. However, there are also elevators, lights, alarms, and other related stuff, which is an example for JavaScript.
The 3 in CSS3 is the latest version of CSS at the time of writing this blog.
Creating your first CSS file
We used to create HTML files with an extension of .html. For example, index.html. To create a CSS file, we will use ".CSS", like this:
Style.css
Upon creating a CSS file, VS Code will recognize it as a CSS file and give it a different logo.
Writing your first CSS
To write your first CSS, first create a fresh HTML file, let's say "index.html". In this index file, write the boilerplate code and in the body tag, write a simple h1 tag.
Now after this setup, go into "style.css" and type the following code:
h1 {
color: red;
}
This will change the color of the h1 to red. To make this work properly, we need to make a connection between both the HTML and the CSS files. For that, we have a link tag in HTML. It looks like this:
<link rel="stylesheet" href="style.css">
The rel means "related to"; in this case, this link is related to a stylesheet. In the href, we would give the path to the file we want to connect. This path works exactly like the image tag's href attribute. If the file is located inside or outside a folder, then we will use the "/". The final HTML code should look like this:
Content written in the h1 should be in red color now.
Universal Selector, Classes, and ID
With the previous setup in mind, write two more h1 tags with some random content and see that those will also be in red color.
We changed the color of the h1 tag by using a universal selector. A universal selector would apply the styles to all the tags of the same type. For example, this setup would apply the red color to all the h1 tags in the HTML file.
We wouldn't want that in the long run, because we will apply different styles for each element. So we can use classes and IDs.
Universal selectors are useful when you want to set a specific font for all the text on your webpage, a default margin or padding, or basically something that goes for all the elements.
Classes
When you want to give a specific style to a group of elements, then you would go for creating a class. Let's say you want 3 anchor tags to appear in color green and the other 2 in blue; then you would write 2 classes. Here is an example:
<div class="green-anchors">
<a href="apple.com"></a>
<a href="google.com"></a>
<a href="amazon.com"></a>
</div>
<div class="blue-anchors">
<a href="dell.com"></a>
<a href="ebay.com"></a>
</div>
You can see I have created two divs in this case and applied the two classes to each of them. We use the "." to target a class.
IDs
An ID is used to style a single element. IDs are unique and cannot be used for other elements. For example, in real life, everyone's ID is unique on the ID card.
Creating an ID is similar to a class; just write id instead of class and target it with a "#" instead of a ".".
Naming Conventions
Notice that I used a hyphen to write two words, "green" and "anchor". This is called the kebab-case naming convention; sounds yummy! Kebab-case is most popular in writing CSS. You may come across different naming conventions, so having an idea about them is good. Here are the popular naming conventions:
Kebab case: green-anchor
Camel case: greenAnchor
Snake case: green_anchor