Questions 51- 54

Interview Questions on CSS

51. How to keep scroll bar for div or body?

Use :-
overflow-x: scroll; /* to set scroll bar in X direction */
overflow-y: scroll; /* to set scroll bar in Y direction */

52. How to hide scroll bar for div or body?

overflow: hidden; 
53. How to apply styles for screen which has screen size  more than 250px;
Syntax :- 
@media only screen and (min-width:250){
      /*styles goes here */
}
Example :-
@media only screen and (min-width:250){    
 .container{
    width:200px;
    font-size:12px; 
 }
 p{
     Font-size:10px;
 }
}

54. How to apply styles for screen which has display less than 1000px;

Syntax :- 
@media only screen and (max-width:1000){
      /*styles goes here */
}
Example :-
@media only screen and (max-width:1000){
.container{
   width:900px;
   font-size:18px; 
}
p{
    Font-size:12px;
}
}

Questions 51- 54

Questions 41 - 50

Interview Questions on CSS

41. What are the values exist for text-align property?

1. left :- 
       code :- text-align:left;
       use for : to align left side.
2. Right :-
       code :- text-align:right;
       use for : to align right side.
4. center :-
     code :- text-align:center;
     use for : to align center.

5. justify :-
     code :- text-align:justify;
     use for : to align both sides.

42. How to set two div blocks in one line?

Use float property;
Ex:- 
<div style=”float:left;width:200px;height:100px;”> Div1 content </div>
<div style=”float:left;width:200px; height:100px;”> Div2 content </div>

43. What is the use of font-weight property?

To set bold value.
font-wight:bold;

44. What is the use of word-wrap property and what are all the values exist for that property?

Allow long words to be able to break and wrap onto the next line.
Ex :- 
p.test {
    word-wrap: break-word;
}

45. What is the difference using width:500px; and width:75%;

If we use width:500px. It will have same width even if  we reduce the window size.
If we use width:75%. It will be change the width to 75% of the windows size.

46. What is the use of min-width property?

To set minimum width we use min-width. when width is dynamically decreases it wont reduce more than min-width value.

47. What is the use of max-width value?

To set maximum width we use min-width. when width is dynamically increases it wont increase more than max-width value..

48. How to apply style for all <input> tags which has type text?

input[type=”text”]{
  /* styles goes here */
}

49. Which style do we have to use to hide one <div> block?

Use :- display: none;

50. How to keep one div block always visible at top right side even when we scrolling?

Use position: fixed;top:0px;right:0px;

Questions 41 - 50

Questions 31 - 40

Interview Questions on CSS

31. How write style by using java script?

Syntax :- document.getElementById(‘idname’).style.propertynname=’value’;
Ex : - document.getElementById(‘container).style.color=red;

32. How to get style property value of one html element in javascript?

Syn :- document.getElementById(‘idname’).style.propertynname
Ex :-  var color = document.getElementById(‘container’).style.color;

33. How to get style property value of one html element in jQuery?

Syn :- $(‘element’).css( propertyName );
Ex 1 :-  
$('div').css(‘color’);
Ex 2 :-
$('#container’).css(‘color’);
Ex 3:-
$('.classname’).css(‘color’);

34. How to write the styles using jquery?

Syn :- $(‘element’).css( propertyName, value );
Ex 1 :-  
$('div').css(‘color’,’#FF3456’);
Ex 2 :-
$('#container’).css(‘color’,’# FF3456’’);
Ex 3:-
$('.classname’).css(‘color’,’ #FF3456’’);

35. How to collapse borders of cells into single line in tables?

Use :- border-collapse: collapse;
EX :- 
table {
    border-collapse: collapse;
}

36. How to set border corners into rounded shape?

Use :- border-radius: 5px; /*(you can change pixels)*/

37. How to set shadows for one div element?

Use :- box-shadow: 10px; /*(you can change pixels)*/

38. What is the use of margin property?

Set particular element in in mentioned distance.
margin      : distance in allsides.
margin-top  : Sets the top margin of an element
margin-bottom : Sets the bottom margin of an element
margin-left   : the left margin of an element
margin-right  : Sets the right margin of an element

Ex1 :- margin: 5px;
Ex2 :- margin-left: 5px;

39. What is the difference b/w margin and padding?

Padding is used to maintain the distance from border to content.
margin is used to set particular element in in mentioned distance.

40. How to set the text size?

Use font-size attribute.
Syn  font-size: /*give value here */;
Ex :- font-size: 40px; 

Questions 31 - 40

Questions 21 - 30

Interview Questions on CSS

21. How to write background image for div?

Use background-image attribute.
Ex:- 
 div{
    background-image : url(‘link_of_image’);
}

22. How to set background colors?

Use background-image attribute.
Ex:- 
 div{
    background-color : #FF4567;
} 

23. How to repeat the same in x-direction for background image in div?

Use background-repeat: repeat-x;

24. How to repeat the same in y-direction for background image in div?

Use background-repeat: repeat-y;

25. How to repeat the same in X and y-direction for background image in div?

Use background-repeat: repeat;

26. By default in which direction repetition of background image exist ?

In both directions

27. How to set to not repeat the background image?

background-repeat: no-repeat;

28. How to apply style for only last row of table?

tr : last-child { 
   /* Apply styles here */
}

29. How to apply style for only first child of list?

tr : first-child { 
   /* Apply styles here */
}

30. Which property we use to not allow the user to modify the input value?

Use disabled in input tag. EX:- <input type=”text” value=”33” disabled />

Questions 21 - 30

Questions 11 - 20

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;
}

Questions 11 - 20

Questions 01-10

Interview Questions on CSS

1. What is CSS ?

CSS Stands for cascading style sheet.
Which is used to apply styles for html elements.
To decorate the webpage we use css styles.

2. How would you add css styles in HTML?

1. Inline styles :- use style attribute in html tag directly.
2. Embedded styles :- place <style> </style> in <head> tag and write styles in b/w <style></style>
3. External Style sheet :- link to external style sheet(.css) by using following syntax
Syn :-
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4. What are the Advantage and disadvantage of external style sheets?

Answer Not Given

5. What is the advantage of using embed styles instead of inline styles?

Inline styles : we have to re write same code for multiple html elements which has same type or class.
Embed styles :- you can write one style and apply it to same type or class at once. So no need to re write the code for all classes.

6. If you write same property in embed style sheet and inline style sheet. Which one the browser takes?

Inline style.

7. What to do if we don’t want to override property of embed styles in inline styles?

Use !important for the particular property.
Ex:- width:500px !important;

8. How to apply styles for HTML elements?

1. By using class name.
Ex:-
.classname{

}
2. By using id name
Ex:-
#id{
}
3. By using tag name
Ex:- div{
}

9. How to apply styles using class name?

By using dot . followed by classname
Syntax :-
.classsname{
Attribute : Value;
}
Ex:-
.container{
Font-size:14px;
Background-color:#F33;
}

10. How to apply styles using id name?

By using # followed by classname
Syntax :-
#idname{
Attribute : Value;
}
Ex:-
#container{
Font-size:14px;
Background-color:#F33;
}

Questions 01-10