Educational

Category: Examples

  • Image Styling

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

    img {
  width: 200px;
  border-radius: 15px; /* Rounded edges */
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}
img:hover {
  transform: scale(1.1); /* Zoom effect */
}
      </style>
</head>
<body>
  <img src="https://via.placeholder.com/200" alt="Example">
</body>
</html>

    Explanation:

    • border-radius: softens corners.
    • box-shadow: adds shadow.
    • hover + scale: zooms image when hovered.

  • CSS Grid Layout

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

    .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 10px;
}
.grid div {
  background: lightcoral;
  padding: 20px;
  text-align: center;
}
      </style>
</head>
<body>
  <div class="grid">

    &lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;div&gt;5&lt;/div&gt;
&lt;div&gt;6&lt;/div&gt;
      </div>
</body>
</html>

    Explanation:

    • display: grid; arranges items into a grid.
    • grid-template-columns: repeat(3, 1fr); makes 3 equal columns.
    • gap: space between items.

  • Navigation Menu

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

    ul {
  list-style-type: none;
  background: #333;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  padding: 14px 20px;
  text-decoration: none;
}
li a:hover {
  background: #111;
}
      </style>
</head>
<body>
  <ul>

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

    Explanation:

    • A horizontal navbar using ul + li.
    • hover effect changes background color when mouse is over.

  • Rounded Corners

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

    .circle {
  width: 150px;
  height: 150px;
  background: orange;
  border-radius: 50%; /* Makes perfect circle */
  text-align: center;
  line-height: 150px;
  color: white;
  font-weight: bold;
}
      </style>
</head>
<body>
  <div class="circle">Circle</div>
</body>
</html>

    Explanation:

    • border-radius: 50% creates a circle.
    • Smaller values like 10px just make rounded corners.

  • Text Shadow & Box Shadow

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

    h1 {
  text-shadow: 2px 2px 5px gray; /* X, Y, blur, color */
}
.box {
  width: 200px;
  height: 100px;
  background: lightgreen;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  text-align: center;
  line-height: 100px;
}
      </style>
</head>
<body>
  <h1>Text Shadow Example</h1>
  <div class="box">Box Shadow</div>
</body>
</html>

    Explanation:

    • text-shadow: adds a glowing or shadow effect to text.
    • box-shadow: adds shadow around elements.

  • CSS Gradient Background

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

    .gradient {
  width: 300px;
  height: 150px;
  background: linear-gradient(to right, red, yellow);
  text-align: center;
  line-height: 150px;
  font-weight: bold;
  color: white;
}
      </style>
</head>
<body>
  <div class="gradient">Gradient Background</div>
</body>
</html>

    Explanation:

    • linear-gradient(to right, red, yellow) creates a smooth color transition.
    • You can also use to bottom, to left, to top right, etc.

  • Responsive Design

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

    body {
  background: lightblue;
}
@media (max-width: 600px) {
  body {
    background: pink; /* Changes background on small screens */
  }
}
      </style>
</head>
<body>
  <h2>Resize the browser window</h2>
</body>
</html>

    Explanation:

    • Media queries let you apply styles for different screen sizes (used in responsive design).

  • Flexbox Layout

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

    .container {
  display: flex;
  gap: 20px;
  background: lightgray;
  padding: 20px;
}
.item {
  background: skyblue;
  padding: 30px;
  flex: 1; /* Equal width items */
  text-align: center;
}
      </style>
</head>
<body>
  <div class="container">

    &lt;div class="item"&gt;Box 1&lt;/div&gt;
&lt;div class="item"&gt;Box 2&lt;/div&gt;
&lt;div class="item"&gt;Box 3&lt;/div&gt;
      </div>
</body>
</html>

    Explanation:

    • display: flex; arranges items horizontally.
    • gap: spacing between items.
    • flex: 1; makes items share equal space.

  • Hover Effect

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

    button {
  background: green;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}
button:hover {
  background: darkgreen; /* Changes color when hovered */
}
      </style>
</head>
<body>
  <button>Hover Me</button>
</body>
</html>

    Explanation:

    • :hover applies style when the mouse is over the element.

  • Box Model Example

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

    .box {
  width: 200px;
  height: 100px;
  background: lightblue;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}
      </style>
</head>
<body>
  <div class="box">Box Model Example</div>
</body>
</html>

    Explanation (Box Model):

    • Content → main text/image.
    • Padding → space between content and border.
    • Border → outer line.
    • Margin → space between elements.