InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
What do you have to do to automatically number the heading values of sections and categories? |
|
Answer» We can use the concept of CSS counters. This lets us adjust the appearance of the content based on the location in a document. While using this, we need to FIRST initialize the value of the counter-reset property which is 0 by default. The same property is also used for changing the value to any number that we need. Post initialization, the counter’s value can be incremented or decremented by using the counter-increment property. The name of the counter cannot be CSS KEYWORDS like “none”, “initial”, “INHERIT” etc. If the CSS keywords are used, then the declaration would be ignored. Consider an example as shown below: BODY { counter-reset: header; /* define counter named 'header' whose initial value is 0 by default */}h2::before { counter-increment: header; /* The value of header counter by 1.*/ content: "Header " counter(header) ": "; /* To display word Header and the value of the counter with colon before it.*/}Here, we are trying to achieve auto count increment and display feature for the h2 tag. Wherever we use h2 tag, the content will be prefixed by "Header 1 : " , "Header 2 : ", "Header 3 : " etc. |
|