Scribd
Upload
4 views9 pages

HTML, CSS

The document provides a comprehensive overview of HTML and CSS, detailing fundamental concepts, elements, and attributes used in web development. It covers topics such as tags, lists, forms, styling, positioning, and responsive design, along with differences between various elements and properties. The information serves as a foundational guide for understanding and utilizing HTML and CSS effectively.

Uploaded by

Ashlesha Karande
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views9 pages

HTML, CSS

The document provides a comprehensive overview of HTML and CSS, detailing fundamental concepts, elements, and attributes used in web development. It covers topics such as tags, lists, forms, styling, positioning, and responsive design, along with differences between various elements and properties. The information serves as a foundational guide for understanding and utilizing HTML and CSS effectively.

Uploaded by

Ashlesha Karande
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML

1. What is HTML?

Answer: HTML (HyperText Markup Language) is the standard markup language used to create web
pages. It structures content on the web.

2. What is a tag in HTML?

Answer: A tag is a keyword enclosed within angle brackets that defines how a browser should display
content.

3. What is the difference between HTML and XHTML?

Answer: HTML is less strict in syntax, whereas XHTML is an XML-based version of HTML with stricter
syntax rules.

4. What are void elements in HTML?

Answer: Void elements, like <img>, <br>, and <hr>, do not have closing tags.

5. What is the purpose of the <!DOCTYPE> declaration?

Answer: It informs the browser about the HTML version to render the page correctly.

6. What are the different types of lists in HTML?

Answer: Ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).

7. How do you create a hyperlink in HTML?

Answer: Use the <a> tag with the href attribute: <a href="url">link text</a>.

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

Answer: <div> is a block-level element used to group sections, whereas <span> is an inline element used
to group small sections within a block.

9. What is the use of the alt attribute in images?

Answer: It provides alternative text for an image, which is displayed if the image cannot be loaded.

10. How do you embed a video in HTML?

Answer: Use the <video> tag with src attribute: <video src="video.mp4" controls></video>.

11. What is the purpose of the <meta> tag?

Answer: It provides metadata about the HTML document, such as charset, author, and description.

12. What is the use of the target attribute in a link?

Answer: It specifies where to open the linked document. For example, target="_blank" opens the link in
a new tab.
13. What is an HTML attribute?

Answer: Attributes provide additional information about an element, typically in name-value pairs like
class="classname".

14. What are semantic HTML elements?

Answer: Elements that clearly describe their meaning to both the browser and the developer, such as
<header>, <footer>, and <article>.

15. How can you create a table in HTML?

Answer: Use <table>, <tr> (table row), <td> (table data), and <th> (table header) tags.

16. What is the difference between id and class in HTML?

Answer: id is a unique identifier for a single element, while class can be used on multiple elements.

17. How do you create a form in HTML?

Answer: Use the <form> tag with input fields like <input>, <textarea>, and <select>.

18. What is the purpose of the action attribute in a form?

Answer: It specifies where to send the form data when the form is submitted.

19. What are inline elements in HTML?

Answer: Elements that do not start on a new line and only take up as much width as necessary, such as
<a>, <span>, and <img>.

20. What are block-level elements in HTML?

Answer: Elements that start on a new line and take up the full width available, like <div>, <p>, and <h1>.

21. How do you make an image clickable in HTML?

Answer: Wrap the <img> tag inside an <a> tag: <a href="url"><img src="image.jpg"></a>.

22. What is the purpose of the name attribute in a form input?

Answer: It defines the key that is sent to the server with the form data.

23. How do you create a dropdown list in HTML?

Answer: Use the <select> tag with nested <option> tags.

24. What is the difference between <br> and <hr>?

Answer: <br> is used to insert a line break, while <hr> inserts a horizontal line.

25. How do you add comments in HTML?

Answer: Use <!-- Comment here -->.

26. What is the use of the <iframe> tag in HTML?


Answer: It is used to embed another HTML page within the current page.

27. What is the data-* attribute in HTML5?

Answer: It allows you to store custom data private to the page or application.

28. How do you specify the character encoding for an HTML document?

Answer: Use the <meta charset="UTF-8"> tag.

29. What is the difference between <b> and <strong> tags?

