HTML & CSS

HTML and CSS Interview Questions

-------------------------------------------------------------------------------------------------------------------------------------

1) What is HTML?

HTML is short for HyperText Markup Language and is the language of the World Wide Web. 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?

Content is placed in between HTML tags in order to properly format it. It makes use of the less than symbol (<) and the greater than symbol (>). A slash symbol is also used as a closing tag. For example:

   <strong>sample</strong>

 
3) Do all HTML tags come in a pair? 

No, there are single HTML tags that do not need a closing tag. Examples are the <img> tag and <br> tags.
 

4) What are some of the common lists that can be used when designing a page? 

You can insert any or a combination of the following list types:
– ordered list
– unordered list
– definition list
– menu list
– directory list
Each of this list types makes use of a different tag set to compose.
 

5) How do you insert a comment in HTML? 

Comments in HTML begins with “<!–“nd ends with “–>”. For example: 

  <!-- A SAMPLE COMMENT -->
 

6) 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, <br> tag.
 

7) What is formatting in HTML?

The HTML formatting is a process of format the text for a better look and feel. It uses different tags to make text bold, italicized, underlined.
 

8) How many types of heading does an HTML contain? 

The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each type of heading tag displays different text size from another. So, <h1> is the largest heading tag and <h6> is the smallest one.
 

9) How to create a hyperlink in HTML? 

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:

• Unvisited link - It is displayed, underlined and blue.
• Visited link - It is displayed, underlined and purple.
• Active link - It is displayed, underlined and red.

 
10) Which HTML tag is used to display the data in the tabular form? 

The HTML table tag is used to display data in tabular form (row * column). It also manages the layout of the page, e.g., header section, navigation bar, body content, footer section.
 

11) Do all character entities display properly on all systems? 

No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.
 

12) 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.
 

13) What is the advantage of collapsing white space? 

White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.
 

14) Can attribute values be set to anything or are there specific values that they accept? 

Some attribute values can be set to only predefined values. Other attributes can accept any numerical value that represents the number of pixels for a size.
 

15) How do you insert a copyright symbol on a browser page? 

To insert the copyright symbol, you need to type &copy; or & #169; in an HTML file.
 

16) How do you create links to sections within the 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=”#topmost”>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=”topmost”> 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”.
 

17) Is there any way to keep list elements straight in an HTML file? 

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.
 

18) If you see a web address on a magazine, to which web page does it point? 

Every web page on the web can have a separate web address. Most of these addresses are relative to the top-most web page. The published web address that appears within magazines typically points this top-most page. From this top level page, you can access all other pages within the website.
 

19) What is the use of alternative text in image mapping? 

When you use image maps, it can easily become confusing and difficult to determine which hotspots correspond to which links. Using alternative text lets, you put a descriptive text on each hotspot link.
 

20) Do older HTML files work on newer browsers? 

Yes, older HTML files are compliant to the HTML standard. Most older files work on the newer browsers, though some features may not work.
 

21) Does a hyperlink apply to text only? 

No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the <a href=” “>…</a> tag combinations.
 

22) If the user’s operating system does not support the needed character, how can the symbol be represented? 

In cases wherein their operating system does not support a particular character, it is still possible to display that character by showing it as an image instead.
 

23) How do you change the number type in the middle of a list? 

The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.
 

24) What are style sheets? 

Style sheets enable you to build consistent, transportable, and well-defined style templates. These templates can be linked to several different web pages, making it easy to maintain and change the look and feel of all the web pages within site.

25) What is CSS? 

CSS outlines the style of an HTML webpage. It is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen.

CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet.
 

26) 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.

 
27) Distinguish between CSS2 and CSS3. 

The differences between CSS2 and CSS3 are as follows: 

• CSS3 is divided into two various sections which are called a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
• CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
• In CSS3, we will find that many graphics related characteristics have been introduced like Border-radius or box-shadow, flexbox.
• In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

28) Cite different types of CSS. 

There are three types of CSS as mentioned below:

• External: These are written in separate files.
• Internal: These are cited at the top of the web page code document.
• Inline: These are written right next to the text. 

29) Why is the external style sheet useful? 

External style sheet is very useful as we write all the styling codes in a single file and it can be used anywhere by just referring to the link of that external style sheet file.

So, if we do any changes in that external file, then the changes can also be observed on the webpage. Thus we can say that it is very useful and it makes your work easy while working on larger files.
 

30) What are the uses of an embedded style sheet? 

Embedded style sheet gives us the privilege to define styles in one place in an HTML document.

We can generate multiple classes using an embedded style sheet to use on multiple tag types of a web page and also there is no extra downloading required for importing the information.
 

31) Explain the concept of Tweening.

Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.

It is mainly used for creating animation.
 

32) Define CSS image scripts. 

CSS image scripts are a group of images that are placed into one image. It reduces the load time and request number to the server while projecting multiple images into a single web page.
 

33) Explain the term Responsive web design. 

It is a method in which we design and develop a web page according to the user activities and conditions which are based on various components like the size of the screen, portability of the web page on the different devices, etc. It is done by using different flexible layouts and grids.
 

34) What are CSS counters? 

CSS counters are variables that can be incremented by rules of CSS that inspector track how many times the variable has been used.
 

35) What is CSS specificity? 

CSS specificity is a score or rank that decides which style declaration has to be used to an element. (*) this universal selector has low specificity while ID selectors have high specificity. 

There are four categories in CSS which authorize the specificity level of the selector.

• Inline style
• IDs
• Classes, Attributes, and pseudo-classes.
• Elements and pseudo-elements.

 
36) How can we calculate specificity? 

To calculate specificity we will start with 0, then we have to add 1000 for each ID and we have to add 10 to the attributes, classes or pseudo-classes with each element name or pseudo-element and later we have to add 1 to them.
 

37) How will you add border images to an HTML element?

We can set the image to be used as the border-image alongside an element by using the property of CSS “border-image”.
 

38) What are gradients in CSS? 

It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors.

There are two types of gradients that are present in CSS. They are:

• Linear Gradient
• Radial Gradient

 
39) What is CSS flexbox? 

It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.
 

40) Write all the properties of the flexbox. 

There are several properties of the flexbox that are used in the HTML webpage.

They are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

 -------------------------------------------------------------------------------------------------------------------------------------