Educational

Category: CSS

  • Responsive Navbar

    <!DOCTYPE html>
<html>
<head>
  <style>

    body { margin: 0; font-family: Arial; }
.navbar {
  display: flex;
  justify-content: space-between;
  background: #333;
  padding: 10px 20px;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
}
.navbar a:hover {
  background: #575757;
  border-radius: 5px;
}
@media (max-width: 600px) {
  .navbar { flex-direction: column; text-align: center; }
}
      </style>
</head>
<body>
  <div class="navbar">

    &lt;a href="#"&gt;Home&lt;/a&gt;
&lt;a href="#"&gt;About&lt;/a&gt;
&lt;a href="#"&gt;Services&lt;/a&gt;
&lt;a href="#"&gt;Contact&lt;/a&gt;
      </div>
</body>
</html>

    Explanation:

    • flexbox arranges items in a row.
    • @media query makes it vertical on small screens.

  • Profile Card

    <!DOCTYPE html>
<html>
<head>
  <style>

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f4f4f4;
  font-family: Arial, sans-serif;
}
.card {
  background: white;
  width: 300px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-align: center;
  padding: 20px;
}
.card img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}
.card h2 {
  margin: 10px 0;
}
.card p {
  color: gray;
}
.card button {
  background: blue;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.card button:hover {
  background: darkblue;
}
      </style>
</head>
<body>
  <div class="card">

    &lt;img src="https://via.placeholder.com/100" alt="Profile"&gt;
&lt;h2&gt;John Doe&lt;/h2&gt;
&lt;p&gt;Web Developer&lt;/p&gt;
&lt;button&gt;Follow&lt;/button&gt;
      </div>
</body>
</html>

    Explanation:

    • box-shadow creates a floating card effect.
    • border-radius rounds corners.
    • hover effect on button adds interactivity.

  • What is Z-index in CSS?

    Controls element stacking order. Higher value = on top.

    div { z-index: 10; position: absolute; }

  • Explain the CSS Box Model.

    Each element has:

    • Content → text/image.
    • Padding → inside spacing.
    • Border → outer line.
    • Margin → space outside element.

  • What are CSS animations?

    Animations use @keyframes.

    @keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}
div {
  position: relative;
  animation: slide 2s infinite;
}

  • What are CSS transitions?

    Transitions create smooth animations when a property changes.

    div {
  transition: all 0.5s;
}
div:hover {
  background: red;
}

  • What are media queries in CSS?

    Used for responsive design.

    @media (max-width: 600px) {
  body { background: lightblue; }
}

  • What are CSS pseudo elements?

    Pseudo-elements style specific parts of elements.
    Example:

    p::first-line { font-weight: bold; }
p::before { content: "👉 "; }

  • block, and inline-block.

    • inline → does not start on a new line (span, a).
    • block → always starts on new line (div, p, h1).
    • inline-block → behaves inline but allows setting width/height.

  • Difference between em, rem, %, px units?

    • px → fixed size.
    • em → relative to parent font size.
    • rem → relative to root (html) font size.
    • % → relative to parent element’s size.