Loading

CSS Interview Questions

CSS Interview Questions Answers

CSS Interview Questions and answers for beginners and professionals with a list of top frequently asked in CSS which include from basic to advance. It designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of CSS Language.

1. What is CSS?
Ans:-CSS is abbreviation of Cascading Style Sheets.. It is use for improving page design, layout,etc. CSS file is also called external style sheet.. Its file is connected with HTML file.
2. When CSS begins?
Ans:- From 1980
3. Write a version of CSS?
Ans:- There are following version
CSS1, CSS2, CSS2.1, CSS3, CSS4
4. How we can add CSS file with web page?
Ans:- There are following method for implementing CSS on web page:-
1. Inline Method
2. Internal method
3. External method
5. What is advantage of CSS?
Ans:-There are following advantage of CSS:-
1. Bandwidth
2. Site-wide consistency
3. Page reformatting
4. Accessibility
5. Content separated from presentation
6. What is disadvantage of CSS?
Ans :- There are following disadvantage of CSS

  • Cross browser issue
  • Confusion due to its many level
  • It is open text based system

7. What is limitation of CSS?
Ans :- There are following limitation of CSS :-

  • It cannot perform any logical operation.
  • It cannot perform with database
  • Pseudo-class not controlled by dynamic behavior
  • CSS cannot request webpage

8. Write the component of CSS?
Ans :- There are following component in CSS :-

  • Selector
  • Property
  • Value

