Educational

Author: Saim Khalid

  • What are the types of CSS?

    1. Inline CSS – written inside HTML tags.
    2. Internal CSS – inside <style> in the HTML <head>.
    3. External CSS – in a separate .css file (best practice).

  • What is CSS?

    CSS (Cascading Style Sheets) is used to style and format HTML elements (colors, fonts, layouts, responsiveness)

    • Example:
    p { color: blue; font-size: 18px; }

  • 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.