fbpx

Top 100 HTML CSS Interview Questions and Answers

Top 100 HTML CSS Interview Questions and Answers
Contents show

1. What is HTML?

HTML (Hypertext Markup Language) is a standard markup language for creating web pages. It defines the structure and layout of a webpage.

   <!DOCTYPE html>
   <html>
   <head>
       <title>My Webpage</title>
   </head>
   <body>
       <h1>Hello, World!</h1>
   </body>
   </html>

2. What is CSS?

CSS (Cascading Style Sheets) is used for styling HTML elements, controlling layout, and applying visual effects.

   h1 {
       color: blue;
       font-size: 24px;
   }

3. Explain the box model in CSS.

The box model consists of content, padding, border, and margin. It defines how elements are rendered and spaced.


4. What is the purpose of the ‘DOCTYPE’ declaration?

It specifies the document type and version of HTML being used, which helps browsers render the page correctly.

   <!DOCTYPE html>

5. How can you link an external CSS file to an HTML document?

Use the <link> element in the <head> section of the HTML document.

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

6. Explain the difference between ‘inline’ and ‘block’ elements in HTML.

Inline elements do not start on a new line and only take up as much width as necessary, while block elements start on a new line and take up the full width available.


7. What is the ‘float’ property in CSS used for?

The float property is used to specify whether an element should float to the left or right of its container.

   .float-left {
       float: left;
   }

8. How can you center align an element horizontally in CSS?

Use margin: 0 auto; on a block-level element.

   .centered {
       margin: 0 auto;
   }

9. Explain the concept of responsive web design.

Responsive web design is an approach that ensures web pages look and function well on various devices and screen sizes.


10. What is a CSS selector?

A CSS selector is used to target HTML elements and apply styles to them.

```css
p {
    color: red;
}
```

11. Describe the ‘box-sizing’ property in CSS.

It determines how an element’s total width and height are calculated. The default is ‘content-box,’ which includes only the content, but ‘border-box’ includes padding and border.

```css
.box {
    box-sizing: border-box;
}
```

12. What is the ‘position’ property in CSS used for?

It defines how an element is positioned within its containing element. Values include ‘static,’ ‘relative,’ ‘absolute,’ and ‘fixed.’

```css
.absolute {
    position: absolute;
    top: 10px;
    left: 20px;
}
```

13. How can you create a navigation bar using HTML and CSS?

Use an unordered list (<ul>) for the menu items and style them with CSS.

```html
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
```

```css
.nav {
    list-style: none;
}
.nav li {
    display: inline;
}
```

14. Explain the ‘z-index’ property in CSS.

It determines the stacking order of elements. Elements with a higher ‘z-index’ value are displayed on top of elements with lower values.

```css
.top {
    z-index: 2;
}
```

15. What is the purpose of media queries in CSS?

Media queries allow you to apply different styles based on the characteristics of the device, such as screen width.

```css
@media screen and (max-width: 600px) {
    /* Styles for small screens */
}
```

16. Describe the difference between ‘padding’ and ‘margin’ in CSS.

‘Padding’ is the space inside an element, while ‘margin’ is the space outside an element.


17. How can you make a hyperlink open in a new tab/window?

Add the target="_blank" attribute to the <a> element.

```html
<a href="https://example.com" target="_blank">Visit Example</a>
```

18. Explain the ‘display’ property in CSS.

It controls how an element is displayed. Common values include ‘block,’ ‘inline,’ ‘none,’ and ‘inline-block.’

```css
.block {
    display: block;
}
```

19. What is the ‘pseudo-class’ in CSS?

A pseudo-class is used to define a special state of an element, like :hover for mouse-over effects.

```css
a:hover {
    color: green;
}
```

20. How do you include comments in HTML and CSS?

In HTML, use <!-- comment -->. In CSS, use /* comment */.


21. Explain the ’em’ and ‘rem’ units in CSS.

’em’ is relative to the font-size of its nearest parent, while ‘rem’ is relative to the root (html) font-size.

```css
.text {
    font-size: 1.5em;
}
```

22. What is the CSS ‘flexbox’ layout model used for?

Flexbox is used for creating flexible and efficient layouts, especially for complex structures.

```css
.container {
    display: flex;
    justify-content: space-between;
}
```

23. Describe the purpose of ‘box-shadow’ in CSS.

It adds a shadow effect to an element, allowing you to control the shadow’s color, size, and position.

```css
.box {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
```

24. How can you include custom fonts in your CSS?

Use the @font-face rule to specify custom fonts and link to their source files.

