<style>
  .relative-box {
    position: relative; /* Element is positioned relative to its normal position */
    top: 20px;          /* Moves the element 20px down */
    left: 30px;         /* Moves the element 30px to the right */
    background: lightblue;
    padding: 10px;
  }

  .absolute-box {
    position: absolute; /* Element is positioned relative to its nearest positioned ancestor */
    top: 50px;          /* Moves the element 50px down from ancestor */
    left: 40px;         /* Moves the element 40px to the right from ancestor */
    background: lightgreen;
    padding: 10px;
  }
</style>
<div class="relative-box">Relative Box</div>
<div class="absolute-box">Absolute Box</div>

<style>
  .center-div {
    position: absolute; /* Absolutely position the element */
    top: 50%;            /* Move it 50% down */
    left: 50%;           /* Move it 50% right */
    transform: translate(-50%, -50%); /* Shift back by half its own size */
    background: coral;
    padding: 20px;
  }
</style>
<div class="center-div">Centered Div</div>

<style>
  body {
    background: lightblue; /* Default background */
  }

  @media (max-width: 600px) {
    body {
      background: lightcoral; /* Changes background on small screens */
    }
  }
</style>
<p>Resize the screen to see the background color change.</p>

<style>
  .box {
    width: 200px;         /* Content width */
    padding: 20px;        /* Space inside the box */
    border: 5px solid black; /* Border around the box */
    margin: 10px;         /* Space outside the box */
    background: lightyellow;
  }
</style>
<div class="box">Box Model</div>

<style>
  div {
    color: blue;         /* Low specificity */
  }

  .class {
    color: green;        /* Medium specificity */
  }

  #id {
    color: red;          /* High specificity */
  }
</style>
<div id="id" class="class">Specificity Example</div>

<style>
  img {
    max-width: 100%;   /* Image scales down if needed */
    height: auto;      /* Maintain aspect ratio */
  }
</style>
<img src="https://via.placeholder.com/600x400" alt="Responsive Image">

<style>
  .flex-center {
    display: flex;               /* Enable flexbox */
    justify-content: center;     /* Center horizontally */
    align-items: center;         /* Center vertically */
    height: 100vh;
    background: lightgray;
  }
</style>
<div class="flex-center">
  <p>Centered with Flexbox</p>
</div>

<style>
  .transition-box {
    width: 100px;
    height: 100px;
    background: skyblue;
    transition: background 0.5s; /* Smooth background change */
  }

  .transition-box:hover {
    background: tomato;          /* Changes on hover */
  }
</style>
<div class="transition-box"></div>

<style>
  .animated-box {
    width: 50px;
    height: 50px;
    background: purple;
    animation: moveRight 2s infinite; /* Use animation rule */
  }

  @keyframes moveRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(200px); }
  }
</style>
<div class="animated-box"></div>

<style>
  .box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 1; /* Lower index */
  }

  .box2 {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: blue;
    z-index: 2; /* Higher index, appears on top */
  }
</style>
<div class="box1"></div>
<div class="box2"></div>

<style>
  a {
    color: blue;           /* Default link color */
  }

  a:hover {
    color: red;            /* Change color on hover - pseudo-class */
  }

  p:first-child {
    font-weight: bold;     /* First paragraph in a container */
  }
</style>
<a href="#">Hover over me</a>
<p>First paragraph</p>
<p>Second paragraph</p>

<style>
  .grid-container {
    display: grid;                  /* Enable CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px;                     /* Gap between grid items */
  }

  .grid-item {
    background: lightcoral;
    padding: 20px;
    text-align: center;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

<style>
  html {
    font-size: 16px;          /* Base font size */
  }

  .em-example {
    font-size: 2em;           /* 2 times the font size of parent */
  }

  .rem-example {
    font-size: 2rem;          /* 2 times the root font size (html) */
  }
</style>
<div style="font-size: 20px;">
  <p class="em-example">This text is 2em (40px)</p>
</div>
<p class="rem-example">This text is 2rem (32px)</p>

<style>
  .float-box {
    float: left;             /* Float element to the left */
    width: 150px;
    height: 100px;
    background: lightblue;
    margin-right: 10px;
  }

  .container {
    background: lightgray;
    overflow: auto;          /* Clear floats */
  }
</style>
<div class="container">
  <div class="float-box">Floated Box</div>
  <p>Text flows next to the floated box.</p>
</div>

<style>
  .block {
    display: block;          /* Default block element */
    background: lightcoral;
    margin-bottom: 10px;
  }

  .inline {
    display: inline;         /* Inline element */
    background: lightgreen;
  }

  .inline-block {
    display: inline-block;   /* Inline element but can set width/height */
    background: lightblue;
    width: 100px;
    height: 30px;
  }
</style>
<div class="block">Block element</div>
<span class="inline">Inline element</span>
<span class="inline-block">Inline-block element</span>

<style>
  .float-left {
    float: left;
    width: 100px;
    height: 50px;
    background: lightcoral;
    margin-right: 10px;
  }

  .clearfix::after {
    content: "";           /* Empty content */
    display: block;        /* Make it block */
    clear: both;           /* Clear floats */
  }
</style>
<div class="clearfix">
  <div class="float-left">Floated Left</div>
  <p>Text that clears floats.</p>
</div>

<style>
  .box {
    background: lightblue;
    padding: 20px;     /* Space inside the element's border */
    margin: 20px;      /* Space outside the element's border */
  }
</style>
<div class="box">Padding vs Margin</div>

<style>
  .container {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;     /* Add scrollbar if content overflows */
  }

  .content {
    width: 300px;
    height: 150px;
    background: lightcoral;
  }
</style>
<div class="container">
  <div class="content">Content bigger than container</div>
</div>

<style>
  .parent {
    display: flex;            /* Enable flexbox */
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
    height: 200px;
    border: 1px solid black;
  }

  .child {
    background: lightgreen;
    padding: 20px;
  }
</style>
<div class="parent">
  <div class="child">Centered Box</div>
</div>

<style>
  body {
    background: lightgray;
  }

  @media (max-width: 600px) {
    body {
      background: lightblue;  /* Change background on small screens */
    }
  }
</style>
<body>
  Resize the browser window to less than 600px width to see the background color change.
</body>

<style>
  .content-box {
    box-sizing: content-box;    /* Default - width and height include only content */
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background: lightcoral;
    margin-bottom: 20px;
  }

  .border-box {
    box-sizing: border-box;     /* width and height include padding and border */
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background: lightgreen;
  }
</style>

<div class="content-box">Content-box</div>
<div class="border-box">Border-box</div>

<style>
  :root {
    --main-color: #4CAF50;       /* Define variable */
    --padding: 15px;
  }

  .box {
    background-color: var(--main-color);  /* Use variable */
    padding: var(--padding);
    color: white;
  }
</style>

<div class="box">Box with CSS Variables</div>

<style>
  .relative {
    position: relative;     /* Positioned relative to its normal position */
    top: 10px;
    left: 10px;
    background: lightblue;
    margin-bottom: 10px;
  }

  .absolute {
    position: absolute;     /* Positioned relative to nearest positioned ancestor */
    top: 10px;
    right: 10px;
    background: lightgreen;
    width: 150px;
    height: 50px;
  }

  .fixed {
    position: fixed;        /* Fixed relative to the viewport */
    bottom: 10px;
    right: 10px;
    background: lightcoral;
    width: 150px;
    height: 50px;
  }

  .sticky {
    position: sticky;       /* Sticks to a position when scrolling */
    top: 0;
    background: lightyellow;
    padding: 10px;
  }
</style>

<div class="sticky">Sticky Header</div>
<div class="relative">Relative Box</div>
<div class="absolute">Absolute Box</div>
<div class="fixed">Fixed Box</div>

<style>
  .flex-container {
    display: flex;              /* Enable flexbox */
    flex-wrap: wrap;            /* Allow wrapping on small screens */
    gap: 10px;                  /* Space between items */
  }

  .flex-item {
    background: lightcoral;
    flex: 1 1 200px;            /* Grow, shrink, basis 200px */
    padding: 20px;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
</div>

<style>
  @media print {
    body {
      font-size: 12pt;        /* Styling for print */
      color: black;
      background: white;
    }
  }

  @media screen {
    body {
      font-size: 16px;        /* Styling for screens */
      background: lightgray;
    }
  }
</style>

<body>
  Content styled differently for screen and print media.
</body>

/* Optimization Tips */
/* 1. Minimize HTTP requests by combining CSS files */
/* 2. Remove unused CSS rules */
/* 3. Use shorthand properties */
/* 4. Avoid overly specific selectors */
/* 5. Use CSS variables to reduce repetition */
/* 6. Use minified CSS in production */

/* Specificity is calculated based on selector types: */
/* Inline styles (style="") => 1000 */
/* IDs => 100 */
/* Classes, attributes, pseudo-classes => 10 */
/* Elements, pseudo-elements => 1 */

/* Example: */
#header .nav li a {
  /* Specificity: ID(1) + class(1) + element(2) = 100 + 10 + 2 = 112 */
  color: blue;
}

/* Relative units depend on other values (like parent or root font-size): */
/* em, rem, %, vw, vh */

/* Absolute units are fixed size and do not scale: */
/* px, cm, mm, in, pt */

/* Example: */
.container {
  width: 50%;     /* 50% of parent width - relative */
  font-size: 1.2rem; /* relative to root font size */
}

.box {
  width: 300px;   /* fixed 300 pixels - absolute */
}

<style>
  a:hover {
    color: red;      /* Changes color when mouse hovers */
  }

  input:focus {
    border-color: blue;   /* When input is focused */
  }

  li:first-child {
    font-weight: bold;    /* First list item */
  }

  p::first-letter {
    font-size: 200%;      /* First letter of paragraph */
  }
</style>

<style>
  .grid-container {
    display: grid;                    /* Enable grid layout */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px;                       /* Gap between grid items */
  }

  .grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

<style>
  .parent {
    display: flex;              /* Enable flexbox */
    justify-content: center;    /* Center horizontally */
    align-items: center;        /* Center vertically */
    height: 200px;
    border: 2px solid black;
  }

  .child {
    background: lightcoral;
    padding: 20px;
    color: white;
  }
</style>

<div class="parent">
  <div class="child">Centered Box</div>
</div>

/* em is relative to the font-size of the parent */
/* rem is relative to the font-size of the root element (html) */

<style>
  html {
    font-size: 16px;    /* root font size */
  }
  .parent {
    font-size: 20px;    /* larger font size */
  }
  .child-em {
    font-size: 1.5em;   /* 1.5 * 20px = 30px */
  }
  .child-rem {
    font-size: 1.5rem;  /* 1.5 * 16px = 24px */
  }
</style>

<div class="parent">
  <p class="child-em">This text uses 1.5em</p>
  <p class="child-rem">This text uses 1.5rem</p>
</div>

/* Use this common pattern for accessible hiding */
.visually-hidden {
  position: absolute;   /* Remove from flow */
  width: 1px;           /* Very small */
  height: 1px;          /* Very small */
  padding: 0;
  margin: -1px;         /* Hide offscreen */
  overflow: hidden;     
  clip: rect(0,0,0,0);
  white-space: nowrap;  /* Prevent wrapping */
  border: 0;
}

/* Example usage: */
<button>
  Submit
  <span class="visually-hidden">form submission</span>
</button>

<style>
  html, body {
    height: 100%;         /* Make full height */
    margin: 0;
  }
  .wrapper {
    min-height: 100%;     /* Full page height */
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1;              /* Take remaining space */
  }
  .footer {
    background: lightgray;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="wrapper">
  <div class="content">
    Page content here
  </div>
  <footer class="footer">
    Sticky Footer
  </footer>
</div>

/* inline elements: flow within text, no line breaks */
/* block elements: take full width, start on new line */
/* inline-block: like inline but can have width and height */

<style>
  .inline {
    display: inline;
    background: lightblue;
    padding: 5px;
  }
  .block {
    display: block;
    background: lightgreen;
    padding: 5px;
  }
  .inline-block {
    display: inline-block;
    background: lightcoral;
    padding: 5px;
    width: 100px;
  }
</style>

<span class="inline">Inline</span>
<div class="block">Block</div>
<span class="inline-block">Inline-block</span>

<style>
  @media (max-width: 600px) {
    body {
      background-color: lightyellow;
    }
    .container {
      padding: 10px;
      font-size: 14px;
    }
  }
</style>

<style>
  li:nth-child(odd) {
    background-color: lightgray;   /* Odd list items */
  }
  li:nth-child(even) {
    background-color: lightblue;   /* Even list items */
  }
  li:nth-child(3) {
    font-weight: bold;              /* Third list item */
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<style>
  .btn {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s ease;  /* Smooth transition */
  }
  .btn:hover {
    background-color: darkblue;               /* Change on hover */
  }
</style>

<button class="btn">Hover me</button>

/* Position relative: offset relative to its normal position */
/* Position absolute: positioned relative to nearest positioned ancestor */
/* Position fixed: fixed relative to viewport, stays on scroll */
/* Position sticky: toggles between relative and fixed based on scroll */

<style>
  .relative {
    position: relative;
    top: 10px;       /* Moves 10px down from normal */
    background: lightyellow;
  }
  .absolute {
    position: absolute;
    top: 20px;
    left: 20px;
    background: lightgreen;
  }
  .fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    background: lightblue;
  }
  .sticky {
    position: sticky;
    top: 0;
    background: lightcoral;
  }
</style>

<style>
  img.responsive {
    max-width: 100%;   /* Max width is container width */
    height: auto;      /* Maintain aspect ratio */
    display: block;    /* Remove inline spacing */
  }
</style>

<div style="width: 300px; border: 1px solid #ccc;">
  <img src="image.jpg" alt="Example" class="responsive">
</div>

/* box-sizing controls how width and height are calculated */

<style>
  .default-box {
    width: 200px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: content-box;  /* Default, width excludes padding and border */
    background-color: lightblue;
  }
  .border-box {
    width: 200px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box;   /* Includes padding and border in width */
    background-color: lightgreen;
  }
</style>

<div class="default-box">content-box</div>
<div class="border-box">border-box</div>

<style>
  .scroll-y {
    width: 300px;
    height: 150px;
    overflow-y: scroll;  /* Scroll only vertical */
    overflow-x: hidden;  /* Hide horizontal scroll */
    border: 1px solid #ccc;
  }
</style>

<div class="scroll-y">
  <p>Long content here to demonstrate vertical scrolling...</p>
  <p>More content...</p>
  <p>Keep adding content to overflow vertically.</p>
</div>

/* float removes element from normal flow */
/* clearfix fixes container collapsing by clearing floats */

<style>
  .container {
    border: 1px solid black;
    padding: 10px;
  }
  .float-left {
    float: left;
    width: 100px;
    height: 100px;
    background: lightcoral;
  }
  .clearfix::after {
    content: "";
    display: block;
    clear: both;  /* Clear floats */
  }
</style>

<div class="container clearfix">
  <div class="float-left">Floating Box</div>
  Text content that flows around the floated box.
</div>

/* z-index controls stacking order of positioned elements */
/* Higher z-index appears on top */

<style>
  .box1, .box2 {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 20px;
    left: 20px;
    opacity: 0.8;
  }
  .box1 {
    background-color: red;
    z-index: 1;  /* Lower */
  }
  .box2 {
    background-color: blue;
    left: 70px;
    top: 70px;
    z-index: 2;  /* Higher, appears on top */
  }
</style>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

/* CSS variables (custom properties) start with -- */

<style>
  :root {
    --main-color: #3498db;
    --padding: 15px;
  }
  .box {
    background-color: var(--main-color);
    padding: var(--padding);
    color: white;
  }
</style>

<div class="box">Box with CSS variables</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Two equal columns */
    gap: 20px;                     /* Gap between columns and rows */
    border: 1px solid #ccc;
    padding: 10px;
  }
  .grid-item {
    background: lightgray;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

/* visibility: hidden hides element but keeps layout */
/* display: none removes element and frees space */

<style>
  .hidden {
    visibility: hidden;  /* Element hidden, space remains */
    background: lightcoral;
  }
  .none {
    display: none;       /* Element removed from flow */
  }
</style>

<div class="hidden">Invisible but space here</div>
<div class="none">Not displayed</div>

/* Media queries for responsive design */

<style>
  .box {
    width: 100%;
    background-color: lightblue;
    padding: 20px;
  }
  @media (max-width: 600px) {
    .box {
      background-color: lightcoral;  /* Change color on small screens */
    }
  }
</style>

<div class="box">Resize window to see effect</div>

/* Units: */

/* px - absolute pixels */
/* em - relative to font-size of parent */
/* rem - relative to root (html) font-size */
/* % - relative to parent element size */

<style>
  html {
    font-size: 16px;  /* Base font size */
  }
  .px {
    font-size: 20px;  /* 20 pixels */
  }
  .em {
    font-size: 1.5em; /* 1.5 times parent font size */
  }
  .rem {
    font-size: 2rem;  /* 2 times root font size (32px) */
  }
  .percent {
    width: 50%;       /* 50% of parent width */
    background: lightgreen;
  }
</style>

<div class="px">20px text</div>
<div class="em">1.5em text</div>
<div class="rem">2rem text</div>
<div class="percent">50% width box</div>

/* Use flexbox to center */

<style>
  .container {
    display: flex;            /* Enables flex */
    justify-content: center;  /* Horizontal center */
    align-items: center;      /* Vertical center */
    height: 200px;
    border: 1px solid black;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="box">Centered Box</div>
</div>

/* Positioning types explained */

/* relative: positioned relative to its normal position */
/* absolute: positioned relative to nearest positioned ancestor */
/* fixed: positioned relative to viewport, stays on screen */
/* sticky: toggles between relative and fixed based on scroll */

<style>
  .relative {
    position: relative;
    top: 10px;  /* Moves down 10px from normal position */
    background: lightblue;
  }
  .absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background: lightgreen;
  }
  .fixed {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: lightcoral;
  }
  .sticky {
    position: sticky;
    top: 0;
    background: lightgoldenrodyellow;
  }
  .container {
    position: relative; /* Parent for absolute */
    height: 150px;
    border: 1px solid black;
  }
</style>

<div class="container">
  <div class="relative">Relative</div>
  <div class="absolute">Absolute</div>
  <div class="sticky">Sticky (scroll down)</div>
</div>
<div class="fixed">Fixed</div>

/* Responsive image using max-width and height auto */

<style>
  img {
    max-width: 100%;  /* Image won't exceed container width */
    height: auto;     /* Maintains aspect ratio */
    display: block;   /* Removes inline spacing */
  }
  .container {
    width: 50%;       /* Container width */
    border: 1px solid #ccc;
  }
</style>

<div class="container">
  <img src="https://via.placeholder.com/600x400" alt="Example Image" />
</div>

/* :hover applies styles when mouse is over an element */

<style>
  .button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
  }
  .button:hover {
    background-color: darkblue;  /* Changes on hover */
    cursor: pointer;             /* Pointer cursor */
  }
</style>

<div class="button">Hover me</div>

/* !important overrides other declarations */

<style>
  p {
    color: blue !important;  /* Highest priority */
  }
  .red {
    color: red;
  }
</style>

<p class="red">This text will be blue because of !important.</p>

/* Visually hide but keep accessible */

<style>
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
</style>

<div class="sr-only">Hidden text for screen readers</div>

/* Display types explained */

/* inline: flows with text, no width/height */
/* block: starts on new line, takes full width */
/* inline-block: like inline but accepts width/height */

<style>
  .inline {
    display: inline;
    background: lightcoral;
  }
  .block {
    display: block;
    background: lightblue;
  }
  .inline-block {
    display: inline-block;
    background: lightgreen;
    width: 100px;
    height: 50px;
  }
</style>

<span class="inline">Inline</span>
<div class="block">Block</div>
<span class="inline-block">Inline-block</span>

/* Use font-weight and font-style */

<style>
  .bold {
    font-weight: bold;  /* Makes text bold */
  }
  .italic {
    font-style: italic; /* Makes text italic */
  }
</style>

<p class="bold">This text is bold.</p>
<p class="italic">This text is italic.</p>

/* Linear gradient background */

<style>
  .gradient {
    background: linear-gradient(to right, red, yellow);
    width: 200px;
    height: 100px;
  }
</style>

<div class="gradient">Gradient Box</div>

/* CSS animation for color change */

<style>
  @keyframes colorchange {
    0% { background-color: red; }
    50% { background-color: yellow; }
    100% { background-color: red; }
  }
  .animated-box {
    width: 100px;
    height: 100px;
    animation: colorchange 3s infinite;
  }
</style>

<div class="animated-box"></div>

/* CSS grid with 3 equal columns */

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    gap: 10px;
  }
  .grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

/* box-sizing controls how width and height are calculated */

<style>
  .content-box {
    box-sizing: content-box; /* Default: width/height excludes padding and border */
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightcoral;
  }
  .border-box {
    box-sizing: border-box; /* width/height includes padding and border */
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightblue;
  }
</style>

<div class="content-box">Content-box</div>
<div class="border-box">Border-box</div>

/* Center a block element using margin auto */

<style>
  .centered-block {
    width: 300px;
    margin-left: auto;  /* Auto margins on left */
    margin-right: auto; /* and right centers element */
    background-color: lightgreen;
    padding: 20px;
  }
</style>

<div class="centered-block">Centered Block</div>

/* CSS units explanation */

/* px = fixed pixels */
/* em = relative to font-size of the parent */
/* rem = relative to font-size of the root (html) */

<style>
  html {
    font-size: 16px;
  }
  .px-text {
    font-size: 16px; /* fixed 16 pixels */
  }
  .em-text {
    font-size: 1.5em; /* 1.5 times parent's font size */
  }
  .rem-text {
    font-size: 1.5rem; /* 1.5 times root font size (24px) */
  }
</style>

<div class="px-text">16px text</div>
<div class="em-text">1.5em text</div>
<div class="rem-text">1.5rem text</div>

/* Make a circle using border-radius 50% */

