- Type Selector (e.g., h2, h3, hr): Targets
elements based on their type. Here, h2, h3, and hr are styled by directly
selecting their element names.
- Class Selector (.text-style): Targets
elements that belong to a specific class. In this case, the p element is
styled with the text-style class.
- ID Selector (#container): Targets an element
with a specific ID. The div with the ID container is styled with a
background color and padding.
- Descendant Selector (div span): Selects span
elements that are descendants of div. It ensures that only span elements
inside div get the specified styles.
- Attribute Selector (time[datetime]): Selects
time elements that have a datetime attribute. This applies styles only to
time elements with this attribute.
- Universal Selector (* img): Targets all img
elements regardless of their class or ID and applies a border and
border-radius.
- Pseudo-Class Selector (a:hover, a:link):
Targets anchor (a) elements based on their state (e.g., :link for
unvisited links, :hover for when the mouse is over the link).
By using these CSS selectors, you
can customize the appearance of your HTML elements efficiently. You can place
the above CSS in a file named style.css and include it in your HTML to apply
these styles.
Viva-Voce Questions:
1. What is the role of an external CSS file in web
development?
Answer: An external
CSS file separates the style (design) from the content (HTML structure). It
allows the same CSS file to be linked to multiple HTML files, making styling
more consistent and easier to maintain.
2. How do you link an external CSS file to your HTML
document?
Answer: An external
CSS file is linked to an HTML document using the `<link>` tag inside the
`<head>` section. Example: `<link rel="stylesheet"
href="style.css">`.
3. What is the significance of the `id` and `class`
attributes in HTML?
Answer: The `id`
attribute is used to uniquely identify a single HTML element, while the `class`
attribute is used to apply the same styles to multiple elements. IDs must be
unique within a document, but multiple elements can share the same class.
4. Explain the
difference between inline, internal, and external CSS.
Answer:
- Inline CSS:
Styles applied directly within an HTML element using the `style` attribute.
- Internal CSS:
Styles written inside the `<style>` tag in the `<head>` section of
the HTML document.
- External CSS:
Styles stored in a separate `.css` file and linked using the `<link>`
tag.
5. What is the box model in CSS, and how does it affect the
layout of elements?
- Answer: The box
model represents the structure of an element. It consists of content, padding,
border, and margin. This model affects the overall size and layout of elements,
as each component adds to the element's width and height.
6. Can you explain the difference between padding and margin
in CSS?
Answer:
- Padding: The
space between an element’s content and its border.
- Margin: The
space outside an element’s border, separating it from other elements.
7. How do you apply styles to specific HTML elements using
CSS selectors?
Answer: You can use
various selectors such as:
- Type selector
(`h2` for all `<h2>` elements),
- Class selector
(`.classname` for elements with a specific class),
- ID selector
(`#idname` for an element with a specific ID),
- Attribute
selectors, and more.
8. What is the purpose of the `span` and `div` tags in HTML?
Answer:
- `div`: A
block-level container used to group elements and apply styles.
- `span`: An
inline container used to apply styles to specific parts of a text or inline
elements.
9. What is a pseudo-class in CSS, and can you give an
example?
Answer: A
pseudo-class is used to define the special state of an element, like when a
user hovers over it. Example: `a:hover` applies styles when the user hovers
over a link.
10. How do you make an image responsive using CSS?
Answer: To make an
image responsive, use the following CSS: `img { width: 100%; height: auto; }`.
This ensures the image scales according to its container while maintaining its
aspect ratio.
11. What are the various ways to position elements in CSS?
Answer: The
`position` property can be used with values like:
- static
(default),
- relative
(position relative to its normal position),
- absolute
(position relative to the nearest positioned ancestor),
- fixed (position
relative to the viewport),
- sticky
(switches between relative and fixed depending on scroll position).
12. Can you explain the difference between `position:
relative` and `position: absolute` in CSS?
Answer:
- `relative`: The
element is positioned relative to its normal position, meaning it can be
shifted but still takes up its original space.
- `absolute`: The
element is positioned relative to the nearest ancestor with a position other
than `static`. It is removed from the document flow and doesn’t affect other
elements.
13. How do you style an element when a user hovers over it
using CSS?
- Answer: Use the
`:hover` pseudo-class. Example:
a:hover {
color: red;
text-decoration: underline;
}
This changes the
link’s color to red and underlines it when hovered over.
14. What is the purpose of the `<time>` tag in HTML,
and how can you style it?
Answer: The
`<time>` tag represents a specific time or date. It can be styled using
CSS like any other element. Example:
time {
font-style:italic;
color:#FF6347;
}
15. What is the difference between block-level and inline
elements in HTML?
Answer:
- Block-level
elements: Take up the full width of their container and start on a new line.
Examples: `<div>`, `<p>`.
- Inline elements:
Only take up as much width as needed and don’t start on a new line. Examples:
`<span>`, `<a>`.
16. How do you align text to the center of an element using
CSS?
Answer: Use the
`text-align` property with the value `center`. Example:
p {
text-align:center;
}
17. What are media queries in CSS, and why are they used?
Answer: Media
queries allow for the application of CSS rules based on device characteristics
such as screen width. They are used for responsive design. Example:
@media(max-width: 600px) {
body {
background-color: lightblue;
}
}
18. Explain the concept of cascading in CSS.
Answer: Cascading
refers to the way CSS rules are applied in a hierarchical order. The most
specific rule overrides the less specific ones. The order of importance is:
1. Inline styles,
2. Internal
(embedded) styles,
3. External
styles.
19. What is the purpose of the `alt` attribute in the
`<img>` tag?
Answer: The `alt`
attribute provides alternative text for an image if it cannot be displayed. It
also helps with accessibility for screen readers.
20. What is the use of the `z-index` property in CSS?
Answer: The
`z-index` property controls the stacking order of elements that overlap. Higher
values bring elements to the front, while lower values push elements behind
others.
-:END:-
Comments
Post a Comment