In this article, I am providing top few useful HTML and CSS interview quetions which can be asked from a developer to check his/her skills in HTML and CSS.

HTML Interview questions

1. What are tags in HTML?

HTML is composed of tags and HTML tags are composed of three things, an opening tag, content of the tag and ending tag.  Some tags are unclosed tags like <br>, <image > etc.

2. How many types of heading does HTML contain?

HTML has 6 types of heading which starts from <h1> and ends at <h6>, here is the complete list

<h1>H1 Heading</h1>
<h2>H1 Heading</h2>
<h3>H1 Heading</h3>
<h4>H1 Heading</h4>
<h5>H1 Heading</h5>
<h6>H1 Heading</h6>
3.  How to create anchor link in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to another page.

<a href="/secondpage.html">Second page</a>
4. Does all tags in HTML have open and close tags?

No, not all HTML tags have ending tags.

5. Name five HTML tags which doesn't have end tags.

Break -  <br/>

Image - <image src="/url.png" />

Horizontal line - <hr/>

Meta tags - <meta name="description" content="Some content" />

Input - <input type="text" value="" />

6. How do you insert a comment in HTML?

Comments in HTML begins with "<!--" and ends with "-->". For example:

<!-- Comment here -->
7. What are the common list type which is used in HTML?

You can insert any or a combination of the following list types:

– ordered list:The ordered list displays elements in numbered format. It is represented by <ol> tag.

– unordered list:The unordered list displays elements in bulleted format. It is represented by <ul> tag.

– definition list: The definition list displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

8. What is an image map?

Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.

9. What is the advantage of collapsing white space?

Multiple images in HTML is treated as single space and the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces, which makes your HTML more readable and understandable.

10. How do you insert a copyright symbol on a browser page?

You can insert a copyright symbol by using &copy; or &#169; in an HTML file.

11. Can you create nested HTML pages?

We cannot have nested <html> tags but yes we can add another page HTML contents using iFrame

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes for another HTML page</h2>    
<p>Use the height and width attributes to specify the size of the iframe:</p>    
<iframe src="https://qawithexperts.com/" height="300" width="400"></iframe>    
</body>    
</html>
12. How to create links within same page?

Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href="#backtotop">BACK TO TOP</a>, which would result in the words "BACK TO TOP" appearing on the webpage and links to a bookmark named topmost.

You then create a separate tag command like <a name="backtotop"> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on "BACK TO TOP"

13.  What is marquee?

Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee> text </marquee> tag.

14. How to add background image in a web-page?

By adding background attribute to body tag in html, example

<body background = "/imageurl.png">
15.  How to keep list elements straights in html?

By using indents, you can keep the list elements straight. If you indent each subnested list in further than the parent list that contains it, you can at a glance determine the various lists and the elements that it contains.

16. What is canvas in HTML5?

Using html5 <canvas> element we can draw graphics on a web page. It gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
17. Name some new form elements introduced in HTML5?

Here are some form elements of HTML5

  • Color
  • Date
  • Datetime-local
  • keygen
  • datalist
  • output
  • telephone
  • url
  • search
18. What is SVG?

SVG stands for Scalable Vector Graphics. The HTML5 <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
19. What is URL encoding in HTML? and How URL is encoded in HTML?

URL is composed from a limited set of characters belonging to the ASCII character set. These characters include digits (0-9), letters(A-Z, a-z), and a few special characters ("-", ".", "_", "~").

ASCII control characters (e.g. backspace, vertical tab, horizontal tab, line feed etc), unsafe characters like space, \, <, >, {, } etc, and any character outside the ASCII charset is not allowed to be placed directly within URLs.

Example: One of the most frequent URL Encoded character you’re likely to encounter is space. The ASCII value of space character in decimal is 32, which when converted to hex comes out to be 20. Now we just precede the hexadecimal representation with a percent sign (%), which gives us the URL encoded value - %20.

CSS Interview questions

1. What is CSS?

CSS stands for Cascading stylesheet and it used to enhancing HTML web-page style by adding colors, fonts, and spacing to your web documents.

2. What is External style sheet and how you will use it?

External Style Sheet is the sheet which comprises of style information and can be connected with one or more HTML documents. With the help of External Style Sheet entire website can be formatted and styles just by editing one single file. The file is connected with HTML documents with the help of the LINK element which resides inside the HEAD element.

