Special Offer - Enroll Now and Get 2 Course at ₹25000/- Only Explore Now!

All Courses
CSS Interview Questions and Answers

CSS Interview Questions and Answers

March 25th, 2019

CSS Interview Questions and Answers

In case you’re searching for CSS Interview Questions and answers for Experienced or Freshers, you are at the correct place. CSS (Cascading Style Sheet) Questions and Answers provided here covers almost the entire basic and advanced CSS concepts along with examples. CSS is one of the top important features for web development process. Both basic and advances portions are handled and posted as questionnaires just because of CSS experts. To crack the web developer interviews and become a best web developer, go through the entire questions on CSS. To create an attractive website or to pass the interviews, gain some knowledge on CSS vital topics like types of CSS, CSS Style components, available selectors, different attributes and how to use them, available tools, usage of preprocessor, variables and functions. Roles like UI Developer, CSS Web Developers, Web Designer, and Front-end Developer are highly benefited with this set of questions and be a remarkable professional. GangBoard offers Advanced CSS Interview Questions and Answers that assist you in splitting your CSS Interview and procure dream vocation as CSS Developer.

Q1) What is Z- Index ?

Answer: It expresses the vertical order of element.

Q2) What is position: Relative?

Answer: If the element has position as relative that places the element from current position.

Q3) What is position : Absolute?

Answer: If the element has position as absolute that will place the element depends upon it’s nearest parent element.

Q4) What is Inline element ?

Answer: It has no line break and we can’t set height and width of the element.

Q5) What is block element?

Answer: Line break will be there for block element and we can set height and width of the element.

Q6) What is Inline – Block element ?

Answer: It has no line break and we can set height and width of the element.

Q7) What will visibility:hidden do ?

Answer: Element will be hidden but it will add space in UI.

Q8) What will Display: none do ?

Answer: Element will be hidden and it won’t add space in UI.

Q9) What is Float ?

Answer:
If we used float then that element will be floated in that particular direction .
If we used float : left , then text will be floated left .

Q10) What is the use of clear ?

Answer:
If we used clear then that element could not be floated in that particular direction.
If we used clear : left , then text wont be floated in left.

Q11) What is the use of Max – width ?

Answer: If we used width and we are resizing the browser to the smaller size , then Scrollbar will be added .To overcome this , we are using max- width.

Q12) What will overflow : auto do ?

Answer: If the scroll bar is needed , then it will add scroll bar.

Q13) What is Box- Sizing ?

Answer: It allows us to include the padding and border in element total width and height.

Q14) What will overflow : scroll do?

Answer: It will add scroll bar in both sides, whether the scroll bar is needed or not.

Q15) What are available in CSS Box Model ?

Answer: It consist of padding , Border , margin and content .

Q16) what are different types of styles in CSS?

Answer: Inline , Embedded and External styles

Q17)What are the different types of CSS selectors?

  • ID Selector
  • Class Selector
  • Element Selector
  • Group Selector

Q18) What is Media Query?

Answer: Media Query are used to design webpages based on device general type and special parameters ( screen width ).

Q19) Choose the correct statements from the below, regarding id and class attribute?

Answer:

  • Id attributes should have unique value across the HTML page
  • class attributes should not have unique value across the HTML page

Q20) A web developer wants all the paragraphs text in the HTML page to be appeared in red in color. Which of the below CSS code is appropriate to achieve the above requirement?

Answer: p{color:red;}

Q21) What are the valid values of the CSS attribute font-style?

Answer: italic | normal |oblique

Q22) Ranu has designed a website. She has included the points to be noted for each topic explained under a paragraph and the note paragraph is placed after explanation section of each topic. Now she wants to render the note paragraph in different color. Which selector should Betty be using?

Answer: Adjacent sibling selector

Q23) Which of the following is the default value of position attribute?

Answer: static

Q24) Which position property remain unaffected while scrolling?

Answer: Fixed

Q25) Which of the below CSS property allows you to skew, rotate and translate an element?

Answer: Transform

Q26) Which HTML element is used to define style to an HTML page?

Answer: <style></style>

Q27) Identify the attribute of HTML element to apply ID selector?

Answer: id

Q28) Identity the correct syntax that modify the style of <b> to display text in green color & underlined?

Answer: b { color: green; text-decoration:underline;}

