Lecture Notes Of Class 23: Enhancing HTML with CSS

Rashmi Mishra
5 minute read
0

Lecture Notes Of  Class 23
Enhancing HTML with CSS


Objective:

The objective of this class is to introduce advanced CSS techniques that enhance HTML layouts. Students will learn how to use the box model and positioning techniques to style and position HTML content effectively.

Outcome:

By the end of this class, students will be able to apply the box model and positioning techniques to create well-structured, visually appealing layouts in HTML. They will also understand how to manage spacing, borders, and content positioning on a web page.


Introduction to CSS Layouts

CSS (Cascading Style Sheets) is essential for designing and enhancing the structure of web pages. While HTML provides the basic structure, CSS adds visual styling to make the content visually appealing and functional. Two key CSS concepts for designing layouts are the box model and positioning techniques.

1. The Box Model

The box model is a fundamental concept in CSS, which defines how elements are displayed on a webpage. Every element on a webpage is treated as a rectangular box, and understanding this box is crucial for controlling layout.

Box Model Components:

The box model consists of the following parts:

  • Content: The actual content of the element (e.g., text or images).
  • Padding: The space between the content and the border. It creates space inside the element.
  • Border: A border around the padding and content. It can be styled (color, width, style).
  • Margin: The space outside the border. It creates space between the element and other elements.

Box Model Diagram:

+---------------------------+
|       Margin              |
|   +---------------------+  |
|   |     Border           |  |
|   |   +-------------+     |  |
|   |   |  Padding    |     |  |
|   |   |  +-------+  |     |  |
|   |   |  |Content |  |     |  |
|   |   |  +-------+  |     |  |
|   |   +-------------+     |  |
|   +---------------------+  |
+---------------------------+

Example:

<div class="box">
  This is a box model example.
</div>
 
.box {
  width: 200px;          /* Content width */
  padding: 20px;         /* Space inside the box */
  border: 5px solid black; /* Border around the box */
  margin: 30px;          /* Space outside the box */
}
 
 Explanation:
  • The content of the div is 200px wide.
  • The padding adds 20px of space inside the div, making the total width (content + padding) 240px.
  • The border is 5px, and the margin is 30px, affecting the space around the element.

2. Positioning in CSS

Positioning is a powerful technique in CSS for controlling how elements are placed in relation to their parent or surrounding elements. There are several positioning methods:

2.1 Static Positioning (Default)

By default, elements are positioned static, meaning they flow naturally from top to bottom in the document.

div {
  position: static; /* Default behavior */
}
 

2.2 Relative Positioning

Relative positioning moves an element relative to its normal position. It doesn’t affect the layout of other elements.

div {
  position: relative;
  top: 20px;   /* Moves the element 20px down */
  left: 30px/* Moves the element 30px to the right */
}
 

 2.3 Absolute Positioning

Absolute positioning removes the element from the normal document flow and positions it relative to the nearest positioned ancestor (non-static). If there’s no such ancestor, it will be positioned relative to the <html> or <body> element.

div {
  position: absolute;
  top: 50px;   /* Moves the element 50px from the top of the nearest positioned ancestor */
  left: 100px; /* Moves the element 100px from the left */
}
 
 

2.4 Fixed Positioning

Fixed positioning removes an element from the normal flow and places it relative to the viewport (the visible area of the web page), so it stays fixed even when the page is scrolled.

div {
  position: fixed;
  bottom: 0;   /* Fixed at the bottom of the viewport */
  right: 0;    /* Fixed at the right of the viewport */
}
 
 

2.5 Sticky Positioning

Sticky positioning combines relative and fixed positioning. The element is treated as relative until it reaches a certain scroll position, then it becomes fixed.

div {
  position: sticky;
  top: 0; /* Sticks the element to the top of the viewport when you scroll */
}
 
 

3. Applying Positioning and Box Model Together

You can combine both the box model and positioning to create sophisticated layouts.

Example: Centering a Box in a Page

To center a box both horizontally and vertically in a page, you can use absolute positioning along with margin adjustments.

<div class="centered-box">
  This box is centered!
</div>
 
 
body {
  height: 100vh; /* Set the height of the body to the full height of the viewport */
  margin: 0;     /* Remove default margin */
  display: flex; /* Enable flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
 
.centered-box {
  width: 300px;
  height: 200px;
  background-color: lightblue;
  padding: 20px;
  border: 5px solid #000;
}
 
 
Explanation:
  • The body uses flexbox to center the .centered-box both horizontally and vertically.
  • The .centered-box uses the box model to define its size and padding.

4. Flexbox for Advanced Layouts

Flexbox is another powerful layout tool that allows for dynamic and responsive designs. It enables easy alignment of elements within a container.

Example: Flexbox Layout
<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>
 .flex-container {
  display: flex; /* Activate flexbox layout */
  justify-content: space-around; /* Distribute items evenly with space between */
}
 
.flex-item {
  width: 100px;
  height: 100px;
  background-color: coral;
  text-align: center;
  line-height: 100px;
}
 

Explanation:

  • The .flex-container uses display: flex to create a flexible layout.
  • The .flex-item elements are spaced evenly using justify-content: space-around.

Conclusion

In this class, we explored advanced CSS techniques like the box model and positioning to create complex layouts. We also briefly touched on using flexbox for modern layouts. These concepts are foundational for designing responsive and well-structured web pages.


Practice Exercise:

1.   Create a webpage that uses the box model to style a container with a header, main content area, and footer.

2.   Use absolute and relative positioning to position elements in different locations on the page.

3.   Implement a sticky header that stays at the top of the page while scrolling.


Homework:

  • Create a layout using the box model and positioning to display a navigation bar, content area, and sidebar.
  • Experiment with flexbox to arrange items in rows and columns.
Tags

Post a Comment

0Comments

Post a Comment (0)