Highlight: Below, first we learn how to define individual tags with multiple definitions using
Cascading Style Sheets, and then we learn how to include common components on multiple web pages with minimum effort.We packed up with external Cascading Style Sheets in previous section, and I had mentioned like a sage that their could be a point in your life when you would like to implement different CSS definitions for different sections of same HTML page. I understand that as you go through these HTML gospels, you're growing wiser and wiser, and your unquenchable thirst for wisdom is attaining new heights. Good!
We use CLASS attribute to render different CSS definitions to same tags. Ok, before we move ahead, today I read in an article that tags in an HTML file should be used in small caps so that they can be used in sync with emerging trends like XML etc. So small caps from now on.
Supposing, in one section, we want to look purple, and in another, we want to look black. If we do it in usual
a { font-size : 10 pt; font-family : Arial; font-weight : bold; color : Purple; text-decoration : none; }
a:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : Purple; text-decoration : underline; }
manner, we'll only have a purple colored tag because definition is applied universally. So what do we do. We uses "classes" in this manner:
a.sec1 { font-size : 10 pt; font-family : Arial; font-weight : bold; color : purple; text-decoration : none; }
a.sec1:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : purple; text-decoration : underline; }
a.sec2 { font-size : 10 pt; font-family : Arial; font-weight : bold; color : black; text-decoration : none; }
a.sec2:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : black; text-decoration : underline; }
If you're noticing type, you'll notice use of sec1 and sec2, which we can take as two sections. We execute these definitions in HTML page somewhat like this:
To see site of immortals, click this purple text.