<style>
  .circle {
    width: 100px;
    height: 100px;
    background-color: teal;
    border-radius: 50%; /* Creates a circle */
  }
</style>

<div class="circle"></div>

/* Simple tooltip using :hover and visibility */

<style>
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .tooltip .tooltip-text {
    visibility: hidden;  /* Hidden by default */
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;  /* Position above */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltip-text {
    visibility: visible; /* Show on hover */
    opacity: 1;
  }
</style>

<div class="tooltip">Hover me
  <span class="tooltip-text">Tooltip text</span>
</div>

/* visibility: hidden hides element but keeps layout */
/* display: none hides element and removes from layout */

<style>
  .visible {
    visibility: visible;
    background-color: lightgreen;
    padding: 10px;
  }
  .hidden {
    visibility: hidden; /* Hidden but space reserved */
    background-color: lightcoral;
    padding: 10px;
  }
  .none {
    display: none; /* Element removed */
  }
</style>

<div class="visible">Visible</div>
<div class="hidden">Hidden (visibility:hidden)</div>
<div class="none">Not visible (display:none)</div>

/* Flex container with space between items */

<style>
  .flex-container {
    display: flex;
    justify-content: space-between; /* Space between children */
    background-color: lightyellow;
    padding: 10px;
  }
  .flex-item {
    background-color: lightcoral;
    padding: 10px;
    width: 100px;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

/* min-width sets minimum element width */
/* max-width sets maximum element width */

<style>
  .box {
    width: 50%;
    min-width: 200px; /* Will never be less than 200px */
    max-width: 400px; /* Will never exceed 400px */
    background-color: lightblue;
    padding: 20px;
  }
</style>

<div class="box">Resizable Box</div>

/* Media query for max-width 600px */

<style>
  @media (max-width: 600px) {
    .responsive-box {
      background-color: lightcoral;
      font-size: 14px;
      padding: 10px;
    }
  }
  .responsive-box {
    background-color: lightblue;
    font-size: 18px;
    padding: 20px;
  }
</style>

<div class="responsive-box">Resize the window</div>

/* z-index controls stacking order of overlapping elements */

<style>
  .box1 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 1; /* lower stack */
  }
  .box2 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: blue;
    z-index: 2; /* higher stack */
  }
