Top 25 interview questions of HTML and CSS

Jun 24, 2021 HTML, CSS, ShibamDhar, 1061 Views

Interview Questions of HTML and CSS

Top 25 interview questions of HTML and CSS

1.Name some common lists that are used when designing a page.

There are many common lists used for design a page. You can choose any or a combination of the following list types:

Ordered list – The ordered list displays elements in a numbered format. It is represented by <ol> tag.
Unordered list – The unordered list displays elements in a bulleted format. It is represented by <ul> tag.
Definition list – The definition list displays elements in definition form like in a dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

2.What are Tags?

HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are unclosed tags.

HTML documents contain two things:

content, and
tags

When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

3.What are the different ways you could integrate CSS into your HTML page?

There are three ways that you could integrate a certain CSS style:

You can integrate your style using the style-tags in the head section of your HTML page.
You can integrate your style using inline-styling.
You can write your CSS in a separate file and add it to your HTML page using the link tag.

4.How can we include audio or video in a webpage?

HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly in the webpage.

5.What is the origin of CSS ?

Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

6.What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML   tag is not used for bold statement as well as   tag is used for italic. Instead of these we use  and  tags.

7.Do all HTML tags have an end tag?

No. There are some HTML tags that don't need a closing tag. For example: <image> tag, tag.

8.What is the meaning of cascading? How do style sheets cascade?

CSS brought about a revolution in web-development and how people perceive the process of building a website. Prior to the existence of CSS, elements had to be styled in an in-line fashion or the style were implemented in the head section of an HTML page. This was changed due to the cascading nature of CSS. Here are the three major ways CSS cascades:

Elements – The same CSS style can be applied to multiple elements to achieve the same style.
Multiple Style One Element – Multiple styles can be applied to a particular HTML element to achieve a unique style.
Same style, Multiple Pages – The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.

9.Are the HTML tags and elements the same thing?

No. HTML elements are defined by a starting tag, may contain some content and a closing tag.For example, <h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing tag.

10.What are the limitations of CSS ?

Limitations are:

Ascending by selectors is not possible
Limitations of vertical control
No expressions
No column declaration
Pseudo-class not controlled by dynamic behavior
Rules, styles, targeting specific text not possible

11.What is an image map?

An image map is used for linking many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to include as part of an image mapping.

12.How to insert a copyright symbol on a browser page?

You can insert a copyright symbol by using © or © in an HTML file.

13.Name a few prominent CSS frameworks.

Below are the prominent CSS frameworks in the web development industry today:

Bootstrap

Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. Bootstrap 4 is the newest version of Bootstrap

Foundation

Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions.

Semantic UI
Semantic UI is a modern front-end development framework, powered by LESS(CSS-preprocessor) and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience.
Ulkit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

14.What are void elements in HTML?

HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example , <img />, <hr />, etc.

15.Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

16.What benefits and demerits do External Style Sheets have?
Benefits:

One file can be used to control multiple documents having different styles.
Multiple HTML elements can have many documents, which can have classes.
To group styles in composite situations, methods as selector and grouping are used.

Demerits:

Extra download is needed to import documents having style information.
To render the document, the external style sheet should be loaded.
Not practical for small style definitions.

17.What is the difference between , tags and , tags?

The effect on a normal webpage of the tags , and , is the same. and tags stands for bold and italic. These two tags only apply font styling and bold tag , just adds more ink to the text, these tags don't say anything about the text.

Whereas, and tags represents that the span of text is of strong importance or more importance and emphatic stress respectively, than the rest of the text. These tags have semantic meaning.

18.Explain the CSS Box Model and its different elements.

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas.

The CSS box model is responsible for calculating:

How much space a block element takes up.
Whether or not borders and/or margins overlap, or collapse.
A box’s dimensions.

The box model has the following rules:

The dimensions of a block element are calculated by width, height, padding, borders, and margin.
If no height is specified, a block element will be as high as the content it contains, plus padding.
If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.
The height of an element is calculated by the content’s height.
The width of an element is calculated by the content’s width.
By default, padding and border are not part of the width and height of an element.

19.Does a hyperlink only apply to text?

No, you can use hyperlinks on text and images both. The HTML anchor tag defines a hyperlink that links one page to another page. The "href" attribute is the most important attribute of the HTML anchor tag.

20.What are the tags used to separate a section of texts?

There are three tags that can be used to separate the texts:

  tag – Usually tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line
 tag – This contains the text in the form of a new paragraph.
<blockquote> tag – It is used to define a large quoted section. If you have a large quotation, then put the entire text within
<blockquote>……….</blockquote> tag.

21.Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a “%” followed by hexadecimal digits.

22.Can you create a multi-colored text on a web page?

Yes. To create a multicolor text on a web page you can use for the specific texts you want to color.

23.What are pseudo-elements in CSS?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: ...) without having to modify the markup (:before, :after).

:first-line and :first-letter can be used to decorate text.
Triangular arrows in tooltips use :before and :after. This encourages separation of concerns because the triangle is considered a part of styling and not really the DOM. It’s not really possible to draw a triangle with just CSS styles without using an additional HTML element.

24.How is Cell Padding different from Cell Spacing?

Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or gap between the text/ content of the cell and the edge/ border of the cell. Please refer to the above figure example to find the difference.

25.Why is it easy to insert a file by importing it?

Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions.

Syntax:

@import notation, used with <Style> tag.

Resources :

Top 25 interview questions of HTML and CSS