9. What is SELECTOR in CSS?
Ans:-selectors are patterns used to select the element(s) you want to style. This could be any tag like < h1> or < table> etc.
10. What is PROPERTY in CSS?
Ans :- For improving web page look and feel. We use some property like color, text, font, etc. These are called CSS property. In other word, A property is a type of attribute of HTML tag.
11. What is VALUE in CSS?
Ans :-Value is basically, What we are assigning in property. Like color: #ffffff;, font-weight : 12px; , etc.
12. Type of SELECTORS are?
Ans :-There are following type of selectors :-
a) ID selectors :- It search ID attribute of HTML element
#id1 {
text-align: left;
color: blue;
}
b) Class selector:- It search class attribute of HTML elements
.class1{
text-align:left;
color:blue;
}
c)Grouping Selectors:- Example is
h1,h2,.class1{
text-align:left;
color:blue;
}
d) Universal selectors:-
example is
{
text-align:left;
color:blue;
}
e) The Descendant Selectors:- example is
div .class1{
text-align:left;
color:blue;
}
e) Child Selectors :- Example is
div > p{
color:red;
}
f} Attribute Selectors :- Example is
input [type=”text”] {
color:red;
}
13. How to write CSS comment?
Ans:- CSS comment are start with /* and end with */
14. How much color value support CSS?
Ans:- CSS support color name, RGB, HEX, HSL,RGBA,HSLA values.
15.Write RGB formula?
Ans:- rgb(red, green, blue)
In rgb define intensity of color from 0 to 255
rgb(255,0,0) color is red
rgb(0,255,0) color is green
rgb(0,0,255) color is blue.
16. Write Hex value formula?
Ans :- Formula is #rrggbb
Where rr = red, gg = green, bb= blue
rr,gg,bb value lies between 00, ff means 00, 01, 0f,08,0a,etc.
17. Write HSL code formula?
Ans:- hsl (hue, saturation, light) or hsl(H, S%, L%)
Hue represent degree of color from 0 degree to 360 degree’
Saturation represent % of saturation of color
Light represent % of lightness of color
18. Write color rgba value formula?
Ans:- It is extension og rgb. Here in rgba , a is for alpha parameter which range is between 0.0 to 1.0 and define for opacity.
rgba(red, green, blue, alpha)
19. Write color HSLA value formula?
Ans:- HSLA is an extension of HSL
H for Hue
S for Saturation
L for Lightness
A for alpha (It define opacity and range between 0.0 to 1.0
hsla(hue, saturation,lightness,alpha)
20. How to define background effect in CSS?
Ans:- Using background property we can define background effect in css.
example:-
div{
background-attachment: fixed;
background-color: #CCCC66;
background-image:url(“logo.jpg”);
background-position:inherit;
background-repeat:no-repeat;
}
21.How to write shorthand background?
Ans:- div {
background: #CCCC66 url(“logo.jpg”) no-repeat fixed inherit;
}
order will be
background-color
background-image
background-repeat
background-attachment
background-position
22. How to specify painting area of background?
Ans:- using background-clip property we can specify painting area of the background.
23. How to specify origin position of background image?
Ans:- Using property background-origin property, we can specify the background origin position.
24. How to specify size of a background image?
Ans:- Using property background-size, we can specify the size of a background image. Size can be auto or two value syntax width and height.
25. What is CSS border?
Ans:- CSS border can be define using “border” property. It allow style, width, color of an element’s border. That means, It specify how border of the box represent an element should look .
26. Write the list of border style value?
Ans:- border-style property represents, how to border should display. Main border style values are:-
dotted:- It represents dotted border
none:- It represents no border
solid:- It represents single solid line
dashed:- It represents dashed border
double:- It represents double border
groove:- It represents groove border. Its effect depends upon border color.
ridge:- It represents opposite of groove. Its effect depends upon border color.
inset:- It represents 3d inset border. It looks like box embeds into the page.
outset:- It represents 3d outset border. It looks like coming outside from canvas.
hidden:- It represents hidden border.
27.How to change bottom, top, left and right border style.
Ans:- For changing a top style, used property border-top-style
For changing a left style, used property border-left-style
For changing right style property border-right-style
For changing bottom style property border-bottom-style
28. How to define border color and width?
Ans:- border-width property is used for border width and border-color property is used for border color.
29. How to write border shorthand property?
Ans:- div{border:10px solid #000000;}
In short hand property first call border-width then border-style and lastly call border-color property.
30. How to make rounded border?
Ans:- border-radius property is used for rounded border.
div{
border:10px solid #000000;
border-radius:7px;
}
31. Write border color property?
Ans:- border-color
border-bottom-color
border-top-color
border-left-color
border-right-color
32. Write border width property?
Ans:- border-width
border-bottom-width
border-top-width
border-left-width
border-right-width
33. Write border style property?
Ans:- border-style
border-bottom-style
border-top-style
border-left-style
border-right-style
34. What is margin property?
Ans:- Margin property create a space around an element. For overlap content, we can use a negative value.
For setting margin we can use the following property:-
margin:- It is shorthand property for setting margin.
Formula margin: top right bottom left
<div style=”margin:10px 8px 6px 4px;”></div>
margin-left:- It specify left margin
margin-right :- It specify right margin
margin-top:- It specify top margin
margin-bottom:- It specify bottom margin
35. What is CSS padding property?
Ans:- CSS padding property specify, how much space should appear between content of an element and its border.
The value of padding attribute will be either percentage, length or word inherit.
For setting padding we can use following property:-
padding:- It is shorthand property of padding. Formula is
padding : top right bottom left
<div style=”padding: 5px 6px 9px 10px;”></div>
padding-top:- It specify left padding.
padding-right:- It specify right padding.
padding-bottom:- It specify bottom padding.
padding-left:- It specify left padding.
36. What is difference between padding and width property?
Ans:- padding is space between element content area and border.
width is total area of an element content area.
37. How to define height and width of CSS Element?
Ans:- Using height, width, min-height, min-width, max-height, max-width property we can define the height and width of the CSS element.
38. What is CSS model?
Ans:- In CSS, we refer to web pages in a composition of block or boxes. This reference is called a CSS model or Box model.
These model allow us to make the border, padding, margin, etc. of each block.
Suppose, one block total width is 100 px then if we apply padding 10 px left then the width will be 90 px
39. What is CSS outline property?
Ans:- CSS outline property is just like border property for make attention on particular block. It creates an extra border around an element. That means It makes an element stand out.
40. What is the difference between CSS border and CSS outline property?
Ans:- CSS border property is a part of width and height of element but CSS outline is not. We can set different border each edge of an element but outline will be always same for each edge. An outline cannot be rectangular but border can be.
41. Write CSS outline property?
Ans:- There are following CSS outline property:-
outline:- It is a shorthand property. Formula is div {outline: outline-width outline-style outline-color}
outline-width:- It defines the width of the outline. width can be defined in px, pt, cm, em, etc.
outline-style:- It defines a tyle of outline
outline-color:- It defines a color of outline
outline-offset:- It defines space between the outline border and element border.
42. Write a different type of outline style?
Ans:- dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden are different style of outline.
43. How to set text color using CSS?
Ans:- Using color property we can set the text color.
p {
color:red;
}
44. How to set text direction using CSS?
Ans:- Using direction property we can set text direction. Possible direction value is ltr and rtl.
p{
direction:rtl;
}
45. How to set text alignment using CSS?
Ans:- using text-align property, we can set text alignment. A possible text-align value will be left, right, centered, justify, blink.
p{
text-align:justify;
}
46. How to set space between character?
Ans:- using letter-spacing property we can set space between character.
p{
letter-spacing:5px;
}
47. How to set space between word?
Ans:- Using word-spacing property we can set space between word.
p{
word-spacing:5px;
}
48. How to set text decoration using CSS?
Ans:- using property text-decoration we can set. Possible values are : none, overline, underline, line-through
p{
text-decoration: none;
}
49. How to use text transformation in CSS?
Ans:- Using text-transform property we can set text transformation. Possible values are: uppercase, lowercase, capitalize, none.
50. How to indent first line of text?
Ans:- Using text-indent property we can set text indent.
p{
text-indent:30px;
}

Share with:


4+

Leave a Reply

Connect with:




z35W7z4v9z8w