</style>

<div class="box1"></div>
<div class="box2"></div>

/* CSS positioning types explained */

<style>
  .relative {
    position: relative; /* positioned relative to normal spot */
    top: 10px;
    left: 10px;
    background-color: lightblue;
    padding: 10px;
  }
  .absolute {
    position: absolute; /* positioned relative to nearest positioned ancestor */
    top: 50px;
    left: 50px;
    background-color: lightgreen;
    padding: 10px;
  }
  .fixed {
    position: fixed; /* positioned relative to viewport, stays on scroll */
    top: 10px;
    right: 10px;
    background-color: lightcoral;
    padding: 10px;
  }
  .sticky {
    position: sticky; /* toggles between relative and fixed based on scroll */
    top: 0;
    background-color: lightgoldenrodyellow;
    padding: 10px;
  }
</style>

<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
<div class="sticky">Sticky (try scrolling)</div>

/* Float example and clearing floats */

<style>
  .float-left {
    float: left; /* floats element to left */
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    margin-right: 10px;
  }
  .float-right {
    float: right; /* floats element to right */
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
  .clearfix::after {
    content: "";
    display: table;
    clear: both; /* clears floats */
  }
</style>

<div class="clearfix">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
</div>

/* Padding is space inside border, margin is space outside border */

<style>
  .box {
    background-color: lightblue;
    padding: 20px;  /* space inside */
    margin: 20px;   /* space outside */
    border: 2px solid black;
  }
</style>

<div class="box">Padding vs Margin</div>

/* Use visibility: hidden to hide but keep space */

<style>
  .hidden-space {
    visibility: hidden; /* invisible but occupies space */
    width: 200px;
    height: 50px;
    background-color: lightgreen;
    margin-bottom: 10px;
  }
</style>

<div class="hidden-space">Invisible but takes space</div>
<div>Next element</div>

/* Pseudo-classes style elements in special states */

<style>
  a:hover {
    color: red; /* when mouse is over link */
  }
  input:focus {
    border-color: blue; /* when input is focused */
  }
</style>

<a href="#">Hover over me</a><br>
<input type="text" placeholder="Focus me">

/* Responsive image with max-width 100% and height auto */

<style>
  img.responsive {
    max-width: 100%; /* scales down as needed */
    height: auto;    /* maintains aspect ratio */
  }
</style>

<img src="https://via.placeholder.com/600x400" alt="Responsive" class="responsive">

/* Differences between display types */

<style>
  .inline {
    display: inline; /* no line break, width = content */
    background-color: lightblue;
    padding: 5px;
  }
  .block {
    display: block; /* takes full width, line break */
    background-color: lightgreen;
    padding: 5px;
  }
  .inline-block {
    display: inline-block; /* like inline but can set width/height */
    background-color: lightcoral;
    padding: 5px;
    width: 150px;
  }
</style>

<span class="inline">Inline</span>
<span class="inline">Inline 2</span><br>
<div class="block">Block</div>
<span class="inline-block">Inline-block</span>
<span class="inline-block">Inline-block 2</span>

/* CSS selector for paragraphs inside a .content div */

<style>
  .content p {
    color: darkblue;
    font-weight: bold;
  }
</style>

<div class="content">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

/* box-sizing controls how width and height are calculated */

<style>
  .default-box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* default, width excludes padding/border */
    background-color: lightyellow;
    margin-bottom: 10px;
  }
  .border-box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* width includes padding and border */
    background-color: lightgray;
  }
