CSS Interview Questions

Here is a list of possible interview questions of CSS, along with answers to help you prepare for your interview: CSS Interview Questions

1. What is the full form of CSS?

• CSS stands for Cascading Style Sheets.

Learn CSS Click here

2. Why do we use style sheets?

• A style sheet is a file that tells a browser how to render a page.
• A current recommendation for style sheets is the Cascading Style Sheets (CSS) language.
• CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

3. How can we import CSS files into HTML?

• The External Style Sheet (.css file) always separate from the HTML file. You can link this external file (.css file) to your HTML document file using the link element. You can place this link element Within the head element of your HTML file.

  <link rel="stylesheet" type="text/css" href="styles.css" />

4. What is CSS?

• CSS is the language we use to style a web page.
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on the screen, paper, or in other media.

5. Which has more specificity of style inline attribute or class attribute?

• inline styles have more specificity than class attribute.

6. How do you write CSS?

• CSS can be added to HTML code in 3 ways:
  • Inline: by using the style attribute to HTML elements.
  • Internal: by using a style element in the head element.
  • External: by using a link element to link to an external CSS file.

7. What is the external style sheet, internal style sheet in CSS?

• Internal CSS:
  • An internal CSS is used to define a style for a single HTML page.
  • An internal CSS is defined in the head element of an HTML page, within a style element.
• External CSS:
  • An external style sheet is used to define the style for many HTML pages.
  • To use an external style sheet, add a link to it in the head element of each HTML page.

8. How will you link HTML and CSS?

• CSS can be added to HTML code in 3 ways: Inline: By using the style attribute inside HTML elements. Internal: By using a style element in the head element. External: By using a link element to link to an external CSS file.

9. What are the styles?

• Styles in HTML are rules that describe how a document will be presented in a browser.
• Style information can be either attached as a separate document or embedded in the HTML document.

10. Why do we need CSS?

• CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

11. Explain Inline styles?

• Inline Styles
  • The inline CSS helps us apply style rules to specific HTML elements.
  • The style attribute specifies properties and values.
  • The inline CSS is limited. For elaborate projects, we should consider other options: internal and external methods.

12. What is a responsive web design?

• Responsive web design:
  • Responsive web design is about creating web pages that look good on all devices.
  • A responsive web design will automatically adjust for different screen sizes and viewports.

13. What is the latest version of CSS?

• Latest release : CSS 2.1 : Level 2 Revision 1 (April 12, 2016).

14. How to highlight a row in a table?

• We can highlight Table Row using CSS.

15. Which one is used in CSS as units? (MCQ)

A.px

B.pt

C.em

D. all

Answer: Option D (all)

16. Which method is used to import CSS? (MCQ )

A.@import

B.@get

Answer: Option A (@import)

17. What are the advantages of using CSS?

• Separation of content from presentation
  • CSS provides a way to present the same content in multiple presentation formats in mobile or desktop or laptop.
• Easy to maintain
  • CSS, built effectively can be used to change the look and feel complete by making small changes.
  • To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
• Bandwidth
  • Used effectively, the style sheets will be stored in the browser cache and they can be used on multiple pages, without having to download again.

18. What is a CSS style sheet?

• CSS stands for Cascading Style Sheet.
  • It is a style sheet language that is used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML.
  • It is generally used with HTML to change the style of web pages and user interfaces.
  • With CSS, you can control the color, font, size of text, the spacing between elements, etc.

19. Explain CSS pseudo-element?

• A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:
  • Style the first letter, or line, of an element.
  • Insert content before, or after, the content of an element.

Syntax:

selector::pseudo-element {
/* property: value; */
}

20. What are pseudo-elements?

• Pseudo-elements
  • A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
  • For example: First-line can be used to change the font of the first line of a paragraph (The first line of every p element.).

p::first-line {
color: blue;
text-transform: uppercase;
}

21. Can we add multiple attribute values to the class?

• We can provide multiple class names separated by space as a value to the HTML class attribute.

  <tag class = "name1 name2 name3 name4 ...">Hello</tag>

22. What is meant by the selector and different types of selector?

• CSS Selectors
  • The CSS Selectors are used to select the HTML Elements that we want to style.
  • The different types of CSS Selectors are:
    • Simple Selectors
      • Class Selector
      • ID Selector
      • Type (tag name) Selector
      • Attribute Selector
      • Universal Selector
      • Pseudo-class
    • Compound Selectors
    • Complex Selectors and many more.

23. What is the need for selectors?

• In CSS, selectors are used to target the HTML elements on our web pages that we want to style.
• There are a wide variety of CSS selectors available id, class, tag, etc.

24. Explain the id attribute and the class attribute?

• HTML id Attribute:
  • The HTML id attribute is used to specify a unique id for an HTML element.
  • The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
• HTML class Attribute:
  • The class attribute specifies one or more class names for an element.
  • The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by JavaScript to make changes to HTML elements with a specified class.

25. What if a container has a class name as shiva and id as shiva what will apply first?

• Applied CSS properties in the id selector and CSS properties in the class selector which are not there in the ID selector.

26. What are the types of selectors and Specificity (priorities)?

• Selectors:
  • Simple Selectors
    • Class Selector
    • ID Selector
    • Type (tag name) Selector
    • Attribute Selector
    • Universal Selector
    • Pseudo-class
  • Compound Selectors
  • Complex Selectors and many more
• Specificity (priorities):
  • Specificity is how browsers decide which CSS property values are the most relevant to an HTML element and, therefore, will be applied.
  • The following list of CSS Selectors is in the lowest to highest order by specificity.
    • Type (tag name) Selector
    • Class Selector
    • ID Selector

