Many of my readers have asked me to write a series on CSS learning. So here is my attempt to help them. In this series I will focus on the basics of CSS and how one can start learning CSS.
In this article we will learn:
- Adding Style to document
- CSS Selectors
- CSS Compound Selectors
- CSS Style Priority : Selector Specifity
Adding Style to document
You can add styles in three ways.
![Adding Style to document]()
Inline as an attribute of element style can be added as below. Here we are adding colour to the h1 element.
![Inline css]()
The problem with the above approach is:
- Maintenance of style would be complex when the size of the document grows.
- You cannot reuse the style
The second approach to include a style is to set them as part of the head section of the document. You can create a style in the head section of the HTML document as below.
<head>
<title>Demo App</title>
<style>
h1
{
color:red;
}
</style>
</head>
The problem with the above approach is:
- Maintenance would be complex since the size of the document will grow.
- You cannot reuse the style across multiple HTML files.
The third and best approach to add styles to a HTML document is to use external CSS files. In this approach you put the styles in a separate file with the extension CSS. You add a reference of the external CSS file as below.
![add reference of external CSS file]()
In the above approach you can reuse styles across multiple HTML files or documents.
CSS Selectors
You can select elements from a HTML document to apply CSS on that in three ways.
![CSS Selectors]()
Element Selector
If you want to apply the same style to all instance of a specific element in a document then you apply the style using an
Element Selector. In an Element Selector you choose an element with its tag name and apply the style on that. For example we want to apply the colour
red to all h1 elements that appear on the document.
h1
{
color : red;
}
As you see in the above we are selecting the element directly with the tag name. The above CSS will make the colour of all h1 tags red.
Class Selector
You can select an element on the name of the class associated with it and apply the style to that. You select the element on the basis of class using a dot (.) Usually you use the class selector when you want to apply a specific style to a different set of elements. For example you want to apply the color blue style to various elements on the document. In that case you will provide a class name to all elements and then select them on the basis of that class name. To understand it better let us consider the following document:
<h1 id="titlemessage">Education is must</h1>
<p class="bluetext">Education in its general sense is a form of learning in
which the knowledge, skills, and habits of a group of
people are transferred from one generation to the next
through teaching, training, or research. Education frequently
takes place under the guidance of others, but may also be autodidactic
</p>
<h3 class="bluetext">Pledge to teach</h3>
As you notice we have given the same class name bluetext to the p and h3 elements in the HTML document. Next in the CSS we will select these elements using dot (.).
.bluetext
{
color:blue;
}
In the above, using the class selector we selected the class bluetext and applied the style to that. So all the elements with a class name set to bluetext would have the blue color.
The bottom line is that you select an element on its class using the dot (.) in CSS.
Id Selector
You can select an element on its id and apply a style to that. You select an element on the basis of its id using a hash (#) on CSS. So let us consider again the receding HTML that we used in the class selector. The H1 element has an id. If you want to apply the color red using the id then you can do that as follows:
#titlemessage
{
color : gray
}
Compound Selector
You can select an element from a document using a more than one selector approach. Let us consider the scenario that “You need apply a specific style to all h1 tags with the id set as temp”. In this case you will use the first element selector to select all h1 tags then the id selector to filter the specific h1. This approach of selecting an element is known as a Compound Selector.
h1#titlemessage
{
color : red
}
The preceding compound selector will apply the color red style to the h1 element with the id titlemessage to the document.
CSS Style Priority
Let us say you have applied CSS on a specific element at all three levels like:
- Inline in element
- In head section of document
- In external CSS file
Then which CSS will be applied to the element? In the preceding scenario the style applied inline on the element will be applied.
![CSS Style Priority]()
So the style always applied as inline has the highest priority. However there is a way you can override this. By marking a style as
important.
#titlemessage
{
color : red !important
}
As you see in the preceding we have marked the color style as important so it will take the highest priority while applying styles on elements.
Position based Priority
Now there could be one more scenario that you have a style set more than once on the same document. In that scenario the position-based priority applies.
#titlemessage
{
color : red
}
#titlemessage
{
color : blue
}
In the preceding scenario the style color blue will be applied because the style that is defined as last in the document has a greater priority.
This is the end of the first article of the CSS basic series. I hope you find this article useful to get started with CSS.