<link rel="stylesheet" href="url.css" />
3. Name Different versions of CSS.

CSS versions are:

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3
  • CSS 4
4. Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

5. In how many ways can a CSS be linked with a HTML web page?

There are 3 ways to links CSS with HTML web-page

  • Inline: Style attribute can be used to have CSS applied HTML elements.
  • Embedded: The <head>element can have a <style> element within which the CSS code can be placed.
  • External stylesheet, Linked/ Imported: CSS can be placed in an external file and linked via link element.
6. What are the advantages and disadvantages of External stylesheet?

Advantages of External Style Sheets are as follows :

  • With the help of External Style Sheets, the styles of numerous documents can be organized from one single file.
  • In External Style Sheets, Classes can be made for use on numerous HTML element types in many forms of the site.
  • In complex contexts, Methods like selector and grouping can be implemented to apply styles.

Disadvantages of External Style Sheets are as follows :

  • An extra download is essential to import style information for each file.
  • The execution of the file may be deferred till the external style sheet is loaded.
  • While implementing style sheets, we need to test Web pages with multiple browsers in order to check compatibility issues.
7. What is CSS selector?

A CSS selectors is used to select HTML elements based on their name,id,class and attribute. It is the part of a CSS rule that actually selects the content we want to style.

Example:

Id selector

#container {
width: 960px;
}

Class selector

.box{
width:100px
}
8. What are CSS media queries and what are they used for?

CSS media queries are the filters that make responsive web design (RWD) possible.

With the introduction of laptops, tablets, and smartphones with screens of varying sizes and aspect ratios, RWD is crucial for modern day app development.

For example, if we want to set the width of paragraph =100px in mobile screen not more than 600px, we can use media query like this

@media(max-width:600px)
{
   p{
     width:100px;
    }
}
9. What are CSS pre-processors?

A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors.

10. What is CSS box-model and name it's elements?

CSS Box Model is used when talking about design and layout. It is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.

Elements of CSS Box Model are

  • Content: Any text or images within the box.
  • Padding: The transparent area surrounding content.
  • Border: The border surrounding the padding.
  • Margin: The transparent area surrounding borders.
11. How to use @media?

@media can be used in media query to apply different styles for different media types or devices. It can be used to check many things, such as width and height of the view port.

12. What is attributes in CSS and how they used?

It is used to select elements with a specified attribute. It is possible to add css that have specific attributes or attribute values.

It is used to select elements with an attribute value containing a specified word.

Example:

a[href="#"] {
background-color: yellow;
}
13. What is tweening?

Also Known as in-betweening, it is the process of creating intermediary frames among two images to provide the appearance that the first image develops efficiently into the second image. It is a key process which is used in all types of animations.

Refined animation software permits you to find particular objects in an image and describe how they will be able to move and change throughout the tweening process.

14. What is the use of CSS image sprites?

It is a group of images mreged into one image.

A web page with multiple images can take a lot of time to load and uses multiple server requests to project the same.

With the help of image sprites, we can decrease the number of requests to the server and save time and bandwidth as well.

img.add { width: 60px; height: 55px; background: url (SpirteImage.png) 0 0; }
15. Define float property of CSS?

By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties.

16. Explain working of Z-Index in CSS?

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

17. List some CSS frameworks
  • Bootstrap
  • Semantic
  • Materialize
  • Bulma
  • Foundation etc
18. What is Pseudo-elements ?

Pseudo-elements are used to add special effects to some selectors. CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

You can read more here,  How to use the :after And :before Pseudo-Elements In CSS

19. How comments can be added in CSS?

The comments in CSS can be added with /* and */.

20. What is contextual selector?

Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors.

Example:

table p { color: red; }

this one is saying that you want to set the value for <p> tags that belongs to <table> tags

so whenever you have a <p> in a <table>, then it will get effected.

21. Name all the modules which are used in the current version of CSS.

There are several modules in CSS as stated below:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface.
22. Differentiate between inline and block element.

Inline element: Inline element does not have an element to set width and height and also it does not have the line break.

Example: <em>, <br/>, etc.

Block Elements: They can have line breaks, and we can set width/height of these elements.

Example: <div> <p>