Why to study Web Technology ?

Learning Web Technology is crucial for engineering students because it equips them with essential skills to design and develop modern, user-friendly web applications. Understanding web technologies enables them to create interactive and responsive interfaces, integrate with back-end systems, and solve real-world problems. It also opens up diverse career opportunities in a rapidly growing industry, fostering innovation and adaptability in the ever-evolving digital landscape.

Laboratory Experiment - 3

3. Develop an external style sheet named as “style.css” and provide different styles for h2, h3, hr, p, div, span, time, img & a tags. Apply different CSS selectors for tags and demonstrate the significance of each.


Program:

HTML Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Selectors Example</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="container">

        <h2>Welcome to the Styled Page</h2>

        <h3>Subheading Example</h3>

        <hr>

        <p class="text-style">

            This is a paragraph with the class selector applied. The content of this paragraph is styled using the "text-style" class.

        </p>

        <span>This is a span inside a div with bold text and custom color.</span>

        <br><br>

        <time datetime="2024-09-04">September 4, 2024</time>

        <br><br>

        <img src="logo.jpg" alt="Sample Image">

        <br><br>

        <a href="#">This is a link with pseudo-class styling</a>

    </div>

</body>

</html>

 CSS Code:


/* Style for h2 and h3 elements using type selector */

h2 {

    color: #4CAF50;

    font-family: Arial, sans-serif;

    font-size:28px;

    border-bottom:2px solid #4CAF50;

    padding-bottom:10px;

}

h3 {

    color:#007BFF;

    font-family:Verdana, sans-serif;

    font-size:22px;

    margin-bottom:5px;

}

/* Styling hr element using type selector */

hr {

    border:0;

    height:2px;

    background:#333;

}

/* Styling p element using class selector */

p.text-style {

    font-size:16px;

    color:#333;

    line-height:1.6;

    text-align:justify;

}

/* Styling div with id selector */

#container {

    background-color:#f0f0f0;

    padding:20px;

    border:1px solid #ccc;

}

/* Styling span element using descendant selector */

div span {

    font-weight:bold;

    color:#D2691E;

}

/* Styling time element using attribute selector */

time[datetime] {

    font-style:italic;

    color:#FF6347;

}

/* Styling img element using universal selector */

img {

    border: 5px solid #ddd;

    border-radius:10px;

    width:20%;

    height:auto;

}

/* Styling anchor tag using pseudo-class selector */

a:link {

    color:#1E90FF;

    text-decoration:none;

}

a:hover {

    color: #FF4500;

    text-decoration:underline;

}


Output:

Explanation of CSS Selectors and Their Significance

  1. 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.
  2. 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.
  3. ID Selector (#container): Targets an element with a specific ID. The div with the ID container is styled with a background color and padding.
  4. Descendant Selector (div span): Selects span elements that are descendants of div. It ensures that only span elements inside div get the specified styles.
  5. Attribute Selector (time[datetime]): Selects time elements that have a datetime attribute. This applies styles only to time elements with this attribute.
  6. Universal Selector (* img): Targets all img elements regardless of their class or ID and applies a border and border-radius.
  7. 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

Popular posts from this blog

Why to study Web Technology ?