HTML and CSS - Questions

1. What is HTML?

HTML stands for HyperText Markup Language. It is a markup language used to create the structure and content of a web page. We use HTML to create headings, paragraphs, tables, forms, and other elements.

2. What are HTML tags?

HTML tags are enclosed with angle bracket and used to define the elements of a web page.HTML tags tell the browser how to structure and display the content. For example, we use <h1> for headings.

3. What is the difference between an HTML tag and an HTML element

• An HTML tag is used to define the beginning or end of an element. For example, <p>is a tag.

• An HTML element usually contains the opening tag, content, and closing tag. For example, <p>Hello</p> is an HTML element.

4. What are semantic tags in HTML?

Semantic tags are HTML tags that clearly describe the meaning and purpose of the content. They make the code easier to understand and also help search engines and screen readers understand the structure of the page.

5. What is an HTML attribute?

An HTML attribute provides additional information about an HTML element.They are used to define or provide extra information about an element.It is written inside the opening tag as name-value pairs.

6. What is the difference between <div> and <span>?

<div> is a block-level container used to group larger sections or elements of a web page. It starts on a new line and takes the full available width by default.

<span>is an inline container used to group or style a small part of text or content. It does not start on a new line and takes only the required width.

7.What is a table in HTML?

An HTML table is used to organize and display data in rows and columns. We use the <table> tag to create a table. Inside the table, we use <tr> for rows, <th> for headings, and <td> for data.

8.What is the difference between block, inline, and inline-block?

• A block-level element starts on a new line and takes the full available width by default.
• An inline element does not start on a new line and takes only the required width.
• An inline-block element behaves like an inline element, but we can set its width and height.

9. What is a form in HTML?

An HTML form is used to collect information or input from users and send it to a server for processing. It is created using the

element, which acts as a container for interactive controls like text fields, checkboxes, and buttons.

10. What is the difference between <section> and <article>?

<section> is used to group related content under a particular section of a web page.
<article> is used for independent and self-contained content. For example, a blog post, news article, or product review can be an article.

11. What is CSS?

CSS stands for Cascading Style Sheets. It is used to style and design the HTML elements of a web page. We can use CSS to change the color, font, size, spacing, layout, and position of elements. It also helps us to make the web page responsive.

12. What are the different ways to apply CSS?

There are three ways to apply CSS to an HTML page: inline CSS, internal CSS, and external CSS.

• Inline CSS is written directly inside the HTML element using the style attribute.
• Internal CSS is written inside the <style> tag in the HTML file.
• External CSS is written in a separate .css file and connected to the HTML file using the tag.

13. What is the CSS Box Model?

The CSS Box Model describes how an HTML element takes up space on a web page. It consists of four parts: content, padding, border, and margin.

• Content → actual text or image inside the element.
• Padding → space between the content and border.
• Border → surrounds the content and padding.
• Margin → space outside the border.

14. What are CSS selectors?

• CSS selectors are used to select and target HTML elements that we want to style.
• There are different types of selectors, such as element selector, class selector, id selector, universal selector, and attribute selector.

15. What is box-sizing in CSS?

box-sizing is a CSS property used to control how the width and height of an element are calculated.

• content-box → width and height apply only to the content. Padding and border are added separately.
• border-box → width and height include the content, padding, and border.

16. What is Flexbox in CSS?

Flexbox is a one-dimensional layout system used to arrange elements in a row or column. It helps us to align and distribute elements easily.We can use properties like justify-content, align-items, flex-direction, and gap to control the layout.

17.What is the difference between justify-content & align-items?

justify-content is used to align and distribute items along the main axis, whereas align-items is used to align items along the cross axis.

18. What is CSS Grid?

CSS Grid is a two-dimensional layout system used to arrange elements in rows and columns. It helps us to create complex layouts easily.

19. What is the difference between Flexbox and Grid?

• Flexbox is a one-dimensional layout system, whereas Grid is a two-dimensional layout system.
• Flexbox is mainly used to arrange elements in a row or column. Grid is used to arrange elements in rows and columns together.

for example, I can use Flexbox for a navigation bar and Grid for a product layout.

20. What is CSS Position?

The position property in CSS is used to control the position of an element on a web page.It has five values: static, relative, absolute, fixed, and sticky.

21.What is the difference between relative and absolute position?

• position: relative moves an element from its normal position, and the original space of the element is still maintained.
• position: absolute removes the element from the normal document flow and positions it relative to its nearest positioned ancestor.

22. What is z-index in CSS?

z-index is a CSS property used to control the stacking order of overlapping elements.An element with a higher z-index value appears in front of an element with a lower value.

23. What is a media query in CSS?

A media query is used to apply different CSS styles based on the screen size or device.

It is mainly used to make a website responsive. For example, we can change the layout, font size, or width of elements when the screen size becomes smaller.

24. What is the difference between class and id?

• A class is used to group multiple HTML elements, and it is denoted by a dot (.) in CSS.
• An id is unique and is normally used for one specific element, and it is denoted by a hash (#) in CSS.

25. What is the difference between display: none and visibility: hidden?

• display: none completely removes the element from the page layout, so it does not take up any space.
• visibility: hidden makes the element invisible, but it still takes up space in the page layout.

26. What are lists in HTML?

• HTML lists are used to display a group of related items.There are three main types of lists: ordered list, unordered list, and description list.
• <ol> is used for an ordered list, <ul>is used for an unordered list, and <dl> is used for a description list. We use <li> to define list items in ordered and unordered lists.

27. What is the difference between GET and POST methods?

GET and POST are HTTP methods used to send data between the client and server.

• The GET method sends data through the URL, so it is generally used for retrieving data.
• The POST method sends data in the request body, so it is generally used for submitting or sending data to the server.