</style>

<div class="default-box">Content-box</div>
<div class="border-box">Border-box</div>

/* Center block element with margin auto */

<style>
  .centered {
    width: 300px;
    margin-left: auto; /* equal space left and right */
    margin-right: auto;
    background-color: lightblue;
    padding: 10px;
  }
</style>

<div class="centered">Centered block element</div>

/* CSS length units explained */

<style>
  body {
    font-size: 16px; /* base font size */
  }
  .px {
    font-size: 20px; /* absolute pixels */
  }
  .em {
    font-size: 1.5em; /* 1.5 times parent font size */
  }
  .rem {
    font-size: 1.5rem; /* 1.5 times root (html) font size */
  }
</style>

<p class="px">20 pixels font size</p>
<p class="em">1.5 em font size</p>
<p class="rem">1.5 rem font size</p>

/* Simple CSS Grid with 3 columns */

<style>
  .grid-container {
    display: grid; /* enable grid */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 10px; /* spacing between grid items */
  }
  .grid-item {
    background-color: lightcoral;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

/* visibility: hidden hides but keeps space; display: none removes element */

<style>
  .hidden {
    visibility: hidden;
    width: 200px;
    height: 50px;
    background-color: lightblue;
  }
  .none {
    display: none;
  }
</style>

<div class="hidden">Invisible but takes space</div>
<div class="none">Not rendered at all</div>

/* Create a perfect circle using border-radius */

<style>
  .circle {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    border-radius: 50%; /* makes circle */
  }
</style>

<div class="circle"></div>

/* CSS variables (custom properties) */

<style>
  :root {
    --main-color: coral;
    --padding-size: 15px;
  }
  .box {
    background-color: var(--main-color);
    padding: var(--padding-size);
    color: white;
  }
</style>

<div class="box">Using CSS variables</div>

/* Relative units depend on other sizes, absolute units are fixed */

<style>
  .relative-unit {
    width: 50%; /* relative to parent */
    font-size: 2em; /* relative to parent font */
    background-color: lightyellow;
  }
  .absolute-unit {
    width: 200px; /* fixed size */
    font-size: 16px; /* fixed size */
    background-color: lightgray;
  }
</style>

<div class="relative-unit">50% width, 2em font</div>
<div class="absolute-unit">200px width, 16px font</div>

/* Making text bold and italic */

<style>
  .bold-text {
    font-weight: bold;
  }
  .italic-text {
    font-style: italic;
  }
</style>

<p class="bold-text">Bold text</p>
<p class="italic-text">Italic text</p>

/* Inline, block, inline-block elements */

<style>
  .inline {
    display: inline;
    background-color: lightblue;
    padding: 5px;
  }
  .block {
    display: block;
    background-color: lightcoral;
    padding: 10px;
  }
  .inline-block {
    display: inline-block;
    background-color: lightgreen;
    padding: 8px;
  }
</style>

<span class="inline">Inline</span>
<div class="block">Block</div>
<div class="inline-block">Inline-block</div>

/* Adding box-shadow */

<style>
  .shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightgray;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    margin: 10px 0;
  }