Answer: <b> is for stylistic bolding, while <strong> indicates strong importance and is semantically
meaningful.

30. What is the purpose of the <head> tag?

Answer: It contains meta-information about the HTML document, such as title, links to stylesheets, and
scripts.

31. What is the difference between <i> and <em> tags?

Answer: <i> is for italicized text without semantic importance, while <em> indicates emphasized text.

32. How do you include JavaScript in an HTML file?

Answer: Use the <script> tag either in the <head> or before the closing </body> tag.

33. What is the rel attribute in a link tag?

Answer: It specifies the relationship between the current document and the linked document/resource.

34. How do you include CSS in an HTML file?

Answer: CSS can be included inline, internally using the <style> tag, or externally using the <link> tag.

35. What is the purpose of the <title> tag?

Answer: It sets the title of the HTML document, which is displayed on the browser's title bar or tab.

36. What is the srcset attribute in the <img> tag?

Answer: It specifies multiple image sources for responsive images, allowing the browser to choose the
most appropriate one based on the device's resolution.

37. What is the use of the <noscript> tag?

Answer: It defines an alternate content to display if the browser does not support JavaScript.

38. What is the difference between <script> tag with defer and async attributes?

Answer: defer loads the script after the HTML document is completely parsed, while async loads the
script asynchronously and does not wait for the HTML document to finish loading.

39. How do you create an email link in HTML?


Answer: Use <a href="mailto:[email protected]">Send Email</a>.

40. What is the download attribute in an <a> tag?

Answer: It specifies that the target should be downloaded when the user clicks on the hyperlink.

41. What is the purpose of the <base> tag?

Answer: It sets the base URL for all relative URLs in the document.

42. What is the difference between colspan and rowspan in tables?

Answer: colspan merges columns, and rowspan merges rows in a table.

43. How do you specify a default text in a text field?

Answer: Use the placeholder attribute in the <input> tag.

44. What is the <figure> and <figcaption> tag in HTML5?

Answer: <figure> is used to group media content like images, and <figcaption> is used to provide a
caption for that content.

45. What is the use of the lang attribute in HTML?

Answer: It declares the language of the HTML document, improving accessibility and SEO.

46. What is the difference between <link> and <a> tags?

Answer: <link> is used to link external resources, like stylesheets, while <a> is used to create hyperlinks
to other pages or locations within the page.

47. How do you create a responsive webpage in HTML?

Answer: Use the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag and CSS
media queries to make the page responsive.

48. What is the purpose of the <details> and <summary> tags?

Answer: <details> creates a collapsible section, and <summary> defines the visible heading of the
section.

49. What is the difference between <nav> and <footer> tags?

Answer: <nav> defines a section of navigation links, while <footer> defines the footer section of the
document.
CSS-

1.What is CSS?

 Answer: CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation
of a document written in HTML or XML. It controls the layout of multiple web pages at once.

2. What is the difference between CSS and HTML?

 Answer: HTML (HyperText Markup Language) is used to create the structure of a web page,
while CSS is used to control the appearance and layout of the HTML elements.

3. What are the different types of CSS?

 Answer:

1. Inline CSS: Applied directly to HTML elements using the style attribute.

2. Internal CSS: Defined within a <style> tag inside the HTML <head> section.

3. External CSS: Written in a separate .css file and linked to the HTML document.

4. What is the difference between class and id selectors?

 Answer: The class selector can be used on multiple elements, while the id selector is unique to a
single element. id is also more specific than class.

5. How does the CSS Box Model work?

 Answer: The CSS Box Model consists of four parts: content, padding, border, and margin. The
content is surrounded by padding, then the border, and finally the margin.

6. What is the use of the float property?

 Answer: The float property is used to align elements to the left or right of their container,
allowing other elements to wrap around them.

7. Explain the display property and its values.

 Answer: The display property controls the layout of elements. Common values include:

o block: Elements take up the full width available.

o inline: Elements take only the width necessary.

o inline-block: Like inline, but respects width and height.

o none: The element is not displayed.

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


 Answer: inline elements do not respect width and height properties, while inline-block elements
do.

9. What are pseudo-classes and pseudo-elements?

 Answer:

o Pseudo-classes: Used to define a special state of an element (e.g., :hover, :focus).

