HTML and CSS Interview Questions
Day 1
HTML Interview Questions
1. What is HTML? Why it is used?
HTML is the language of World Wide Web. It stands for HyperText Markup Language. It is the standard text formatting language used for creating and displaying pages on the Web. HTML documents are made up of two things: the content and the tags that format it for proper display on pages.
2. What are tags? How many types of tags are there in HTML?
A tag instructs the Browser about how to format the HTML properly.
There are two types of tags, Paired and Singular. Paired tags have both opening and closing tag and singular tags are self-closing tag.
e.g — paired — <div></div>, <p></p>,
singular — <img/>, <br/>
3. Can you implement Data Structures, algorithms or OOP logic using html?
No. We can just arrange our texts using different HTML tags.
4. What is attributes in HTML tags?
An HTML attribute provides information about an HTML tag. e.g. <a href=”www.google.com”>This is a link</a>.
5. What is Doctype?
A doctype is an instruction which tells the browser about the markup language the web page is written.
6. Difference between head and header tag in HTML?
The head tag is used for document title, styling, scripts etc and the header tag is used for headings, captions, navbars etc. seen in the web page.
7. What is metadata?
Metadata is the information about webpage. The <meta> tag provides metadata about a webpage. Metadata will not be displayed in a web page, but it is machine parsible.
8. Difference between HTML and XHTML?
In HTML, the <meta> tag has no end tag. In XHTML, the <meta> tag should be properly closed.
9. Difference between XML and HTML?
XML is a markup language which is designed to store data. It is used for the transferring of data. It is case sensitive.
HTML is a markup language which is used create and design web content.
10. Say some new features of HTML5?
video, figure, section, nav, header, footer, audio, color, canvas etc.
11. What is semantic HTML?
A semantic HTML clearly describes its meaning to both browser and the user.
Non-semantic — <div> and <span> — Tells nothing about its content.
Semantic elements — <form>, <table>, and <article> — Clearly defines its content.
12. Say some new form elements in HTML5?
1) <datalist> — This tag is use to specify a list of options for input controls.
2) <keygen> — This tag represents a key-pair generator field.
3) <output> — It represents the result of any scripting calculation.
13. Describe article, section and figure tags?
The <article> element specifies independent, self-contained content.
The <section> element defines section in a document.
The <figure> element represents a piece of self-contained flow content. It is mostly used as a single unit as a reference the main flow of the document.
14. What does an iframe do?
The <iframe> tag is used show a webpage inside a webpage.
15. Describe inline and block elements in HTML?
Block elements are the blocks that take full available width and always start in a new line.
Inline elements are the elements that will only take the width that is required to fit into the container.
16. How many headings are there in HTML?
6. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. They are different based on size.
17. Describe Quarks mode in HTML?
If we do not include <!DOCTYPE> in our html page, the web page will open in quarks mode. Here, the html elements are dependent on browser. Hence the content will be displayed based on the browser.
18. Tell the purpose of HTML5?
Deliver rich contents like graphics, audio, video without external plugins.
Provide better semantic support for web page structure.
Prvovide better cross-platform support.
Provide stricter parsing to avoid error occurrence.
19. Where you define the character set used in HTML document?
Inside the meta tag. <meta charset=”UTF-8">.
20. Where do you import External css in html file?
Inside the head tag, declaring in link tag.
21. What’s one main result if you do not specify a doctype in an HTML page?
New HTML5-specific tags will not be interpreted by the browser.
22. What is the difference between <div> and <span>?
<div> is an block element and <span> is an inline element.
23. Tell the difference between tag and element?
HTML tag is just opening or closing entity. Whereas, HTML element is having text between opening and end of a tag.
Tag — <p></p>
Element — <p>The name is Bond, James Bond.</p>
24. What is grouping in HTML?
Grouping is used to group several HTML controls like input, textarea, selects as well as labels (<label>) within a web form.
25. What is Image map?
The Image map is an image with clickable areas. Here by clicking an image we can go to webpages. The <map> tag defines an image-map.
26. Does hyperlinks are only allowed to text?
No, hyperlinks can be used on both images and texts. We can do image hyperlinks using image map.
27. What is marquee?
HTML marquee is used for scrolling text on a web page. The <marquee> tag does this.
e.g.
<marquee>This is basic example of marquee</marquee>
<marquee direction = “up”>The direction of text will be from bottom to top.</marquee>
28. Describe blockquote tag in HTML?
The The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
e.g.
<blockquote>The name is bond, James Bond.</blockquote>
29. What is the purpose of using alternative texts in images?
The purpose of using alternative texts is to define what the image is about. When the image fails to load, the alternative text describes the image.
30. What are the entities in HTML?
The HTML entities are something that replaces reserved characters in HTML.
31. How can you implement CSS in HTML?
External- <link rel=’stylesheet’ type=’text/css’ href=’style.css’/>
Inline — <h1 style=”color:blue;”>This is a Blue Heading</h1>
Internal — <style>body {background-color: powderblue;}</style>
32. What is the difference between logical and physical tags in HTML?
Logical tags are used to tell the meaning of the enclosed tag. Physical tags are used to tell the browser how to display the tag.
Logical — <strong></strong>
Physical — <b></b>,<big></big>
33. Define the phrase tags in HTML?
em, strong, code, samp, kbd, var.
34. Define text formatting tags in HTML?
<b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>
35. What are the difference between SVG and Canvas?
SVG is highly scalable. Canvas is not that much scalable.
SVG provides better performance with smaller number of objects or larger surfaces. Canvas provides better performance with larger number of objects or smaller surfaces.
SVG can be modified through CSS and Script. Canvas can be modified through only script.
SVG in vector based and Canvas is raster based.
Canvas provides support for event handlers, SVG does not.
CSS Interview Questions
1. What is CSS? Why it is used?
CSS refers to Cascading Style Sheet. It is used to style and design web pages.
2. How can we define CSS to HTML tags?
We can define CSS by entering class and id to the HTML tags.
3. What are the differences between classes and IDs?
classes can be defined to one or more elements. But Id can be defined to only one element.
4. Name some CSS framworks?
Bootstrap, Bulma, Foundation.
5. What is embedded Style Sheet?
Embedded Style Sheet is a specification where all the CSS are written inside the <style> tag in an HTML document.
6. What are CSS selectors?
Selectors are used to select elements you want to style. There are several types of selectors in CSS.
CSS Element Selector
CSS ID Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
7. What are Pseudo classes and Pseudo elements?
A CSS pseudo-element is used to style specified parts of an element. It is represented using (::). A CSS pseudo-class is used to define a special state of an element. It is represented using (:).
They can be declared after each class, id, tag.
Pseudo Elements: p::after, p::before, p::first-letter, p::first-line, p::selection.
Pseudo Classes: a:active, input:checked, input:disabled, a:hover, p:first-child.
8. Explain Universal Selector?
The universal selector(*) matches the name of any element and applies CSS to them.
*{
background-color: black;
}
9. Can we set same CSS to multiple classes at a time?
Yes, we can select same CSS for multiple classes, elements and ids.
h2,p{
background-color: #b0d4de;
}
10. What are the uses of ruleset?
The ruleset is used to identify that selectors can be attached with other selectors. It has two parts:
Selector — Selector indicates the HTML element you want to style.
Declaration Block — The declaration block can contain one or more declarations separated by a semicolon.
11. What are the difference between visibility: hidden and display:none?
visibility: hidden and display:none both hides an element, but the first one affects layout and occupies space.
12. Explain z-index?
z-index specifies the stack order of the html elements. A higher value means an element will overlap another.
13. Explain position property in CSS?
Position properties specifies the type of positioning method to an element.
There are five different position values:
static
relative
fixed
absolute
sticky
static — default position.
relative — the position relative to its normal position.
fixed — the element is placed in a fixed position.
absolute — place an element exactly where you want to place it.
sticky — the element is positioned based on user’s scroll position.
14. How you can make rounded corners to a square shape?
By using border-radius.
15. What is media query?
Media queries make it possible to different style rules for different devices.
16. What is viewport?
The viewport is user’s visible area of a web page. Viewport varies based on device.
17. Tell some new features of CSS3?
box Shadow, opacity, border-radius, new colors(RGBA, HSL, HSLA, Gradient-colors)
18. What is CSS transition?
Transition allows you to change property values smoothly over a given period of time. Transition features,
transition
transition-delay
transition-duration
transition-property
transition-timing-function
19. What is CSS animation?
Animation allows the animated movements of HTML elements. Animation features,
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
20. Difference between Animation and Transition?
Animation makes animated movements for HTML elements. Transition changes values of HTML elements.
Animation does not change the value of element, but transition does.
Animation changes element’s style.
21. Describe CSS units?
CSS units allows you to specify the measurement of an element.
Absolute length — cm, mm, in, px, pt, pc etc.
Relative length — em, ex, ch, rem, vw, vh, vmax, vmin, %.
22. What are the difference between margin and padding?
Margin makes distance between the elements and padding makes distance inside an element.
23. Explain CSS all property?
The all property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value.
24. What is initial, inherit and unset?
Initial sets the default value to an element. Because every property has an initial value.
Inherit specifies the value of the parent element to an element.
Unset is a mixture of inherit and initial. If an element is inherited from another element it inherits their values to the element. Otherwise, it sets the initial value.
25. What is background-clip?
Background-clip defines how far the background should extend in an element.
26. What are the properties of box-model?
Height, width, padding, border are the properties of box model.
27. What does border do?
The CSS border properties allow you to specify the style, width and color of an element’s border.
e.g. border: 10px solid black;
28. Explain CSS overflow?
The css overflow property controls what happens to the content that is too big to fit into an area.
29. Explain CSS float and clear property?
The float property floats an element to a specific direction.
The clear property specifies what elements can float beside the cleared element and on which side. It specifies that which side of floating elements are not allowed to float.
The most common way to use the clear property is after you have used a float property on an element.
30. What are the difference between border-box and content-box?
Border-Box: The width and height properties include the content, padding, and border, but do not include the margin.
Content-Box: This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin.