Common HTML and CSS Interview Questions and Answers

Here have the most commonly asked HTML5 And CSS interview questions and answers.

1. Why do we use HTML5?

  • Better interactions.
  • Fresh code.
  • Cross-browser compatibility.
  • Smarter storage.

2. How do you open a popup window using HTML 5?

3. How do you pick a date in HTML?

4. What is the difference between HTML elements and tags?

  • Tag <p></p>
  • Elements <p>Hello world</p>

5. When you use <datalist> elements ?

<input list="cityName">
<datalist id="cityName">
<option value="United State of Noakhali">
<option value="Comilla">
<option value="Dhaka">
<option value="Jossor">
</datalist>

6. What is web storage in HTML5?

7. What do you use? when do you need to write a copyright sign In footer?

8. How to display mathematical expression use HTML?

9. Why doctype is important on the web page?

10. What is Microdata and why it needs it in HTML?

11.How many text formating elements in HTML5?

  • <strong> - Important text
  • <b> - Bold text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

12. What type of Graphics supports HTML5?

13. How many tags you don’t need to use after HTML5 release?

  • <canter>
  • <applet>
  • <bigcenter>

14. How do you write canvas in Html5?

<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="canvas" height="350px" width="350px">
Your browser doen't support canvas
<canvas/>
</body>
</html>

15. What the main tag migration between HTML4 to HTML5?

//HTML4
<div class="header>
<div class="menu>
<div class="post>
<div class="content>
<div class="footer>
//HTML5
<header>
<nav>
<article>
<section>
<footer>

16. What is the purpose of the ‘section’ tag in HTML5?

17. Why you use the “nav” tag instant of the list order method?

18. What is the anchor tag in HTML?

19. Why do you use the placeholder attribute in HTML5?

20. How you focus on a specific input field in HTML5?

21. How you use the SVG tag shortly without external support?

22. What do you know about web sockets API?

23. What is the default size for an HTML form field (type=text)?

24. Tall me two advantages of HTML5?

25. How longer life has local storage data?

26. How many media elements exist in HTML5?

27. Which HTML element for inserting a line break?

28. What is Vibration API in HTML5?

29. How many storage in HTML5?

30. How do you get user geolocation in HTML?

31. What is Web SQL?

32. What is SVG?

33. What are the limitations of Web Workers?

34. What is Web Storage?

35. Why you used `<cite>` tag in HTML5?

36.Why you used ‘<details> tag in HTML5 ?

37. Whatever is semantic HTML?

38. Define HTML’s largest heading?

39. What is Anchor tag and how can you open an URL into a new tab when clicked?

40. What do you know about Modernizr?

41. Why ‘lang’ attribute is important in HTML5?

42.What is HTML5?

43. What is target _blank in a href?

44. What is the use of `<fieldset>` tag in HTML5?

45. What is the difference between Progress Tag and Meter Tag?

46. What is the Contenteditable Attribute in HTML5?

47. What is the purpose of the Battery Status API in HTML5?

ref: MDN

48. What is the purpose of Frames?

49. What does HTML stand for?

50. Describe HTML.

51. What is the main difference between span and div?

52. HTML Paragraphs are blocking label element?

53. HTML Is Case Sensitive?

54. How can you provide additional information about an element?

55. Why heading important and why do you need it?

56. `span` tag is inline elements in HTML?

57. What tag uses to make an HTML Horizontal Rules?

58. How can you Highlight parts of a text?

59. How can you write a comment in HTML5?

60. What is the meta tag? why it’s important in HTML?

ref: w3school

61. Why Meta tags are used in HTML?

62. Which type of video formats are supported by HTML5?

63. Is audio tag supported in HTML 5?

64. How do you apply JavaScript code to an HTML web page?

Common CSS Interview Question With Answer

1. Explain the three main ways to apply CSS styles to a web page.

Using the inline style attribute on an element

<div>
<p style="color: maroon;"></p>
</div>

Using a <style> block in the <head> section of your HTML

<head>
<title>CSS Refresher</title>
<style>
body {
font-family: sans-serif;
font-size: 1.2em;
}
</style>
</head>