```css
@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff') format('woff');
}
```

25. Explain the concept of ‘grids’ in CSS.

CSS Grid Layout is a two-dimensional grid system for creating complex layouts with rows and columns.

```css
.grid-container {
    display: grid;
    grid
-template-columns: 1fr 1fr 1fr;
}
```

26. How can you create a fixed navbar that stays at the top of the page even when scrolling?

Use position: fixed; and set top: 0; to keep the navbar at the top.

.navbar {
    position: fixed;
    top: 0;
}

27. Explain the purpose of the ‘flex-grow’ property in CSS.

flex-grow determines how much an item should grow relative to the other items in the flex container.

.item {
    flex-grow: 1;
}

28. How do you create a gradient background in CSS?

Use the background property with the linear-gradient function.

.element {
    background: linear-gradient(to right, #FF5733, #FFC300);
}

29. Describe the purpose of the ‘object-fit’ property in CSS.

object-fit specifies how an element’s content should fit within its container.

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

30. What is the role of the ‘viewport’ meta tag in HTML?

The viewport meta tag sets the viewport’s width and initial zoom level, ensuring a webpage is displayed correctly on various devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

31. How can you create a responsive grid layout using CSS Grid?

Define a grid container and specify the number of columns and rows using grid-template-columns and grid-template-rows.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

32. Explain the ‘clearfix’ technique in CSS.

The ‘clearfix’ technique is used to contain floated elements within a container and prevent layout issues.

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

33. How do you create a dropdown menu in HTML and CSS?

Use nested <ul> elements and style them using CSS. Use :hover to show/hide the submenu.

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
        <ul class="submenu">
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
.submenu {
    display: none;
}
.menu li:hover .submenu {
    display: block;
}

34. What is the purpose of the ‘transition’ property in CSS?

The transition property is used to smoothly animate changes in CSS properties over a specified duration.

.box {
    transition: background-color 0.5s;
}

35. How can you create a responsive image in HTML?

Use the <img> element with the max-width: 100%; CSS rule to ensure the image scales with the container.

<img src="image.jpg" alt="Responsive Image" style="max-width: 100%;">

36. Describe the purpose of the ‘position: sticky;’ property in CSS.

position: sticky; is used to make an element stick to the viewport when the user scrolls to a certain point.

.sticky-element {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

37. What is the purpose of the ‘transform’ property in CSS?

The transform property is used to apply transformations like scaling, rotating, or skewing to an element.

.transformed-element {
    transform: rotate(45deg);
}

38. What is the purpose of the ‘viewport units’ in CSS?

Viewport units are relative units based on the viewport’s dimensions. vw is 1% of the viewport width, and vh is 1% of the viewport height.

.full-width {
    width: 100vw;
}

39. How do you apply custom styles to the first letter of a paragraph using CSS?

Use the ::first-letter pseudo-element.

p::first-letter {
    font-size: 150%;
}

40. Explain the ‘pseudo-element’ in CSS.

A pseudo-element is used to style a specific part of an element, like ::before or ::after.

.element::before {
    content: "Before Content";
}

41. What is the purpose of the ‘grid-template-columns’ property in CSS Grid?

grid-template-columns sets the number and size of the columns in a grid container.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

42. How can you create a circular element using CSS?

Use border-radius with a value of 50% to create a circular shape.

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

43. Explain the purpose of the ‘box-sizing’ property in CSS.

It determines how an element’s total width and height are calculated. The default is ‘content-box,’ which includes only the content, but ‘border-box’ includes padding and border.

.box {
    box-sizing: border-box;
}

44. How can you create a responsive video element in HTML?

Set the max-width of the video to 100%.

<video src="video.mp4" controls style="max-width: 100%;"></video>

46. How can you include custom fonts in your CSS?

Use the @font-face rule to specify custom fonts and link to their source files.

@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff') format('woff');
}

47. Explain the concept of ‘pseudo-class’ in CSS.

A pseudo-class is used to define a special state of an element, like :hover for mouse-over effects.

a:hover {
    color: green;
}

48. What is the purpose of media queries in CSS?

Media queries allow you to apply different styles based on the characteristics of the device, such as screen width.

@media screen and (max-width: 600px) {
    /* Styles for small screens */
}

49. Describe the difference between ‘padding’ and ‘margin’ in CSS.

‘Padding’ is the space inside an element, while ‘margin’ is the space outside an element.

.element {
    padding: 10px;
    margin: 10px;
}

50. How do you make a hyperlink open in a new tab/window?

Add the target="_blank" attribute to the <a> element.

<a href="https://example.com" target="_blank">Visit Example</a>

51. What is the purpose of the ‘display’ property in CSS?

It controls how an element is displayed. Common values include ‘block,’ ‘inline,’ ‘none,’ and ‘inline-block.’

.block {
    display: block;
}

52. What is the ‘pseudo-class’ in CSS?

A pseudo-class is used to style a specific state of an element, like :hover for mouse-over effects.

a:hover {
    color: green;
}

53. How do you include comments in HTML and CSS?

In HTML, use <!-- comment -->. In CSS, use /* comment */.

<!-- This is an HTML comment -->
/* This is a CSS comment */

54. Explain the ’em’ and ‘rem’ units in CSS.

’em’ is relative to the font-size of its nearest parent, while ‘rem’ is relative to the root (html) font-size.

.text {
    font-size: 1.5em;
}

55. What is the CSS ‘flexbox’ layout model used for?

Flexbox is used for creating flexible and efficient layouts, especially for complex structures.

.container {
    display: flex;
    justify-content: space-between;
}

56. How can you center an element both horizontally and vertically using CSS?

You can use the following CSS:

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

57. Explain the purpose of the ‘z-index’ property in CSS.

The z-index property controls the stacking order of elements. Elements with higher values are displayed in front of elements with lower values.

.element1 {
    z-index: 2;
}
.element2 {
    z-index: 1;
}

58. How do you create a responsive navigation menu without using JavaScript?

You can use CSS for a responsive navigation menu by utilizing media queries and the CSS display property.

@media screen and (max-width: 600px) {
    .nav-links {
        display: none;
    }
}

59. What is the purpose of the ‘position: relative;’ property in CSS?

position: relative; is used to position an element relative to its normal position.

.relative-element {
    position: relative;
    top: 20px;
    left: 30px;
}

60. How can you make an image a link in HTML?

Wrap the image element with an anchor <a> tag and set the href attribute.

<a href="destination.html">
    <img src="image.jpg" alt="Clickable Image">
</a>

61. Explain the difference between ‘inline’ and ‘inline-block’ in CSS.

inline elements flow in the same line, ignoring height and width, while inline-block elements flow in the same line but respect height and width.

.inline-element {
    display: inline;
}

.inline-block-element {
    display: inline-block;
}

62. What is the purpose of the ‘box-sizing: border-box;’ property in CSS?

box-sizing: border-box; includes padding and border in the element’s total width and height.

.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}

63. How can you hide an element on a web page?

You can use the CSS property display: none; or visibility: hidden;.

.hidden-element {
    display: none;
}

64. Explain the difference between ‘padding’ and ‘margin’ in CSS.

‘Padding’ is the space inside an element, while ‘margin’ is the space outside an element.

.element {
    padding: 10px;
    margin: 10px;
}

65. How do you make a hyperlink open in a new tab/window?

Add the target="_blank" attribute to the <a> element.

<a href="https://example.com" target="_blank">Visit Example</a>

66. What is the purpose of the ‘display’ property in CSS?

It controls how an element is displayed. Common values include ‘block,’ ‘inline,’ ‘none,’ and ‘inline-block.’

.block {
    display: block;
}

67. What is the ‘pseudo-class’ in CSS?

A pseudo-class is used to style a specific state of an element, like :hover for mouse-over effects.

a:hover {
    color: green;
}

68. How do you include comments in HTML and CSS?

In HTML, use <!-- comment -->. In CSS, use /* comment */.

<!-- This is an HTML comment -->
/* This is a CSS comment */

69. Explain the ’em’ and ‘rem’ units in CSS.

’em’ is relative to the font-size of its nearest parent, while ‘rem’ is relative to the root (html) font-size.

.text {
    font-size: 1.5em;
}

70. What is the CSS ‘flexbox’ layout model used for?

Flexbox is used for creating flexible and efficient layouts, especially for complex structures.

.container {
    display: flex;
    justify-content: space-between;
}

71. How do you apply CSS styles based on user interaction, like hovering over an element?

You can use pseudo-classes like :hover.

.button:hover {
    background-color: #3498db;
    color: #fff;
}

72. What is the purpose of the CSS ‘nth-child’ selector?

It selects elements based on their position in a parent element.

li:nth-child(odd) {
    background-color: #f2f2f2;
}

73. How do you create a responsive two-column layout with CSS?

Use CSS Flexbox or Grid.

.container {
    display: flex;
}

.column {
    flex: 1;
}

74. Explain the ‘float’ property in CSS.

The float property is used to push an element to the left or right and make it act as a block-level element.