o Pseudo-elements: Used to style specific parts of an element (e.g., ::before, ::after).

10. How can you center a div horizontally and vertically?

 Answer:

o Horizontally: margin: 0 auto;

o Vertically: Use flexbox:

css

Copy code

display: flex;

align-items: center;

justify-content: center;

11. What is a CSS preprocessor?

 Answer: A CSS preprocessor is a scripting language that extends CSS with variables, nesting, and
functions. Examples include SASS, LESS

12. What is the difference between relative, absolute, fixed, and sticky positioning?

 Answer:

o relative: Positioned relative to its normal position.

o absolute: Positioned relative to the nearest positioned ancestor.

o fixed: Positioned relative to the browser window.

o sticky: Switches between relative and fixed based on scroll position.

13. What is the z-index property and how does it work?

 Answer: The z-index property controls the stacking order of elements. Elements with a higher z-
index appear on top of those with a lower z-index.
15. What is Flexbox, and how is it different from CSS Grid?

 Answer: Flexbox is a one-dimensional layout system used for arranging items in rows or
columns, while CSS Grid is a two-dimensional layout system that allows for more complex
layouts with both rows and columns.

16. Explain the concept of specificity in CSS.

 Answer: Specificity determines which CSS rule is applied by the browser when multiple rules
could apply to the same element.

17. What is the difference between em and rem units in CSS?

 Answer: em is relative to the font size of the parent element, while rem is relative to the root
(HTML) element's font size.

18. What are media queries, and how are they used?

 Answer: Media queries allow CSS to apply styles based on the device's characteristics, such as
screen width, height, resolution, etc. They are used to create responsive designs.

21. What is the difference between CSS Animations and Transitions?

 Answer: Transitions allow you to change property values smoothly (for hover or focus states),
while animations allow for more complex sequences of keyframes, providing more control over
the animation.

22. What are CSS variables, and how are they used?

 Answer: CSS variables (custom properties) are entities defined by CSS that contain specific
values to be reused throughout a document.

24. What are CSS Sprites, and how are they used?

 Answer: CSS sprites are a way to reduce the number of HTTP requests by combining multiple
images into a single file.

25. What is the overflow property, and what are its values?

 Answer: The overflow property controls what happens to content that overflows an element's
box. Values include visible, hidden, scroll, and auto.

26. How can you hide an element in CSS?

 Answer: You can hide an element using display: none; or visibility: hidden;.

27. What is the box-sizing property?

 Answer: The box-sizing property defines how the width and height of an element are calculated:
content-box (default) or border-box (includes padding and border).
28. What is the purpose of the clear property?

 Answer: The clear property is used to prevent elements from wrapping around floated elements.
It can have values like left, right, or both.

30. What is the @import rule in CSS?

 Answer: The @import rule is used to import one stylesheet into another.

32. What is the difference between nth-child() and nth-of-type()?

 Answer: nth-child() selects the nth child regardless of type, while nth-of-type() selects the nth
child of a specific type.

33. Explain the calc() function in CSS.

 Answer: The calc() function performs calculations to determine CSS property values, combining
different units (e.g., width: calc(100% - 50px);).

34. What is the difference between visibility: hidden; and opacity: 0;?

 Answer: visibility: hidden; hides the element but keeps it in the layout, while opacity: 0; makes
it invisible but still interactable.

36. What is the purpose of line-height in CSS?

 Answer: The line-height property controls the amount of space between lines of text,
improving readability.

37. What is the content property in CSS?

 Answer: The content property is used with pseudo-elements like ::before and ::after to insert
content.

40. How do you create a full-width container using CSS?

 Answer: Set the container's width to 100% and its margin to 0.

41. What are the different types of combinators in CSS?

 Answer:

o Descendant ( )

o Child (>)

o Adjacent sibling (+)

o General sibling (~)


42. What is the difference between justify-content and align-items in Flexbox?

 Answer: justify-content aligns items along the main axis (horizontally by default), while align-
items aligns them along the cross axis (vertically by default).

43. What is the clip-path property in CSS?

 Answer: The clip-path property creates a clipping region that determines which parts of an
element are visible.

44. What is the pointer-events property?

 Answer: The pointer-events property controls whether an element can be the target of mouse
events, with values like auto, none, etc.

You might also like