Loading an external CSS file using the <link> tag

<head>
<title>CSS Refresher</title>
<link rel="stylesheet" href="/css/styles.css" />
</head>

The first two are useful but you’ll almost always be loading external CSS files. It’s more maintainable to keep your styles in separate files, not to mention it’s a nice separation of concerns.

2. Could you describe the different kinds of selectors?

  • A tag references an HTML tag
  • A class references the class attribute on an HTML tag
  • Likewise, an ID references the id attribute on an HTML tag
<!-- tag -->
<section>
<!-- class -->
<div class="button-cta">
<!-- id -->
<a href="cta-click">Click me!</a>
</div>
</section>

3. Explain the three main ways to target elements.

  • By tag, e.g. you can target the body or p or span
  • By the class you’ve specified in your HTML. For example, if you have three list items with the class nav-item you can target them with .nav-item
  • By the ID you’ve specified in your HTML. For example, if you have a link with the ID home-button you can target it with #home-button
/* tag */
body { ... }
/* class */
.nav-item { ... }
/* id */
#home-button { ... }

Keep in mind that IDs should be unique, meaning that there should never be more than one item with a particular ID on a page. It’s also generally better to target tags for very generic, site-wide styles, and classes for more specific styles. You can use a unique class or modifier class instead of an ID if you really need to target a single item.

If you want to target something with two or more classes or IDs, simply concatenate them all together:

.button.nav { ... }

4. How do you target something inside or around another element?

If you’re wanting to style occurrences of a certain class inside another class, you can write the following:

.nav .nav-item { ... }

The above targets any .nav-item inside .nav. If you only want those that are immediately inside the .nav as opposed to any level deep, you can add the > character, like so:

.nav > .nav-item { ... }

Want to target a button only if it’s next to another button? The + character has got you covered:

.button + .button { ... }

5. What are pseudo elements and what are they used for?

They always start with a double colon — although a single colon is still allowed for backwards compatibility — and they look like this:

p::first-line { ... }
span::first-letter { ... }
::selection { ... }
.header::after { ... }
.tooltip::before { ... }

6. What are pseudo classes and what are they used for?

Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.

They all start with a single colon and look like this:

.link:hover { ... }
.link:active { ... }
.tab:first-child { ... }
.tab:last-child { ... }
.avatar:nth-child(2n) { ... }

7. What are attributes and how are they used?

You can target elements with particular attributes by using square brackets: [attribute="value"]. For example, you can target all input fields that are of type radio like so:

input[type="radio"] {
background-color: #eee;
}

Specificity

8. Can you describe the rules around specificity?

The following list displays the order of specificity, from low to high:

  1. Type selectors (e.g. h1) and pseudo-elements (e.g. ::before)
  2. Class selectors (e.g. .nav-item), attributes selectors (e.g. [type="radio"]) and pseudo-classes (e.g. :hover)
  3. ID selectors (e.g. #example)

This is the reason it’s unwise to use IDs to target specific elements, as they are of a higher specificity. Using it in too many places can backfire later on, where you end up trying to override those styles, which can be hard to do.

Also, the more selectors you use, the higher it ranks in terms of specificity, e.g. button.primary[target="_blank"] is more specific than simply button.

/* low specificity */
button { ... }
/* higher specificity */
button.primary[target="_blank"] { ... }

9. Should you use !important?

What !important does, is make that particular style have the highest specificity possible. Nothing else can override it, apart from another !important. You might be able to see where this is going, but once you start using them, you’ll almost certainly get into a position where you need to override a rule marked as !important, which forces you to use another one. And so the cycle continues.

/* high specificity */
.large .navigation.navigation-large {
font-size: 2em;
}
/* will override the above, but it's dangerous! */
.navigation {
font-size: 3em !important;
}

The CSS Box Model

10. How do margin, border and padding fit together in the box model?

The easiest way to understand is to look at a visual representation of it. Looking at the below image, the very centre rectangle is the size of your element. Immediately surrounding that is padding. Then comes the border, and only then comes the margin.

Padding adds bulk to your element, in between the border and the element. This means that if your element has a background color, that color will also fill the padding.

Margin adds empty space around your element. That means that the aforementioned background color will not fill the margin.

Interested in web development?

Learn all about it in our comprehensive (and free) ebook!

ENTER YOUR EMAIL ADDRESS

Fonts

11. What’s your preferred way of sizing fonts?

Defining your font sizes in em allows you to change the size of your text based on the size defined at a higher level. For example, if a container has specified a font-size of 2em, and you specify a font-size of 2em on an element inside that container, that element has an effective font-size of 4em! However, this can be a little confusing as you might not always see the size you expect!

.container {
font-size: 2em;
}
.container > p {
font-size: 2em; /* this is 2em x 2em = 4em! */
}

The rem unit was created to remedy that confusion. It scales well in the browser, just like em and px, but it uses a base size. From that, all further rem values are calculated. For example, if your base rem value is equal to 16px, then 1rem will always be equal to 16px, 2rem will always be equal to 32px, and so on.

Note: While I’ve explained these units using font-sizes, the same rules apply to any dimensions where you use px, em or rem.

12. What are web safe fonts and fallback fonts?

Media queries

13. How would you use media queries in a mobile-first approach?

The most common approach is the mobile-first one. All styles outside of media queries are targeted at mobile devices. Then, through progressively larger media queries, you can style larger screens one step at a time.

/* mobile styles */
body {
font-size: 1em;
}
/* desktop styles */
@media only screen and (min-width: 768px) {
body {
font-size: 1.5em;
}
}

Browsers

14. How do you handle browser differences in your user base?

Your biggest concern is legacy browsers. You may have seen jokes about Internet Explorer, and while the newer versions aren’t as bad, there are still a lot of people using older versions. These days it’s not uncommon to still support IE9, sometimes even IE8.

This can severely limit the kind of styles you can use, though most can be approximated using fallback styles. The @supports query in CSS can be very useful to scan if the user’s current browser has a certain feature. If they do, you can apply those styles without worry. If not, you can have some fallback styles as a backup.

For more information, have a look at the Mozilla documentation about @supports.

15. Do you use any tools for browser support?

16. Have you used Flexbox & CSS Grid before? What are the differences between them?

Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.

CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!

CSS preprocessors

17. Do you use any CSS preprocessors, and which do you prefer?

The main players are Sass (also referred to as SCSS), LESS and Stylus, although arguably Sass is the biggest. I’ll be using Sass in the following examples.

18. What is file splitting and why should you use it?

How you decide to split them up is up to you, but it can be useful to separate files by component. For example, you can have all your button styles in a file called _buttons.scss or all your header-specific styles in a file called _header.scss. Then, in your main file, say _app.scss, you can import those files by writing @import 'buttons';

This way you can also create separate stylesheets for separate areas of your website, where you might not need all styles. For example, if you have a web app, you probably don’t need to load all styles when people land on your homepage, when they haven’t even logged into your app yet. Simply create another file and import only those styles you need.

19. What are variables used for?

$primary-font-stack: 'Helvetica', sans-serif;
$primary-color: #fccd48;
body {
color: $primary-color;
font-family: $primary-font-stack;
}

20. What are functions/mixins?

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}

21. How do you select a tag with an attribute?

input[type="text"]{
//Code
}

22. How CSS style priority works?

23. What difference between VH and VW measurement units?

24. Which property is used to control the image background space?

25. Why CSS media queries used for?

26. What is a CSS preprocessor?

27. What is the box model in CSS?

  • border: The border enclosing the padding.
  • content: Any text or images within the box.
  • margin: The transparent area around borders.
  • padding: The transparent area inundating content.

28. What is the float in CSS?

29. What is the hover effect in CSS?

30. What is the use of z-index in CSS?

31. What is the difference between “display: none” and “visibility: hidden” in CSS?

32. What is the use of ! important? How we can use it?

33.Why CSS Transitions?

34. What does object-fit property do?

img {
width: 200px;
height: 400px;
object-fit: cover;
}

Become a world’s no 1 full-stack web developer. That’s why I am learning and mastering web development. I will not stop until I become the Web Development Hero.