.float-left {
    float: left;
}

75. How can you make text italic in CSS?

Use the font-style property.

.italic-text {
    font-style: italic;
}

76. What is the purpose of the ‘outline’ property in CSS?

It creates a line around an element, outside the border, to make it stand out.

.element {
    outline: 2px solid red;
}

77. How do you make a background image cover the entire element in CSS?

Use background-size: cover;.

.background-element {
    background-image: url('image.jpg');
    background-size: cover;
}

78. Explain the purpose of the ‘overflow’ property in CSS.

It controls what happens when content overflows its container.

.overflow-element {
    overflow: auto;
}

79. How do you create a CSS animation?

Use @keyframes and animation properties.

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 100px;
    }
}
.slide {
    animation: slide 1s forwards;
}

80. What is the purpose of the ‘cursor’ property in CSS?

It changes the mouse cursor when you hover over an element.

.link {
    cursor: pointer;
}

81. How can you vertically align text within an element in CSS?

Use line-height or flexbox.

.element {
    line-height: 2;
}

.container {
    display: flex;
    align-items: center;
}

82. Explain the purpose of the ‘letter-spacing’ property in CSS.

It controls the space between characters in text.

.spaced-text {
    letter-spacing: 2px;
}

83. How do you make an element’s background color semi-transparent?

Use the rgba() color function.

.element {
    background-color: rgba(255, 0, 0, 0.5);
}

84. What is the purpose of the ‘min-width’ property in CSS?

It sets the minimum width of an element.

.element {
    min-width: 300px;
}

85. How do you create a responsive, fixed-width container in CSS?

Use a combination of max-width and margin: 0 auto;.

.container {
    max-width: 1200px;
    margin: 0 auto;
}

86. How can you create a fixed navbar that stays at the top of the page even when scrolling?

To create a fixed navbar, use position: fixed; and set top: 0; in the CSS.

.navbar {
    position: fixed;
    top: 0;
}

87. Explain the purpose of the ‘flex-grow’ property in CSS.

The flex-grow property in CSS determines how much an item should grow relative to the other items in the flex container.

.item {
    flex-grow: 1;
}

88. How do you create a gradient background in CSS?

You can create a gradient background using the background property with the linear-gradient function.

.element {
    background: linear-gradient(to right, #FF5733, #FFC300);
}

89. Describe the purpose of the ‘object-fit’ property in CSS.

The ‘object-fit’ property in CSS specifies how an element’s content should fit within its container.

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

90. What is the role of the ‘viewport’ meta tag in HTML?

The viewport meta tag sets the viewport’s width and initial zoom level, ensuring a webpage is displayed correctly on various devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

91. How can you create a responsive grid layout using CSS Grid?

Define a grid container and specify the number of columns and rows using grid-template-columns and grid-template-rows.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

92. Explain the ‘clearfix’ technique in CSS.

The ‘clearfix’ technique is used to contain floated elements within a container and prevent layout issues.

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

93. How do you create a dropdown menu in HTML and CSS?

You can create a dropdown menu by using nested <ul> elements and styling them with CSS. Use :hover to show/hide the submenu.

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
        <ul class="submenu">
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
.submenu {
    display: none;
}
.menu li:hover .submenu {
    display: block;
}

94. What is the purpose of the ‘transition’ property in CSS?

The transition property is used to smoothly animate changes in CSS properties over a specified duration.

.box {
    transition: background-color 0.5s;
}

95. How can you create a responsive image in HTML?

To create a responsive image, use the <img> element with the max-width: 100%; CSS rule.

<img src="image.jpg" alt="Responsive Image" style="max-width: 100%;">

96. Describe the purpose of the ‘position: sticky;’ property in CSS.

position: sticky; is used to make an element stick to the viewport when the user scrolls to a certain point.

.sticky-element {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

97. What is the purpose of the ‘transform’ property in CSS?

The transform property is used to apply transformations like scaling, rotating, or skewing to an element.

.transformed-element {
    transform: rotate(45deg);
}

98. What is the purpose of the ‘viewport units’ in CSS?

Viewport units are relative units based on the viewport’s dimensions. vw is 1% of the viewport width, and vh is 1% of the viewport height.

.full-width {
    width: 100vw;
}

99. How do you apply custom styles to the first letter of a paragraph using CSS?

Use the ::first-letter pseudo-element.

p::first-letter {
    font-size: 150%;
}

100. Explain the ‘pseudo-element’ in CSS.

A pseudo-element is used to style a specific part of an element, like ::before or ::after.

.element::before {
    content: "Before Content";
}