</style>

<div class="shadow-box">Box with shadow</div>

/* Responsive image with max-width and height auto */

<style>
  img.responsive {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="https://via.placeholder.com/600x400" alt="Responsive Image" class="responsive">

/* Float property example */

<style>
  .float-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    margin: 5px;
  }
  .content {
    overflow: auto; /* clear floats */
    background-color: lightyellow;
  }
</style>

<div class="float-left">Floated left</div>
<div class="content">Content next to floated element</div>

/* Clear floats using clear property or clearfix hack */

<style>
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<div class="clearfix">
  <div style="float:left; width:100px; height:100px; background:lightcoral;">Float</div>
  <div style="float:right; width:100px; height:100px; background:lightblue;">Float</div>
</div>

/* z-index controls stacking order of positioned elements */

<style>
  .box1 {
    position: relative;
    z-index: 1;
    background-color: lightblue;
    width: 150px;
    height: 150px;
  }
  .box2 {
    position: relative;
    z-index: 2;
    background-color: lightcoral;
    width: 100px;
    height: 100px;
    margin-top: -100px;
    margin-left: 50px;
  }
</style>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

/* Absolute positioning relative to parent */

<style>
  .parent {
    position: relative; /* parent sets reference */
    width: 300px;
    height: 200px;
    background-color: lightyellow;
  }
  .child {
    position: absolute; /* absolute within parent */
    top: 20px;
    left: 20px;
    background-color: lightblue;
    padding: 10px;
  }
</style>

<div class="parent">
  <div class="child">Positioned child</div>
</div>

/* CSS position types explained */

<style>
  .fixed {
    position: fixed; /* relative to viewport */
    top: 0;
    right: 0;
    background-color: lightgreen;
    width: 150px;
    height: 50px;
  }
  .absolute {
    position: absolute; /* relative to nearest positioned ancestor */
    top: 60px;
    left: 0;
    background-color: lightcoral;
    width: 150px;
    height: 50px;
  }
  .relative {
    position: relative; /* relative to normal flow */
    top: 10px;
    left: 10px;
    background-color: lightblue;
    width: 150px;
    height: 50px;
  }
  .static {
    position: static; /* default */
    background-color: lightgray;
    width: 150px;
    height: 50px;
  }
