{"id":9465,"date":"2021-07-20T14:07:10","date_gmt":"2021-07-20T14:07:10","guid":{"rendered":"https:\/\/www.monsterindia.com\/career-advice\/html-and-css-interview-questions-with-answers-9465\/"},"modified":"2025-07-29T11:22:46","modified_gmt":"2025-07-29T05:52:46","slug":"html-and-css-interview-questions-with-answers","status":"publish","type":"post","link":"https:\/\/www.foundit.sg\/career-advice\/html-and-css-interview-questions-with-answers\/","title":{"rendered":"Basic HTML and CSS Interview Questions with Answers"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Introduction&nbsp;<\/strong><\/h2>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\"><a title=\"https:\/\/www.monsterindia.com\/search\/html-jobs\" href=\"https:\/\/www.monsterindia.com\/search\/html-jobs\">HTML <\/a>is the abbreviation for HyperText Markup Language. HTML is the standard markup language to design the documents displayed on a web page. Different technologies like CSS (Cascading Style Sheets) and scripting languages such as Java can assist HTML. With the increasing use of HTML and CSS in the It industry, the <\/span>HTML CSS Interview questions<span style=\"font-weight: 400\"> are becoming common.&nbsp;<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Web browsers receive different HTML documents from the web servers or the local storage. Further, the web browser renders the documents on multimedia pages. HTML is used to describe the structure of the page systematically.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">HTML was developed by physicist Tim Berners Lee in 1980. Later, Lee wrote the browser and server software in 1990. The World Wide Web is based on HTML using the HyperText Transfer Protocol (HTTP).&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The use of HTML is extensive in designing the web. All the browsing runs on HTML. It is a basic and necessary thing if the IT industry is taken into account. One should know about HTML and its working. CSS is another essential component for the smooth functioning of the browsers.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">HTML and <a title=\"https:\/\/www.monsterindia.com\/career-advice\/top-40-css-interview-questions-and-answers\/\" href=\"https:\/\/www.monsterindia.com\/career-advice\/top-40-css-interview-questions-and-answers\/\">CSS Questions<\/a> are necessary for the interviews. Some of the<\/span> HTML CSS interview Questions<span style=\"font-weight: 400\"> are present in this article with their answers. If one goes through them thoroughly, one can crack the interview with a good HTML interview experience. In this article, you can find:<\/span><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Some general questions related to HTML and <a href=\"https:\/\/www.monsterindia.com\/search\/css-jobs\" title=\"https:\/\/www.monsterindia.com\/search\/css-jobs\">CSS\u00a0<\/a><\/span><\/li>\n\n\n\n<li><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">HTML interview questions<\/span><\/span><\/li>\n\n\n\n<li><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">CSS interview questions<\/span><\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Some general questions related to HTML and CSS&nbsp;<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">There are some general things about web designing and functioning. All the questions regarding the basic concepts are present below. It is necessary to go through the basic ideas for the minor problems to be fixed readily. Companies look for trained individuals. So, one must know about these things to have a good HTML CSS Interview experience.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>1. What is the DOM; tell us about the working of the DOM?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">DOM stands for Document Object Model. It is a cross-platform API that handles HTML documents as a tree consisting of the nodes. The nodes are element or text nodes that can be manipulated programmatically. Any visible changes made to these nodes are reflected live in the document. The changes made t9 the DOM nodes include changes in their styles, content, placement, etc.&nbsp;<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The DOM is designed to work independently of any other programming language. The structural representation of the document is available from a single, consistent API.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The common functions for selecting DOM nodes are document.getElementByld(), document,querySelector().<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">If the inner HTML property is set to a new value, the string runs through the HTML Parser. It offers an easy way to append dynamic HTML content to a node.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>2. List the differences between standards mode and quirk mode?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Layout emulates non-standard behaviour in Navigator 4 and Internet Explorer 5 in Quirk mode. The websites that were developed before the widespread adoption of the web standards specifically require this mode.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The behaviour is described by the HTML and CSS specifications in the Standards mode.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The browsers use a at the beginning of the document to determine whether the HTML document is in the Standard mode or Quirk mode.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>3. Can you tell us how absolute, relative, fixed, static, and sticky positions work?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The different&nbsp; positioning of the elements are classified as follows:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The absolute position places the element at the exact location where you want to place it. This position is set relative to the element&#8217;s parent. If no parent is available, then the relative place to the page itself.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Relative position signifies &#8220;relative to itself.&#8221; If the relative position is set on an element and no other positioning attributes, there will be no effects on its positioning. The s-element can be used, and the scope of absolutely placed child elements is limited.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The fixed element is positioned concerning the viewport window or the browser window itself. The viewpoint does not change on scrolling retaining the fixed element in the same place.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Static positioning is the default for all the page elements. Static is used to change the position of any element that got applied to an element outside your control.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Relative and fixed positioning hybridise to make a sticky positioning. Till a specific threshold, the element is treated to be relative. After that, it is treated as fixed.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>4. Tell us something about progressive rendering?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The rendering of the data as it is downloading is known as progressive rendering. It is a feature for documents having tons of text. The scroll bar gets shorter in length as more text comes in, and the vertical size of the document increases. The downloaded text is displayed immediately. It does not rely on the closing body or HTML tag. The entire page on the server is rendered.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>5. What is the difference between responsive design and adaptive design?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Various adjustments for the viewport size, resolution, usage contexts, etc., are made to improve the user experience using responsive and adaptive designs.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Responsive design is flexible. Responsive websites use flexible grids, media queries, and responsive images. It is to create a user experience that changes and flexes based on multiple factors.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Adaptive design is like a modern definition of progressive enhancement. Adaptive design detects the device and other features. Then it provides different features and Layouts that are appropriate for the device. So instead of having one flexible design in responsive design, many options are available with the adaptive response.<\/span><\/p>\n\n\n\n<p><strong>Read Also: <a href=\"https:\/\/www.foundit.sg\/career-advice\/cypress-interview-questions\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Most Asked Cypress Interview Questions<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>6. What are the things you can do to optimise a website&#8217;s responses?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The things we can do are:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">We should concatenate and compress CSS, JavaScript, and HTML files wherever possible.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Configure your server to deliver a Gzip file, cache resources, etc.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Set longer expiration dates on the HTTP headers so that you need not change them frequently.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Compress images wisely as they are among the heaviest files we share.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">We can optimise the delivery of the image content in the future.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Consider using WebP format for sharing images in the future rather than the conventional JPEG or PNG.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Use CDN or other domains to host your resources and leverage domain sharing.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>7. Expand the abbreviation CORS and talk about its use?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">CORS stands for Cross-Origin&nbsp; Resource Sharing. The browsers restrict the cross-domain HTTP requests initiated from within the scripts. CORS gives access to the web servers to control the cross-origin files. Thus, it enables the secure sharing of cross-domain data.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong>HTML Interview Questions<\/strong><strong>&nbsp;<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">HTML is a widely used language to create web pages. It is a thing that a candidate appearing for an <\/span><strong>HTML CSS interview<\/strong><span style=\"font-weight: 400\"> should know. Many questions asked in an <\/span><strong>HTML CSS Interview<\/strong><span style=\"font-weight: 400\"> are listed here. You can have a good interview experience if you go through these <\/span><strong>HTML CSS Interview questions<\/strong><span style=\"font-weight: 400\"> once.<\/span><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>8. Can you tell us something about semantic HTML?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">A Semantic HTML is a type of coding style. The use of HTML markup to reinforce the meaning or semantics of the content is called semantic HTML. The HTML tag is not used for a bold statement on semantic HTML.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>9. Why is it necessary to encode a URL in HTML?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">For encoding non-ASCII characters into a format that can be used over the internet, a URL is necessary. A URL is sent over the internet only by using the ASCII character set. Any characters outside the ASCII set should be converted. All non-ASCII characters are replaced by a &#8220;%&#8221; sign.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>10. Tell us something about SVG?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Two-dimensional vector and vector\/raster are described using HTML SVG. SVG images and their behaviours are defined in another set of files, known as XML files. So when you edit an XML file, you are editing an SVG image. Vector type diagrams like pie charts, 2-dimensional graphs in x-y coordinate systems use SVG.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>11. Can you tell us about the advantage of collapsing in the white space?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">A blank sequence of space characters is known as white space. It is treated as one single space character in HTML. The browser will collapse multiple spaces into one single space. It helps you to indent the text without worrying about the multiple spaces. It also enables you to organise the HTML content into a readable form.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>12. Tell me about the use of alternative text in image mapping?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">It becomes confusing to determine which link corresponds to which hotspot when using image mapping. You can put descriptive text over each hotspot using alternative text. It makes things simple and convenient.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>13. Are there any limits to the text field size?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Thirteen characters are the default size for a text field. You can also set the text field to as low as one using the size field attributes. The browser width determines the maximum value. You can never put the text width to zero. In case if you do so, the text width will automatically be set to thirteen characters.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>14. Differentiate between active links and the normal links?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The active link appears in blue. When the mouse cursor is over the active link, some browsers recognize the active link. Other browsers recognize the active link when the link has the focus. The normal link appears as normal text. This is because the mouse pointer does not move to this type of link.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>15. Tell me about the application cache in HTML5 and its use?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">When the web application is cached, it is known as the application cache. The application cache is accessible without an internet connection.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Some of the advantages of application cache are:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">It is possible to browse offline. As the information is available offline, the user can browse offline.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Speed- the speed increases as the coached content is loaded fast.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The load on the server reduces. This is because only the updated resources are to be downloaded from the server.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>16. List the differences between DIV and SPAN in HTML?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The SPAN element is in line. It is used for a small chunk of HTML inside the line, such as in a paragraph.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">A DIV or division element is a block line. It is equivalent to having a line break before and after it. It is used to group a large chunk of code.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>17. List the differences in the Local Storage and Session Storage objects?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The differences between Local Storage and Session Storage objects are:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The Local Object Stores have no expiry date and store the data indefinitely. The Session Storage objects can store the data only for a single session.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">When the data gets stored in the Local Storage, it does not get deleted when the window closes. But, this is not true for Session Storage. The data gets deleted if the window is closed.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The data in the Session Storage is accessible only through the current window. While the data available in the Local Storage is accessible through multiple windows.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>18. Tell the difference between HTML and XHTML?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">We can differentiate HTML and XHTML based on the following features:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">HTML is a standard generalized markup language. On the other hand, XML is an application of extensive markup language.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">HTML is a static web page in comparison to XML, which is a dynamic one.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">HTML allows the programmer to change the tags and minimize the attributes. In XHTML, the user needs to define a new tag whenever any changes are to be made.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Information can be displayed using HTML, whereas you can explain the content using XHTML.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>19. Tell us something about the web workers?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Web workers bring multi-threading to JavaScript if it lasts long. The script that runs in the background is known as a web-worker. It runs in the other thread without needing the page to wait for it to complete. The user can interact with the page when the web-worker runs in the background. To achieve parallelism, workers use thread-like message passing.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>20. Tell us about the Geolocation API used in HTML5?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The Geolocation API in HTML5 enables the users to share their physical location with the selected websites. JavaScript is capable of catching the latitude and longitude of the user. It sends the details to the backend server. It enables location-aware features like local businesses or showing their location on the map etc. Most of the apps are capable of using the Geolocation API feature today. This feature now works with a new property of the global navigator object. A geolocation object is a service object. It allows widgets to retrieve information about the user&#8217;s location from the device.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>21. What is the significance of the word Markup in HTML?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Markup refers to the sequence of characters or other symbols which we insert at certain places. These are inserted in a word or text file to indicate how the file should look when it is displayed or printed. Markup describes the logical structure of the document, which are also known as tags. There is a difference between elements and tags. HTML documents contain tags but not elements. Elements get generated only after the parsing step from tags.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>22. Is it possible that the HTML source is not viewable?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">No method or script makes the HTML source non-viewable. The following method can be tried if you are worried about your source code:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Create a web page in Macromedia Flash. The visitor will have to download the Macromedia Flash plug-in and would be unable to view the source code for the Flash applet.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Various scripts disable the right-click feature. It prevents the user from saving images or viewing the source code.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Several programs make the code unreadable. This will not stop someone from viewing the code but will make the understanding difficult.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">The <\/span><strong>HTML CSS Interview Questions <\/strong><span style=\"font-weight: 400\">mentioned above are very important with regards to HTML. HTML is the basic language used to design different World Wide Web pages. Along with being simple, it is one of the most widely used languages. Many websites are created using HTML. With the advancing time, the use of HTML is also advancing.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">If one is to appear for an interview in the IT sector, one should go through these questions. These questions help in articulating the knowledge one already has. <\/span><strong>HTML CSS Interview Questions<\/strong><span style=\"font-weight: 400\"> are gaining popularity nowadays. They are asked often; one is expected to know about these things. This list of <\/span><strong>HTML CSS Interview Questions <\/strong><span style=\"font-weight: 400\">will surely help you.<\/span><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong>CSS Interview Questions&nbsp;<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">CSS is a style sheet language. It is used for describing the presentation of a document written in a markup language such as HTML. CSS is an essential component of the World Wide Web, after HTML and JavaScript. It helps in separating the presentation of the content, including colours, layouts, fonts, etc. This improves the user experience and presentation of any document on the internet. It is very essential to know about CSS if you are interested in work in a related field. <\/span><strong>HTML CSS Interview questions<\/strong><span style=\"font-weight: 400\"> are common if you are appearing for the job interview. Below are some <\/span><strong>HTML CSS Interview questions <\/strong><span style=\"font-weight: 400\">that will help you to pass through the interview with a good interview experience.<\/span><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>23. How do the rules of CSS precedence\/cascading work? What effect does the important directive have on the rules?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">CSS style rules cascade in the order of their precedence. Firstly, Global style rules are applied to HTML, and the local style rules override them. So, for instance, the style defined in a style element overrides the style defined in the external style sheet.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The same goes for the inline style defined in HTML. It overrides the elements described somewhere else. The way to make your CSS cascade is important, but also apply the rules you feel to be most crucial. The rules having important properties will always be applied no matter where those rules appear in a CSS document. If you want to make sure that the property is always applied, then add a !Important Property tag to it.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>24. What are the different things that can be done with style sheets that can&#8217;t be done with HTML?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Many recent extensions to HTML are tentative and make crude attempts to control document layout. Style sheets go beyond the scope of every such extension. They can insert complex borders, margins, and spacing controls to most HTML elements. HTML browser extensions are used to add some properties, and style sheets further extend those capabilities. Background colours are assigned now to any HTML element and not only the BODY element.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>25. Why are fixed size fonts not preferred?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Fixed-size fonts render in the devices in very few cases. Fixed-size fonts can be an issue for many users. The size with which the developer is comfortable may not be suitable for many people. Several users have vision defects that can create problems in using the application. Many people may prefer more text on the screen. What is comfortable for person A may be uncomfortable for person B. Browsers usually have a default size of the fonts. If the user is uncomfortable with the default font size, the user can change to something more preferable. So, the font size should be left alone in the majority of the document. It can be fixed in some places, such as for the copyright or something similar.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>26.&nbsp;List some of the benefits of CSS Sprites?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">A page may have a large number of images that take a long to load. It is because each image sends a different HTTP request. Here, the concept of CSS Sprites is used. It combines various small images into one image and thus, sending one request and reducing the loading time.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">When a sprite sheet comes into use in CSS, various properties get used as a background image, background position, and background size.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>27. List the merits plus demerits of embedded style sheets?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The merits plus demerits of embedded style sheets are as follows:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Merits:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Several tag types are created in a single document.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">In a complex situation, styles are applied by Selector and grouping methods.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The extra download is not needed.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Demerits:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Multiple documents are not controlled together in CSS.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>28. What do you understand about a CSS Selector?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">CSS Selector is a string equivalent to that of an HTML element by which different declarations are made. These declarations are the links that can be referred to for linking HTML and Style Sheets in CSS Selector.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>29. Tell us something about contextual selector?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The selector used to select special occurrences of an element is called a contextual selector. Individual selectors should be written separately with space. In this kind of selector, only the last element of the pattern is addressed.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>30. What do you know about graceful degradation?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Even if the component fails, it can continue to work smoothly in the presence of graceful degradation. This feature is used nowadays in the latest applications. This feature is not available to everyone, but efforts are being made to deliver this feature to a comparatively large audience. If the image is not available for viewing, the text displays with the alt tag.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>31. Tell us something about Alternate Style Sheets?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The alternate style sheets option enables the user to see multiple versions of a page according to their needs and preferences. The user can select the style in which the page is displayed by using the view&gt;page style menu. It enables the user to choose the preferential style.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>32. What do you understand about CSS specificity?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">CSS specificity is a rank or score that decides the style of the declaration to be used by an element. (*) is a universal selector that has low specificity, and ID Selectors possess high specificity.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>33. What is the significance of the ruleset?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The function of the ruleset is to identify whether a selector can be attached with another selector or not. It has two parts:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Selector: It indicates the HTML element you want to style.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Declaration Block: The declaration Block can have more than one declaration separated by a semicolon.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>34. Tell us about the pseudo-elements and their uses?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">When particular parts of the element are to be designed rather than the whole element, the pseudo-elements come into use. You can use pseudo-elements to style the first line, first letter of the paragraph, the selected text, or anything you want.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>35. List some disadvantages of using CSS?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Some of the disadvantages of using CSS are:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">In CSS, ascending by selectors is not possible.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">The vertical controls are limited.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">There are no expressions in CSS.\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">There are no column declarations.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Pseudo-class is not controlled by dynamic behaviour.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Features like rules, styles, and targeting specific text are not possible with CSS.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>36. Describe the use of float property in CSS?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">With the use of the float property, the element is placed on the left or right side of its container, allowing text and in-line elements to wrap around it. The element remains the part of the flow even after being removed from the normal flow.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><strong><strong>37. Do you know how inheritance works in CSS?<\/strong><\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;font-family: verdana, geneva, sans-serif;font-size: 12pt\">Inheritance is a widely used concept in HTML and many programming languages. In CSS, Inheritance is used to define the hierarchy from top to bottom level. The child will certainly inherit the properties of its parents. Some restriction is also applied so that all the properties can not be inherited. Inheritance is passing the properties from the parent class, so the necessity of defining the properties again is finished. If the child uses the same properties, they are overridden by the child class.<\/span><\/p>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">The <\/span>HTML CSS Interview Questions<span style=\"font-weight: 400\"> listed above are of utmost importance for cracking an interview for an IT company. Making a website is one thing but making it presentable is also equally important. CSS is a feature used along with HTML to style documents. The users get a better internet experience when things are designed in a specific manner. It makes the stuff more appealing and attractive.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">CSS plays an important role in doing all this. It is important to have CSS knowledge as it is one of the most used features. Various <\/span>HTML CSS Interview Questions <span style=\"font-weight: 400\">present above are important. These questions are commonly asked. The bare minimum a candidate can know in the IT field is about HTML and CSS, so the candidates should make sure they are thorough with <\/span>HTML CSS Interview Questions.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">Most people are well-versed with the basics of HTML and CSS. The knowledge is immense, but there are glitches in putting that knowledge in words. Candidates are not able to aggregate the knowledge they have. They are unable to differentiate between the important things and the unnecessary ones. Reading helps, but compact and easy stuff is convenient to grab.&nbsp; Here, all the <\/span>HTML CSS Interview questions <span style=\"font-weight: 400\">are clubbed together so that you can have a basic idea about the kind of questions asked in the interviews. It will also help the candidates in doing a guided study and knowing all the essential things. By going through these questions, the candidates get confident for the interview along with gaining knowledge.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\">Make sure that you go through these <\/span>HTML CSS Interview Questions <span style=\"font-weight: 400\">to extract the maximum possible benefit out of them.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 12pt\"><span style=\"font-weight: 400\"><strong>More Resources:<\/strong> <a title=\"Urgent part time jobs in Chennai\" href=\"https:\/\/www.monsterindia.com\/search\/part-time-jobs-in-chennai\" target=\"_blank\" rel=\"noopener\">Urgent part time jobs in Chennai<\/a> | <a title=\"Weekend part time jobs in Bangalore\" href=\"https:\/\/www.monsterindia.com\/search\/part-time-jobs-in-bangalore\" target=\"_blank\" rel=\"noopener\">Weekend part time jobs in Bangalore<\/a>&nbsp;| <a href=\"https:\/\/www.monsterindia.com\/career-advice\/strengths-and-weaknesses-answers-for-hr-interviews\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.monsterindia.com\/career-advice\/strengths-and-weaknesses-answers-for-hr-interviews\/\" rel=\"noreferrer noopener\">Strengths and Weaknesses Answers For HR Interviews<\/a>&nbsp;| <a href=\"https:\/\/www.monsterindia.com\/career-advice\/angularjs-interview-questions-and-answers\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.monsterindia.com\/career-advice\/angularjs-interview-questions-and-answers\/\" rel=\"noreferrer noopener\">AngularJS Interview Questions and Answers<\/a><\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction&nbsp; HTML is the abbreviation for HyperText Markup Language. HTML is the standard markup language to design the documents displayed on a web page. Different technologies like CSS (Cascading Style Sheets) and scripting languages such as Java can assist HTML. With the increasing use of HTML and CSS in the It industry, the HTML CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9896,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[147],"tags":[],"class_list":{"0":"post-9465","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interview-questions"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts\/9465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/comments?post=9465"}],"version-history":[{"count":6,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts\/9465\/revisions"}],"predecessor-version":[{"id":48400,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/posts\/9465\/revisions\/48400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/media\/9896"}],"wp:attachment":[{"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/media?parent=9465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/categories?post=9465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.foundit.sg\/career-advice\/wp-json\/wp\/v2\/tags?post=9465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}