HTML and CSS Questions

HTML interview questions

1. What is difference between HTML and XHTML?

2. What are the building blocks of HTML5?

3. What are the semantic tags available in html5?
4. Why you would like to use semantic tag?
5. What does a <DOCTYPE html> do?
6. What happens when DOCTYPE is not given?
7. What are the new form elements in HTML5?
8. How many new form elements are introduced in html5?
9. Create a HTML form with below constraints?
10.What is difference between span tag and div tag?
11.What are optional closing tag?
12.What is a self closing tag?
13.Explain the difference between block elements and inline elements?
14.What are semantic and non-semantic elements?
15.What is the purpose of main element?

16.What are the semantic meanings for <section>, <article>, <aside>,

<nav>, <header>, <footer> and how should each be used in structuring
html markup?
17.When should you use section , div or article?

18.Can a web page contain multiple <header> elements? What

about <footer> elements?
19.What are the physical tags and logical tags in HTML?
20.What is Character Encoding?
21.What is the purpose of meta tags?
22.What does async and defer refer in script tag?
23.What is local storage in html5?
24.What is session storage in html5?
25.What is cookies in html5?
26.Describe the difference between a cookie, sessionStorage and
localStorage?
27.Does localStorage throw error after reaches maximum limits?
28.Why to use IndexedDB instead of WebSQL in HTML5?
29.Explain Application Cache in HTML5. OR What is a manifest file in HTML?
30.What is the purpose of cache busting and how can you achieve it?
31.What ARIA and screenreaders are, and how to make a website accessible?
32.How to use data- attribute in html5?
33.What is the purpose of the alt attribute on images?

34.What does enctype='multipart/form-data' mean?

35.What is difference between Select and Datalist?
36.Explain some of the pros and cons for CSS animations versus JavaScript
animations?
37.What does CORS stand for and what issue does it address?
 HTML and CSS Questions

38.Can you describe the difference between progressive enhancement and

graceful degradation?
39.What is the DOM? How does the DOM work?
40.How does the browser rendering engine work?
41.What is the difference between standards mode and quirks mode?
42.What is Critical Rendering Path?
43.What are the Benefits of Server Side Rendering (SSR) Over Client Side
Rendering (CSR)?
44.Name 3 ways to decrease page load?
45.Ways to improve website performance
46.Comparison of browsers engines like Chrome, Firefox, Internet explorer,
Safari?
47.What does the lang attribute in html do?
48.What is desktop first and mobile first design approach?
49.What are data- attributes good for?
50.Explain the difference between layout, painting and compositing?
51.Explain about HTML Layout Engines used by browsers?
52.How to make page responsive?
53.Does the following trigger http request at the time of page load?
54.List the API available in HTML5?
55.How geolocation api works in html5?
56.What is the use of WebSocket API?
57.Explain about HTML Canvas?
58.What is difference between SVG and Canvas?
59.Explain Drag and Drop in HTML5?
60.Explain Microdata in HTML5?
61.What are the HTML tags which deprecated in HTML5?
62.How you can Use Modernizr in HTML5?
63.What is progressive rendering?
64.What is an iframe and how it works?
65.Explain the use of rel="nofollow", rel="noreferrer", rel="noopener"
attribute?
66.How can you highlight text in HTML?
67.How can I get indexed better by search engines?
68.What is the difference between an "attribute" and a "property" in HTML?
69.How do you set IE compatibility mode?
70.What is an optional tag?
71.What is an HTML pre-processor? Have you used different HTML templating
languages before?
72.How do you change the direction of html text?
73.When is it appropriate to use the small element?
74.How do you serve a page with content in multiple languages?
75.What is the difference between <section> and <div>?
76.Discuss the differences between an HTML specification and a browser's
implementation thereof.
77.Why you would use a srcset attribute in an image tag? Explain the process
the browser used when evaluating the content of this attribute.
78.What is accessibility & ARIA role means in a web application?
79.Create a traffic signal light in html?
 HTML and CSS Questions

CSS interview Questions

1. What is CSS?
2. What is the use of css ruleset?
3. What are the possible ways to apply CSS styles to a web page?
4. What does the cascading portion of CSS mean?
5. Explain new features in CSS3?
6. What are the css selectors?
7. What is contextual selector?
8. What is the difference between Pseudo-classes and pseudo-elements?
9. What is Combinator selector?
10.What is the difference between class selectors and id selectors?
11.What is the difference between the “nth-child()” and “nth-of-type()”
selectors?
12.Explain CSS grid layout with example?
13.What is CSS flexbox?
14.Write all the properties of the flexbox?
15.When to use css grid and flexbox?
16.What is CSS BEM?
17.What are the benefits of using CSS sprites?
18.What is tweening in css?
19.Explain the difference between visibility: hidden; and display:
none;? What are the pros and cons of using display: none ?