</style>

<div class="fixed">Fixed</div>
<div class="absolute">Absolute</div>
<div class="relative">Relative</div>
<div class="static">Static</div>

/* Media queries for responsive design */

<style>
  .box {
    width: 400px;
    height: 100px;
    background-color: lightblue;
  }

  @media (max-width: 600px) {
    .box {
      background-color: lightcoral;
      width: 100%;
    }
  }
</style>

<div class="box">Resize browser to see color change</div>

/* Pseudo-classes for styling states */

<style>
  a:link {
    color: blue;
  }
  a:visited {
    color: purple;
  }
  a:hover {
    color: red;
  }
  a:active {
    color: orange;
  }
</style>

<a href="#">Link</a>

/* Simple CSS transition on hover */

<style>
  .box {
    width: 150px;
    height: 100px;
    background-color: lightblue;
    transition: background-color 0.5s ease;
  }
  .box:hover {
    background-color: lightcoral;
  }
</style>

<div class="box">Hover over me</div>

/* CSS variables example */

<style>
  :root {
    --main-color: #3498db;
    --padding: 10px;
  }
  .box {
    background-color: var(--main-color);
    padding: var(--padding);
    color: white;
  }
</style>

<div class="box">Box with CSS variables</div>

CSS Questions

The site is under development.

CSS Questions

CSS Questions

The site is under development.

CSS Questions

What is the difference between relative and absolute positioning in CSS?

How do you center a div both vertically and horizontally?

How do CSS media queries work?

What is the box model in CSS?

What is specificity in CSS?

How to make a responsive image in CSS?

How to use Flexbox to center content?

How do transitions work in CSS?

How to create a simple CSS animation?

What is z-index in CSS?

What are pseudo-classes in CSS?

How to create a CSS grid container?

What is the difference between em and rem units?

How to use the CSS float property?

What are the different display values in CSS?

How do you clear floats in CSS?

What is the difference between padding and margin?

What is the use of the overflow property?

How to center a div horizontally and vertically?

What are media queries and how do you use them?

What is the box-sizing property and how does it work?

How to implement CSS variables (custom properties)?

Explain the difference between relative, absolute, fixed, and sticky positioning.

How do you create a responsive layout using Flexbox?

What are media types in CSS?

How can you optimize CSS for better performance?

What is specificity in CSS and how is it calculated?

What is the difference between relative and absolute units in CSS?

How to use pseudo-classes in CSS? Give examples.

How to implement a CSS grid layout with 3 columns?

How do you center a div horizontally and vertically using Flexbox?

What is the difference between em and rem units in CSS?

How do you hide an element visually but keep it accessible for screen readers?

How to create a sticky footer using CSS?

What is the difference between inline, block, and inline-block elements?

How can you apply styles only to devices with a max-width of 600px?

What is the :nth-child() pseudo-class? Give examples.

How to create a hover effect with a smooth transition in CSS?

What is the difference between relative, absolute, fixed, and sticky positioning?

How to create a responsive image that scales with its container?

What is the box-sizing property and why is it useful?

How can you make a div scrollable only on the y-axis?

Explain the float property and how clearfix works.

What is z-index and how does stacking context work?

How do you use CSS variables?

How to create a CSS grid with two columns and a gap?

What is the difference between visibility: hidden and display: none?

How can you apply styles conditionally using media queries?

What is the difference between em, rem, px, and % units in CSS?

How to center a div horizontally and vertically with Flexbox?

What is the difference between relative, absolute, fixed, and sticky positioning?

How to create a responsive image that scales with its container?

Explain how the :hover pseudo-class works.

What does the !important declaration do in CSS?

How to hide elements visually but keep them accessible for screen readers?

What is the difference between inline, block, and inline-block elements?

How to make text bold and italic using CSS?

How to apply a linear gradient background in CSS?

How to create a CSS animation that changes color?

How to make a CSS grid with 3 equal columns?

What is the box-sizing property and how does it affect element size?

How do you center a block element horizontally using CSS?

What is the difference between em, rem, and px units in CSS?

How do you make a circle shape with CSS?

How to create a CSS tooltip that appears on hover?

Explain the difference between visibility: hidden and display: none.

How to implement a CSS flex container with space-between alignment?

What is the difference between min-width and max-width properties?

How do you apply styles only on screens smaller than 600px using media queries?

What does the CSS property z-index control?

What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

How does the float property work and how can you clear floats?

What is the difference between padding and margin in CSS?

How can you make an element invisible but still take up space in the layout?

What are pseudo-classes in CSS? Give an example.

How can you make a responsive image that scales with the browser window?

Explain the difference between inline, block, and inline-block elements.