Educational

Category: Examples

  • Borders

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

    div {
  border: 2px solid red; /* Thickness, style, color */
  padding: 10px; /* Space inside border */
  margin: 15px; /* Space outside border */
}
      </style>
</head>
<body>
  <div>This is a CSS border example.</div>
</body>
</html>

    Explanation:

    • border: creates a border with thickness, style (solid, dashed, dotted), and color.
    • padding: space inside border.
    • margin: space outside border.

  • Fonts and Text Styling

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

    p {
  font-family: Arial, sans-serif; /* Sets font type */
  font-size: 18px; /* Controls text size */
  font-weight: bold; /* Makes text bold */
  text-align: center; /* Aligns text in the middle */
}
      </style>
</head>
<body>
  <p>Styled Text Example</p>
</body>
</html>

    Explanation:

    • font-family: changes font style.
    • font-size: controls text size.
    • font-weight: bold, normal, light.
    • text-align: left, right, center, justify.

  • Background Color

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

    body {
  background-color: lightgray; /* Sets page background */
}
h2 {
  background-color: yellow; /* Sets only heading background */
}
      </style>
</head>
<body>
  <h2>CSS Background Example</h2>
</body>
</html>

    Explanation:

    • You can style either the entire page (body) or specific elements (like h2).

  • Changing Text Color

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

    h1 {
  color: blue; /* Changes heading text color */
}
p {
  color: green; /* Changes paragraph text color */
}
      </style>
</head>
<body>
  <h1>Hello CSS</h1>
  <p>This is a CSS color example.</p>
</body>
</html>

    Explanation:

    • color property sets the text color.
    • Headings will appear blue, and paragraphs green.