27. Why do we apply CSS attributes?

• It allows us to Re-use CSS blocks without having to copy them around and without having to modify their selectors.

28. Explain Low to high specificity in selectors?

• The following list of CSS Selectors is in the lowest to highest order by specificity.
  • Type (tag name) Selector
  • Class Selector
  • ID Selector

29. How do you change the style of the element without class and with the class?

• Without class, we can change the style by using inline styles, ID selector, Tag selector.
• With class name by using CSS properties.

30. What is a Universal selector?

• The universal selector matches the name of any of the element types instead of selecting elements of a specific type.

* {    
   color: green;    
   font-size: 20px;    
}

31. How to Style a particular HTML element?

We can style a particular HTML element with CSS in many ways.

1. Inline styles :
   • An inline style can be used to apply a unique style for a single element.
   • To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

<p style="color:red;">This is a paragraph.</p>

1. CSS Selectors :
   • CSS Selectors let you apply CSS styles to a specific HTML element.
   • It might be in either internal CSS or external CSS.

<p class="paragraph">This is a paragraph.</p>

.paragraph {
color: red;
}

32. How to change CSS property after given an important tag?

• Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id, or class to the selector).
• Add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
• Example: with higher specificity

p {
  height: 50px !important;
}
.paragraph-element {
  height: 60px !important;
}
#paragraph {
  height: 70px !important;
}

33. What are advantages and disadvantages of CSS?

Advantages of CSS:

• CSS saves a lot of time.
• It helps to make consistent and spontaneous changes.
• It improves the loading speed of the page.
• CSS can re-position the elements.
• It has better device compatibility.

Disadvantages of CSS:

• There could be cross-browser issues while using CSS.
• There are multiple levels of CSS such as CSS, CSS 2, CSS 3. This can create confusion for non-developers and beginners.

34. What is the default font family?

• Default font-family value depends on the browser.

35. What is the correct syntax for font-family in CSS?

• Syntax for font-family: font-family: family-name | generic-family | initial | inherit;

36. Which is the correct way to write fonts with sans serif as a fallback?

h1 {
    font-family: Arial, sans-serif;
}

37. What is the default font size used for all CSS elements?

• 16px is the default size.

38. What are text properties?

• Text properties:
  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

39. Without using a row should we align the button to right in the same row?

<div class="demo">
    <button>Button</button>
</div>

.demo{
    text-align: right;
}

40. Explain CSS direction property?

• The direction CSS property sets the direction of text, table columns, and horizontal overflow.
• Use rtl for languages written from right to left, and ltr for those written from left to right.

41. How do you write the style to arrange text in the middle?

• The text-align property is used to set the horizontal alignment of a text.
• We can use the text-align property with the value center to center the text.

42. Hyperlinks visited & unvisited?

• Visited: The visited CSS pseudo-class represents links that the user has already visited.
• Unvisited Link: Whenever you make a new link to your web page when you see it. It appears in blue with an Underline of your Text. This type of link is known as unvisited links.

43. Write CSS code with background color and color for the heading element?

h1{
      background-color:#eb8f34;
      color:#ffffff;
  }

44. What are the CSS Background properties?

• The following are the CSS Background properties:
  • background-color
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment

45. What is CSS background-repeat & how to stop it?

• The background-repeat property sets a background image to be repeated.syntax: background-repeat:no-repeat; // The background-image is not repeated.

46. Explain CSS Background attachment?

• CSS background-attachment Property sets whether a background image scrolls with the rest of the page or is fixed.
• Property Values
  • scroll
  • fixed
  • local
  • initial
  • inherit

47. Explain CSS background color? CSS Interview Questions

• Background Color property specifies the background color of an element.

 .card {
      background-color: lightblue;
  }

48. How to change background color without using any CSS selectors?

• Ways to change background color without using CSS selectors:
  • Using inline styles
  • Using JS
    • Example : element.style.backgroundColor = “red”;

49. What is CSS transition?

CSS Transitions enable you to define the changing of an element between two states over some time.

Example:

p {
    transition-property: font-size;
    transition-duration: 4s;
    transition-delay: 2s;
    transition-timing-function: linear;
}

Transition shorthand property:

p {
    transition: font-size 4s linear 2s;
}

50. What is CSS :nth-child() pseudo-class?

The CSS

:nth-child() pseudo-class matches elements based on their position in a group of siblings.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
    </div>
  </body>
</html>

div :nth-child(2) {
  color:red;
}CSS

51. What is :hover CSS pseudo-class?

The

:hover CSS pseudo-class matches when the user interacts with an element with a pointing device but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

52. What is CSS transform property?

The CSS transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling.

.element { 
    width: 20px; 
    height: 20px; 
    transform: scale(20); 
}

53. What is CSS background-image property?

The background-image property sets a background image for an element.

body { 
    background-image: url(dog.jpg); 
}

54. Difference between css and scss ?

Here is a table comparing CSS and SCSS:

Feature	CSS	SCSS
Syntax	Simple and straightforward	More powerful and expressive
Variables	No built-in support	Variables can be defined and reused
Nesting	No built-in support	Styles can be nested within other styles
Mixins	No built-in support	Mixins can be defined and reused
Functions	No built-in support	Functions can be defined and used
Inheritance	No built-in support	Styles can inherit from other styles

In summary, while CSS is a simple styling language, SCSS is a more powerful and expressive language that offers additional features such as variables, nesting, mixins, functions, and inheritance.

CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions

CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions CSS Interview Questions