10-Mark Questions

Definition: Cascading Style Sheets (CSS) is a stylesheet language used to style HTML elements, controlling their appearance and layout. CSS properties define specific styling aspects, and values specify how those aspects are rendered.

Categories of CSS Properties and Values:

  1. Text Properties:
    • color: Sets text color.
      Values: Hex (#FF0000), RGB (rgb(255,0,0)), color names (red).
      Example: 
      p { color: blue; }
    • font-family: Specifies font.
      Values: Font names (Arial), generic families (sans-serif).
      Example: 
      h1 { font-family: Arial, sans-serif; }
    • font-size: Sets text size.
      Values: Pixels (16px), rem (1rem), percentages.
      Example: 
      p { font-size: 14px; }
    • font-weight: Controls boldness.
      Values: normal, bold, numeric (700).
      Example: 
      strong { font-weight: bold; }
    • text-align: Aligns text.
      Values: left, center, right, justify.
      Example: 
      div { text-align: center; }
  2. Background Properties:
    • background-color: Sets background color.
      Values: Hex, RGB, names.
      Example: 
      body { background-color: #f0f0f0; }
    • background-image: Adds a background image.
      Values: url("image.jpg").
      Example: 
      header { background-image: url("bg.jpg"); }
    • background-repeat: Controls image repetition.
      Values: repeat, no-repeat, repeat-x.
      Example: 
      header { background-repeat: no-repeat; }
    • background-position: Positions the image.
      Values: center, top left, percentages.
      Example: 
      header { background-position: center; }
  3. Box Model Properties:
    • margin: Sets external spacing.
      Values: Pixels, auto, percentages.
      Example: 
      div { margin: 10px 20px; }
    • padding: Sets internal spacing.
      Values: Pixels, percentages.
      Example: 
      div { padding: 15px; }
    • border: Defines border style.
      Values: Width, style (solid, dashed), color.
      Example: 
      div { border: 1px solid black; }
    • width, height: Sets dimensions.
      Values: Pixels, percentages, auto.
      Example: 
      img { width: 200px; }
  4. Layout Properties:
    • display: Controls element rendering.
      Values: block, inline, flex, grid.
      Example: 
      ul { display: flex; }
    • position: Sets positioning method.
      Values: static, relative, absolute, fixed.
      Example: 
      div { position: absolute; top: 10px; }
    • float: Floats elements.
      Values: left, right, none.
      Example: 
      img { float: left; }
  5. Transition and Animation:
    • transition: Smooths property changes.
      Values: Property, duration, timing-function.
      Example: 
      a { transition: color 0.3s ease; }
    • animation: Applies keyframe animations.
      Values: Name, duration, iteration-count.
      Example: 
      div { animation: slide 2s infinite; }

Complete Example:

body {
  background-color: #f0f9ff;
  font-family: Arial, sans-serif;
}
h1 {
  color: #1e3a8a;
  text-align: center;
  font-size: 24px;
}
div {
  margin: 20px;
  padding: 15px;
  border: 2px solid #10b981;
  width: 300px;
  display: block;
}

Conclusion: CSS properties and values cover text, background, box model, layout, and animations, enabling precise styling. Understanding these categories is essential for creating responsive, visually appealing webpages, ensuring high exam marks.

Definition: A style sheet is a collection of CSS rules that define the styling and layout of HTML elements. A custom style sheet is a developer-created CSS file that ensures consistent design across a website, using selectors, properties, and values tailored to specific requirements.

Steps to Create a Style Sheet:

  1. Create a CSS file (e.g., styles.css).
  2. Link it to HTML using the <link> tag in the <head>.
  3. Define selectors (element, class, ID) to target elements.
  4. Specify properties and values for styling.
  5. Test across browsers and devices for compatibility.

Components:

  • Selectors: h1, .class, #id, :hover.
  • Properties: color, margin, font-size.
  • Values: blue, 10px, center.

Example:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
    </nav>
  </header>
  <main>
    <p class="content">This is the main content.</p>
    <button class="btn">Click Me</button>
  </main>
</body>
</html>

CSS (styles.css):

/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f0f9ff;
}
header {
  background-color: #1e3a8a;
  color: white;
  padding: 20px;
  text-align: center;
}
header h1 {
  font-size: 2rem;
}
nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}
nav a:hover {
  color: #10b981;
}
.content {
  margin: 20px;
  font-size: 16px;
  line-height: 1.6;
}
.btn {
  background-color: #10b981;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
.btn:hover {
  background-color: #059669;
}

Output: A webpage with a navy header, centered white title, navigation links (turn green on hover), a paragraph with proper spacing, and a green button that darkens on hover.

Advantages:

  • Ensures consistent design across pages.
  • Simplifies maintenance with centralized styles.
  • Separates content (HTML) from presentation (CSS).
  • Supports responsive design via media queries.

Conclusion: A custom style sheet, linked via <link>, provides a scalable and maintainable way to style webpages. The example demonstrates a professional design with reusable styles, ideal for exam answers and practical web development.

Definition: CSS style sheets define the visual styling of HTML elements. They can be applied using three types—inline, internal (embedded), and external—each with unique integration methods and use cases.

Types of Style Sheets:

  1. Inline Style Sheet:
    • Definition: CSS rules are applied directly to an HTML element using the style attribute.
    • Use Case: Quick, one-off styling for specific elements.
    • Advantages: Simple for small changes; no external file needed.
    • Disadvantages: Difficult to maintain; mixes content and presentation; high specificity.
    • Example: 
      <p style="color: blue; font-size: 16px;">Inline styled text</p>
  2. Internal Style Sheet (Embedded):
    • Definition: CSS rules are written within a <style> tag in the HTML <head> section.
    • Use Case: Styling a single webpage without an external file.
    • Advantages: Centralized styles within one file; no external request.
    • Disadvantages: Not reusable across pages; increases HTML file size.
    • Example: 
      <html>
<head>
  <style>
    h1 { color: #1e3a8a; text-align: center; }
    p { font-size: 14px; margin: 10px; }
  </style>
</head>
<body>
  <h1>Internal Style</h1>
  <p>This is styled internally.</p>
</body>
</html>
  3. External Style Sheet:
    • Definition: CSS rules are stored in a separate .css file, linked to HTML using the <link> tag.
    • Use Case: Consistent styling across multiple webpages.
    • Advantages: Reusable; easy to maintain; separates content and presentation.
    • Disadvantages: Requires additional HTTP request; initial setup time.
    • Example:

      HTML (index.html): 

      <html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>External Style</h1>
  <p>This is styled externally.</p>
</body>
</html>

      CSS (styles.css): 

      h1 {
  color: #10b981;
  text-align: center;
}
p {
  font-size: 16px;
  padding: 10px;
}

Cascade and Specificity: CSS prioritizes styles based on source (inline > internal > external) and specificity (ID > class > element). The !important rule can override others.

Conclusion: Inline, internal, and external style sheets offer flexibility for styling webpages. External style sheets are preferred for large projects due to maintainability, while inline and internal suit quick or single-page needs, ensuring efficient web design.

5-Mark Questions

Definition: Formatting a block of information in CSS involves styling block-level HTML elements (e.g., <div>, <p>, <section>) to control their appearance, size, spacing, and layout. Block elements occupy the full width of their parent container and are used to structure content.

Key CSS Properties:

  • display: block: Ensures block-level rendering.
    Example: 
    div { display: block; }
  • width, height: Sets dimensions.
    Example: 
    div { width: 400px; height: 200px; }
  • margin: Controls external spacing.
    Example: 
    div { margin: 20px auto; }
    (centers horizontally).
  • padding: Controls internal spacing.
    Example: 
    div { padding: 15px; }
  • border: Adds borders.
    Example: 
    div { border: 2px solid #1e3a8a; }
  • background-color: Sets background.
    Example: 
    div { background-color: #dbeafe; }
  • box-shadow: Adds shadow effects.
    Example: 
    div { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

Example:

<html>
<head>
  <style>
    .block {
      width: 400px;
      margin: 20px auto;
      padding: 15px;
      background-color: #dbeafe;
      border: 2px solid #10b981;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div class="block">
    <h2>Block Content</h2>
    <p>Styled block of information.</p>
  </div>
</body>
</html>

Output: A centered block with a green border, light blue background, shadow, and padded content containing a heading and paragraph.

Conclusion: Formatting blocks in CSS using properties like margin, padding, border, and background creates structured, visually appealing layouts. These techniques are vital for organizing content effectively in web design, ensuring clarity and high marks.

Definition: CSS layers refer to the stacking of HTML elements along the z-axis, determining which elements appear in front of or behind others. The z-index property, used with positioned elements (position: relative, absolute, fixed, sticky), controls this stacking order, essential for complex layouts like modals or dropdowns.

Key Concepts:

  • z-index: Specifies the stack order. Higher values appear in front.
    Values: Integers (10, -1), default is 0.
    Example: 
    div { z-index: 100; }
  • Positioning: z-index only works with position set to relative, absolute, fixed, or sticky.
  • Stacking Context: A parent element with z-index, opacity, or transform creates a stacking context, limiting child elements’ stacking relative to it.
  • Default Stacking: Without z-index, elements stack based on HTML order (later elements appear on top).

How Layers Work:

  • Elements with higher z-index overlap those with lower values.
  • Negative z-index places elements behind others.
  • Stacking contexts isolate child elements’ stacking behavior.

Example:

<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .box1 { background-color: red; z-index: 1; top: 50px; left: 50px; }
    .box2 { background-color: blue; z-index: 2; top: 70px; left: 70px; }
    .box3 { background-color: green; z-index: 0; top: 90px; left: 90px; }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

Output: Three overlapping boxes: blue (z-index: 2) on top, red (z-index: 1) in the middle, green (z-index: 0) at the bottom.

Use Cases:

  • Modals: High z-index to overlay content.
  • Dropdown menus: Appear above other elements.
  • Tooltips or popovers: Positioned over content.

Conclusion: CSS layers, managed via z-index and positioning, enable precise control over element stacking for dynamic layouts. Understanding stacking contexts is crucial for creating interactive, visually appealing webpages, ensuring high exam scores.

Definition: Cascading Style Sheets (CSS) is a stylesheet language used to control the visual presentation of HTML elements, defining aspects like colors, fonts, layouts, and animations. It separates content (HTML) from styling (CSS), enhancing flexibility and maintainability.

Key Features:

  • Selectors: Target elements (e.g., p, .class, #id).
  • Properties: Define styling aspects (e.g., color, margin).
  • Values: Specify settings (e.g., blue, 10px).
  • Cascade: Resolves style conflicts via specificity and source order.
  • Media Queries: Enable responsive design for different devices.

Advantages of CSS:

  1. Separation of Content and Presentation: CSS keeps HTML focused on structure, with styles defined separately, improving readability and maintenance.
    Example: Update styles.css to change site-wide colors.
  2. Consistency Across Pages: External style sheets ensure uniform design across a website.
    Example: A single styles.css styles all navigation bars.
  3. Ease of Maintenance: Centralized styles allow quick updates.
    Example: Change font-family in one CSS rule for the entire site.
  4. Advanced Styling Capabilities: Supports animations, transitions, flexbox, and grid layouts.
    Example: 
    a { transition: color 0.3s ease; }
  5. Improved Accessibility: Media queries ensure responsive design for various devices.
    Example: 
    @media (max-width: 600px) { body { font-size: 14px; } }
  6. Faster Page Loading: Cached external CSS files reduce load times.
    Example: A cached styles.css speeds up navigation.

Example:

<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f0f9ff; }
    .container { max-width: 800px; margin: 0 auto; padding: 20px; background: white; }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS Styled Page</h1>
    <p>This page uses CSS.</p>
  </div>
</body>
</html>

Conclusion: CSS is a vital technology for web design, enabling precise control over presentation. Its advantages—separation of concerns, consistency, maintainability, advanced styling, accessibility, and performance—make it indispensable for creating professional websites, ensuring high marks in exams.