Interview Questions on CSS
11. How to apply styles using tag name?
Directly use tagname
Syntax :-
#tagname{
attribute : Value;
}
Ex:-
div{
font-size:14px;
background-color:#F33;
}
12. How to set values to color attribute in css?
Method1 :-
By using # followed by 6 hexa decimal digits.
Ex :- color : #FFA534
Description :-
First two letters refers quantity of red color.
Second two letters implies green quantity of color.
Third two letters refers quantity of blue color.
Method2 :-
By using rgb(digit1,digit2,digit3) here digit value exist b/w 0 to 255
Ex :- color : rgb(255,123,32)
Description :-
First digit refers quantity of red color.
Second digit refers green quantity of color.
Third digit refers quantity of blue color.
Method 3 :-
Directly use color name
Ex 1 :- color : red
Ex 2 :- color: orange
Ex 3 :- color :pink
13. How to remove bullets for unordered list or <ul>?
Use list-style:none; in style
Ex :-
<ul style="list-style:none;">
<li>Coffee</li>
<li>Tea</li>
</ul>
14. How to remove underline for hyper links?
Use text-decoration : none; in styles.
Ex :- <a href="link_url_name" style=" text-decoration : none;"> Hi this is ramesh </a>
15. How to apply style for hyper links when mouse over on that link?
Use a:hover.
a:hover{
/* aplly styles here; */
}
16. Write inline style for mouse over on hyper link?
Inline style for hover is : use onmouseover attribute. < <a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'> Click Me </a>
17. If we write same class two times with different values for same properties.Which class will it take?
The one which executes at second time.
18. How to apply styles for alternative rows in table?
For even rows use
tr:nth-child(even) {/*apply styles */}
For odd rows use
tr:nth-child(odd) { /*apply styles */}
19. How to apply styles for alternative columns in table?
For even columns use
td:nth-child(even) {/*apply styles */}
For odd columns use
td:nth-child(odd) { /*apply styles */}
20. How to apply style for nested elements or child elements?
Use space or > in between two elements.
syntax: -
first_element second_element{
/* styles goes here */
}
Ex :-
.container p{
Font-size:12px;
}