CSS Interview Questions and Answers

CSS Interview Questions and Answers

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Looking for Online Training