20.What is the purpose of the z-index and how a stacking context is formed?
21.Explain CSS position Property?
22.What are the differences between relative and absolute in CSS?
23.The difference between block, inline and inline-block element?
24.What are counters in CSS3?
25.How do you specify units in the CSS?
26.Which one would you prefer among px, em, % or pt and why?
27.What is pseudo element and pseudo class?
28.Explain the CSS “box model” and the layout components that it consists
of?
29.How you would tell the browser in CSS to render your layout in different
box models?
30.What is the difference between border-box and content-box?
31.Explain the meaning of each of these CSS units for expressing length?
32.In CSS3, how would you select?
33.What is the purpose of the box-sizing property?
34.What is the difference between RGBa, HEX and HSLa?
35.What is CSS pre-processor?
36.What is the difference between "resetting" and "normalizing" CSS?
37.Explain CSS Block Formatting Context?
38.What is the float property and what float do?
39.Describe clear Property in css?
40.Explain the purpose of clearing floats in CSS?
41.What is a clearfix in CSS?
42.Does overflow: hidden create a new block formatting context?
43.How would you approach fixing browser-specific styling issues?
 HTML and CSS Questions

44.What are your favourite image replacement techniques and which do you
use when?
45.What are media queries? How could you apply css rules specific to a
media?
46.What is the use of @media only screen?

47.Does the screen keyword apply to the device's physical screen or the
browser's viewport?
48.How would you implement a web design comp that uses non-standard
fonts?
49.How a browser determines what elements match a CSS selector?
50.How can you load css resources conditionally?
51.What does * { box-sizing: border-box; } do? What are its
advantages?

52.List display property in CSS?

53.How is responsive design different from adaptive design?
54.What is retina graphics? What kind of techniques do you use to handle
images for retina screens?
55.Is there any reason you'd want to use translate() instead of absolute
positioning, or vice-versa?
56.The translate() function can move the position of an element on the z-
axis?
57.Tell what each of these tags do, if there are alternatives, which are
preferable, why?
58.What is At-Rule?
59.How can the gap under the image be removed?
60.What is progressive rendering?
61.What is mobile-first? Can you explain the difference between coding a
website to be responsive versus using a mobile-first strategy?
62.Which property is used to change the face of a font?
63.Which property is used to make a font italic or oblique?
64.Which property is used to create a small-caps effect?
65.Which property is used to increase or decrease how bold or light a font
appears?
66.Which property is used to add or subtract space between the letters that
make up a word?
67.Which property is used to add or subtract space between the words of a
sentence?
68.Which property is used to indent the text of a paragraph?
69.Which property is used to align the text of a document?
70.Which property is used to underline, overline, and strikethrough text?
71.Which property is used to capitalize text or convert text to uppercase or
lowercase letters?
72.Which property allows you to control the shape or appearance of the
marker of a list?
73.How do I restore the default value of a property?
74.What is specificity?
75.What do you know about CSS Transitions?
76.What are the different css filters you can use?
77.Enlist the various fonts properties?
78.Enlist the various background properties css?
79.What is the difference between em and rem units?
 HTML and CSS Questions

80.What does !important mean in CSS?

81.Does style2.css have to be downloaded and parsed before Paragraph 1 is

rendered on the page?

<head>
<link href="style1.css" rel="stylesheet">
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<link href="style2.css" rel="stylesheet">
</body>

82.Does style1.css have to be downloaded and parsed before style2.css can

be fetched?

<head>
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
</head>

83.What are the CSS positioning?

84.What is the difference between padding and margin?
85.What are gradients in CSS?
86.What is CSS opacity?
87.How is the concept of inheritance applied in CSS?
88.How do you handle browser differences in your user base?
89.What is Cascade?
90.What are CSS vendor prefixes?
91.What is DOM (Document Object Model) and how is it linked to CSS?
92.Explain the usage of "table-layout" property?
93.Does margin-top or margin-bottom have an effect on inline elements
94.How does Calc() work?
95.What do CSS Custom properties variables mean?
96.What is the difference between CSS variables and pre-processor(SASS,
LESS, Stylus) variables?
97.What are Vendor-Prefixes?
98.What is the property that is used for controlling image-scroll?
99.What is the overflow property in CSS used for?
100. What is word-wrapping in CSS?
101. What is Accessibility (a11y) in a web application?
102. What is UI/UX?
103. How do you serve your pages for feature-constrained browsers?
What techniques do you use?
104. What are the different ways to visually hide content (and make it
available only for screen readers)?
105. What is file splitting? When is it used?
 HTML and CSS Questions

106. What is DOM reflow?

107. How does CSS work under the hood?