TeamCSS (Cascading Style Sheets) is the code we use to style our website. With HTML we make the basic structure for our website while CSS adds colors, animations, buttons, etc. For instance, with HTML we can use the h1 tag to write “This is a website about cars“, and CSS to paint the text in red. If you haven’t used HTML before, learn more about the basic HTML tags.
HTML:
<h1> This is a website about cars </h1>
CSS:
h1 {
color: red;
}
We are going to use the previous example to explain the basic CSS rules. H1 is a selector. Simply put, we use selectors to select an HTML element we want to style. For example, h1 selects all headings h1, p selects all paragraphs, and so on.
A declarations consist of a property and property value. In the example above, we have one declaration (color: red;), where the color represents a property and red is a property value.
We have used this declaration to tell the browser to paint the text in red. Each declaration ends with a semicolon. Within the code block {} we can have multiple declarations.
Let’s edit our h1 element a little more. We are adding two new properties, font size, and background color. With these properties and their values, we are going to set the font size to 22 pixels and the background color to light green.
h1 {
color: blue;
font-size: 22px;
background-color: lightgreen;
}
How to add CSS to our website?
To start adding CSS styles to your website, you need to enable CSS. From this point of view, there are three types of CSS:
- Inline CSS
- CSS from the head section
- CSS from an external file
Inline CSS
Inline CSS is easy because all we need to do is to write CSS code within HTML code. While this may sound simple, at some point, it can become complicated.
If you need to make a simple website, writing CSS code along with HTML code might be a good solution. On the other hand, using this method on more complex websites would result in messy code.
So how do we add inline CSS? Firstly, we select the HTML element we want to edit. Secondly, we use the style attribute. Last but not least, we add property and its value to the attribute.
<h1 style=”color:blue”> Mujibo </h1>
As you can see, we have styled the h1 element using inline CSS. We added the style attribute along with the property color and its value blue. So, our h1 element is now blue.
CSS from the head section
We can add CSS codes between the style tags in the head section.
CSS from an external file
Finally, CSS from an external file is the best way to add CSS to your website because you separate CSS and HTML code. This way, your code is more clearer and your job much easier.
Put your CSS code in a separate file (filename.css). All CSS external files must have .css extension.
By using the link rel attribute we have linked our external CSS file and HTML file.
CSS Selectors
There are three types of CSS selectors:
- HTML selector
- ID selector
- Class selector
ID Selector
We have already used the h1 HTML selector in the first example of this article. Now, we can try to use other types of CSS selectors such as ID and CLASS.
<h1> Mujibo </h1>
How we are going to add an ID.
<h1 id=”mujibo1″> Mujibo </h1>
When we want to select this h1 element, we need to go to our CSS document and write the following CSS code:
#mujibo1{
color: red;
}
Instead of using the h1 HTML selector, we need to write #name-of-our-id. In this case, the custom name of our ID is mujibo1. The element is selected and painted in red.
CSS Selector
We are going to use the same example to show you how to use the CSS class.
.mujibo1{
color: red;
}
What is the difference between a class and an id?
In our previous examples, we see that the classes and id selectors are almost identical. The only difference only is in the name. For classes, we use the “.” and with id “#”.
However, the most important difference is: ID is unique. Only one element on the page can have the ID named #mujibo1. On the other hand, we can color multiple titles in blue by adding the same class to them.
