Semester_1
01_VisualStudioCode
02_GitHub
03_MarkDown
04_SimpleTAGs
05_CSSLayout



content

CSS Layout

Block and Inline Elements in HTML

Block elements

  • Always start on a new line

  • Take up the full width available

  • Often used for structure

Examples of Block Elements

Element Description
<div> Generic container block
<p> Paragraph
<h1> – <h6> Headings
<ul> / <ol> Lists
<header>, <footer>, <section> Semantic page sections

Inline elements

  • Stay in the same line as the surrounding text

  • Take up only as much space as needed

  • Used for styling parts of text

Examples of Inline Elements

Element Description
<span> Generic inline container
<a> Link
<strong> Bold text
<em> Italic text
<img> Image 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Block and Inline Elements</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Visual borders for demonstration */
    div, p {
      border: 2px solid blue;
      margin-bottom: 10px;
    }

    span, a, strong {
      border: 1px dashed red;
      padding: 2px 4px;
    }
  </style>
</head>
<body>
  <h1>Example: Block vs. Inline</h1>

  <!-- Block Elements -->
  <div>This is a DIV block – it takes the full width of the page.</div>
  <p>This is a paragraph (P). It also starts on a new line.</p>

  <!-- Inline Elements -->
  <p>Inside this paragraph, we have a <span>SPAN</span>, an <a href="#">anchor link</a>, and a <strong>bold text</strong> — all on the same line.</p>

  <p>Inline elements continue within the same text flow.</p>
</body>
</html>

<div> and <p> appear below each other because they are block elements.

<span>, <a>, and <strong> appear next to each other because they are inline elements.

The colored borders make the layout behavior visible.

Flexbox

Flexbox is a CSS layout model that makes it easier to design flexible and responsive layouts.

It allows you to arrange elements in a row or a column, automatically handling spacing, alignment, and resizing — even when the screen size changes.

div {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .container {
      display: flex;
      background-color: #eee;
      padding: 10px;
    }
    .box {
      background-color: #0078d7;
      color: white;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

The boxes (1, 2, 3) are automatically arranged in a row, evenly spaced.

Important Flexbox Properties

Property Applied to Description
display: flex; container Enables Flexbox
flex-direction container Sets layout direction: row (default) or column
justify-content container Controls horizontal alignment (left, center, space-around…)
align-items container Controls vertical alignment
gap container Adds space between items
flex-wrap container Allows items to wrap to a new line if too wide
align-self item Aligns a single item differently from others
flex-grow item Defines how much an item expands relative to others 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .center {
      display: flex;
      justify-content: center;  /* center horizontally */
      align-items: center;      /* center vertically */
      height: 200px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="center">
    <p>Hello Flexbox!</p>
  </div>
</body>
</html>

The text “Hello Flexbox!” is perfectly centered both vertically and horizontally — something that used to be very difficult without Flexbox!

Grid Layout

CSS Grid Layout (often just called Grid) is a 2-dimensional layout system in CSS. That means it lets you arrange elements in rows and columns at the same time — like a spreadsheet or a table, but much more flexible.

💡 Flexbox → 1D (row or column)
💡 Grid → 2D (rows and columns)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
      gap: 10px;                          /* space between items */
    }
    .item {
      background-color: #0078d7;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

6 boxes arranged automatically into 3 equal columns.

Important Grid Properties

Property Applied To Description
display: grid; container Activates Grid layout
grid-template-columns container Defines number and size of columns
grid-template-rows container Defines number and size of rows
gap container Sets spacing between grid cells
grid-column / grid-row item Controls how many columns/rows an item spans
justify-items / align-items container Controls alignment of content inside each cell
justify-content / align-content container Controls alignment of the entire grid
grid-area item Assigns a named grid area 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid</title>
  <style>
    .page {
      display: grid;
      grid-template-columns: 1fr 3fr 1fr;
      grid-template-rows: auto 1fr auto;
      gap: 10px;
    }
    header {
      grid-column: 1 / 4;
      background: #0078d7;
      color: white;
      text-align: center;
      padding: 10px;
    }
    nav {
      background: #eee;
      padding: 10px;
    }
    main {
      background: #fff;
      padding: 10px;
    }
    aside {
      background: #eee;
      padding: 10px;
    }
    footer {
      grid-column: 1 / 4;
      background: #0078d7;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </div>
</body>
</html>

Header and footer stretch across the full width.

Navigation, main content, and sidebar are in 3 columns.

Automatically adjusts to screen size.

Positioning

Positioning in CSS means controlling where an element appears on a page —
either in the normal document flow (like paragraphs one below another) or manually positioned somewhere else.

position: value;

There are five main values:

Value Behavior Typical Use
static Default – normal flow Basic layout (default for all elements)
relative Moves relative to its normal position Small adjustments
absolute Positioned relative to the nearest positioned ancestor Tooltips, popups
fixed Positioned relative to the browser window Sticky headers, floating buttons
sticky Scrolls normally, but “sticks” when reaching a point Sticky menus or titles

static

position: static; (default)

<p>This is static – normal flow.</p>

Explanation:

  • The element appears where it normally would.

  • No coordinates (top, left, etc.) are applied.

relative

position: relative;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .box {
      position: relative;
      top: 20px;
      left: 30px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="box">Relative Box</div>
</body>
</html>

Moves the box 20px down and 30px to the right from its normal position —
but still leaves its original space in the layout.

absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .container {
      position: relative;   /* important! */
      width: 300px;
      height: 150px;
      background-color: lightgray;
    }
    .absolute-box {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: coral;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="absolute-box">I’m absolute!</div>
  </div>
</body>
</html>

The orange box is placed inside the container,

10px from the top and right edge.

It is removed from the normal document flow.

fixed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .fixed-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #0078d7;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button class="fixed-button">Chat</button>
</body>
</html>

sticky

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style>
    .sticky {
      position: sticky;
      top: 0;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h2 class="sticky">I stick to the top!</h2>
  <p>Lots of text here...</p>
</body>
</html>