Many of my readers asked me to write a series on CSS learning. So here is my attempt to help them. In this series I will focus on basics of CSS and how one can start learning CSS.
In this post 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 different ways,
Inline as attribute of element style can be added as below. Here we are adding colour to h1 element.
Problem with above approach is
- Maintenance of style would be complex when size of document will grow.
- You cannot reuse style
Second approach to include style is to put them as part of head section of document. You can create style in head section of HTML document as below,
Problem with above approach is
- Maintenance would be complex as size of document will grow.
- You cannot reuse style across various HTML files
Third and best approach to add styles in HTML document is using external CSS files. In this approach you put styles in a separate file with extension CSS. You add reference of external CSS file as below
In above approach you can reuse styles across various HTML files or documents.
You can select elements from HTML document to apply CSS on that in three ways.
If you want to apply same style to all appearance of a particular element on document then you apply style using Element Selector. In Element Selector you choose an element with its tag name and apply style on that. For example we want to apply colour red to all h1 elements appear on document.
color : red;
As you see above we are selecting element directly with the tag name. Above CSS will make colour of all h1 as red.
You can select an element on name of class associated with it and apply style on that. You select element on basis of class using dot (.) Usually you use class selector when you want to apply a particular style to different set of elements. For example you want to apply color blue style to various elements on document. In that case you will give a class name to all elements and then select them on basis of that class name. To understand it better let us consider below 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
<h3 class="bluetext">Pledge to teach</h3>
As you notice that we have given same class name bluetext to p and h3 element on HTML document. Next in CSS we will select these element using dot (.)
Above using class selector we selected class bluetext and applied style in that. So all elements with class name set as bluetext would have blue color.
Bottom line is you select an element on its class using dot (.) in CSS.
You can select an element on its id and apply style on that. You select element on basis of its id using hash(#) on CSS. So let us consider again above HTML we used in class selector. H1 element has id. If you want to apply color red using id you can do that as follows
color : gray
You can select an element from document using more than one selector approach. Let us consider scenario that “You need apply a particular style to all h1 with id set as temp”. In this case you will use first element selector to select all h1 then id selector to filter particular h1. This approach of selecting element is known as Compound Selector.
color : red
Above compound selector will apply color red style to h1 element with id titlemessage on the document.
CSS Style Priority
Let us say you have applied CSS on a particular element at all three levels like
- Inline in element
- In head section of document
- In external CSS file
Then which CSS will get applied to element. In above said scenario style applied at inline on element will get applied.
So always style applied as inline has highest priority. However there is way you can override this. By marking a style as important
color : red !important
As you see above we have marked color style as important so it will take highest priority while applying styles on elements.
Position based Priority
Now there could be one more scenario that you have style set more than once on the same document. In that scenario position based priority come to action.
color : red
color : blue
In above scenario style color blue will be applied because style which is defined as last in document has more priority.
Now come to the end of first post of CSS basic series. I hope you find this post useful to get started with CSS. Thanks for reading.