Today’s topic is why and how you should learn CSS. In the first article of the Technobabble series we spoke about just how important HTML is in our day to day lives due to the great amount of web pages that are created with it. So what then, is CSS? And why is it always related to HTML? The answer is easy. HTML is powerful, robust … and ugly. Yep, ugly. Nobody at this point can say that they’ve seen a web page that simply uses HTML. As we said in the previous article, HTML represents the structure of a house, and who would buy a house that only consists of a bare frame? No one. This is where CSS comes to the rescue! Otherwise known as: “Cascade Style Sheet”.
In its most basic definition, CSS is in charge of styling HTML elements. If we return to the example of the house, a window would be the HTML element, and its curtains, frames and colours would be its CSS.
Let’s start playing with CSS.
In CSS you have to have two very different parts.
- The selector: It will be in charge of knowing which element the style rules will be applied to.
- The declaration: All the properties that we want to apply to that element.
Making any sense? Everything is better understood with an image:
Once this is clear, let’s go for the material. To give style to our example we must use the article selector and assign it a property. There are thousands of properties in CSS, but don’t worry, you don’t have to learn them all. We’re going to try to change the colour of the text and the colour of the background, as well as giving a rounded edge to our element.
But wait a moment. Where am I supposed to insert this code, there are several options?
- Inline: The CSS code can be embedded in the same HTML tag. NOT RECOMMENDABLE
- In a style tag in the HTML file itself. NOT RECOMMENDABLE
- In a separate file with the .css extension. RECOMMENDABLE
The third case is the most used at a professional level since we always need to update the style of our website, we simply need to modify that file and not the HTML. Making sure that we have everything looking just right. But for this to work, you have to tell the HTML where this file is located. We’re going to ask the HTML link element for help.
Inside the head tag of our HTML we will put the following:
<head>
<link rel="stylesheet" href="filename.css">
</head>
The rel attribute refers to what type of file it is and the href attribute to where it is hosted. If we do it well, save the changes and refresh the preview of our website.