Q29) What is the attribute which we use in CSS for changing the background color of the page?

Answer: background-color

Q30) Identify the correct tag that helps to link external css file named “Stylesheet.css” ?

Answer: <link rel=”stylesheet” type=”text/css” href=”Stylesheet.css”>;

Q31) When all the different ways of adding style is present in a HTML file, then which among the following will have highest priority for a given tag?

Answer: inline

Q32) How do you add comment in a CSS file?

Answer: / * this is a comment */

Q33) In media queries, comma separated lists acts like logical operator ____ and styles get applied if any of the media queries returns _____.

Answer: “OR”, “true”

Q34) “not ” will negate the ____ media query/queries when it is applied to a comma separated list of media queries irrespective to which particular query it has been applied

Answer: Entire

Q35) Which are the logical operators used to compose media queries ?

Answer: and, only, not

Q36) Which of the following is true about CSS ?

Answer:

  • CSS is used to style a web page in a simple and easy way.
  • CSS is the abbreviation for the “Cascading Style Sheet”.
  • You can write the CSS code once and then you can reuse same sheet in multiple HTML pages.

Q37) The web developer has been developed a website where the styling gets changed very frequently. Which way should Jack use for specifying style sheet?

Answer: External style sheets

Q38) Which of the following statements is TRUE for CSS?

Answer:

  • We need to use external style sheets when we want the same style to be applied to multiple pages
  • We need to use inline style sheets when we want a single document to have a unique style

Q39) Which of the following is/are component/s of CSS style rule?

Answer:

  • Selector
  • Property
  • Value

Q40) Dilraj has developed a website for his organization-x. The end users of the website would be viewing the website across different browsers. Hence Dilraj wants his website to be consistent across all the browsers. So Dilraj wants to nullify the browser styling by preserving basic styling. Which open source css file should Dilraj use?

Answer: css file

Q41) Sourav has developed a website for an organization.  The website contains 3 levels of headings. According to the styling guidelines provided by the organization all the headings of the website should be capitalized. Which of the below styling statement should Sourav use to achieve this requirement?

Answer: h1,h2,h3 { Text-transform : Capitalize;}

Q42) Sanjeev wants to include a left padding of 5px, right padding of 10px, bottom padding of 15px and top padding of 8px. Which of the following statement is correct ?

Answer: padding: 8px 10px 15px 5px

Q43) What is the full form of CSS and why it is used?

Answer :  CSS stands for Cascading Style Sheet and it is used to design webpages

Q44) In how many ways you can integrate CSS with your webpage?

Answer:

  • Inline styling
  • Internal method
  • External style sheet

Q45) Any CSS frameworks?

Answer :

  • Bootstrap
  • Foundation
  • Semantic UI

Q46) What is CSS selector?

Answer:

It specifies the elements to which a particular style should be applied

Examples :

  • Element selector
  • ID selector
  • Class selector
  • Group selector

Q47) How do color a H1 tag to blue color?

Answer : <h1 style=”color:blue”></h1>

Q48) What is universal selector?

Answer : Universal selector selects all the element type.

Q49) What is the difference between class and id selector?

Answer 8 :

Class selector :

<h1 class=”test”>class selector</h1>
<style>
.test {
color: blue;
}
</style>
Id selector :
<h1 id=”test”>Id selector</h1>
<style>
#test {
color: blue;
}
</style>

Q50) What do you mean by CSS box model?

Answer : It is used to determine the layout of elements

It includes :

  • Margin
  • Border
  • Padding
  • Content

Q51) What is float property in CSS?

Answer : It is used to move the whole container to the left or right with the texts to be wrapped arownd it.

Q52) What do you mean by z-index?

It is used to specify the stack order of positioned elements that may overlap.

Q53) What is the difference between display:none and visibility:hidden?

Answer:

  • display:none hides the elements but it doesn’t occupy any space.
  • visibility:hidden hides the element but it also occupies the space

Q54) What are the different types of position properties?

Answer :

  • static
  • relative
  • absolute
  • fixed
  • sticky

Q55) Name some pseudo classes that we use in CSS?

Answer : A pseudo class is used to define the state of an element

Examples :

  • hover
  • active
  • link
  • visited

Q56) Name some of the pseudo elements in CSS?

Answer :

  • after
  • before
  • first-letter
  • first-line