CSS Notes – Alignment & Display Properties

---

1. text-align Property

📌 What it does?

The text-align property controls the horizontal alignment of text or inline content inside an element.

• It affects text, inline elements, and inline-block elements within tags like <p>, <h1>, <div>.
• This property sets whether the content aligns to the left, right, center, or is justified.

Detailed Explanation:

• Left Align: Text aligns to the left edge of its container. This is default for most documents and web pages.
• Right Align: Text aligns to the right edge. Useful for signatures, dates, or special formatting.
• Center Align: Text is centered horizontally. Commonly used in headings and titles.
• Justify: Text is stretched so each line fills the container width, except last line. It creates a neat block appearance and maintains even margins on both sides.

Examples:

1. Left Align

<p style="text-align: left;">This text is left aligned.</p>

2. Center Align

<p style="text-align: center;">This text is centered.</p>

3. Right Align

<p style="text-align: right;">This text is right aligned.</p>

4. Justify

<p style="text-align: justify;">
  This paragraph is justified. All lines will stretch to equal width.
</p>

When to use?

• Headings often look better center-aligned.
• Signatures or dates at end of documents can be right aligned.
• Justified text works well for newspapers, books, or formal paragraphs.
• For general reading, left alignment remains most readable.

---

2. float Property

📌 What it does?

float moves an element to the left or right of its container. Other inline elements like text will wrap around the floated element.

• This is very useful for placing images beside text.
• Also helps layout small boxes or sidebars horizontally.

Detailed Explanation:

• Float left: Element moves to the left; content flows on the right side.
• Float right: Element moves to the right; content flows on the left side.
• None: Default state, element stays in normal flow.
• Inherit: Element uses the float value of its parent.

Examples:

1. Floating an Image Left with Text Wrapping

<img src="pic.jpg" style="float: left; width: 150px;" alt="Sample Image" />
<p>This paragraph will wrap around the image that is floated to the left.</p>

Observation: The image is pushed to left, and paragraph text starts beside it on the right, wrapping neatly.

2. Side-by-Side Floating Boxes

<div style="float: left; width: 100px; margin: 10px; background: lightblue;">
  Box 1
</div>
<div style="float: left; width: 100px; margin: 10px; background: lightgreen;">
  Box 2
</div>

Observation: The two colored boxes appear side by side horizontally within the container.

Clearing Float

• Sometimes, after floated elements, the next element tries to wrap around them.
• To avoid this, we use clear: both; which stops elements from flowing next to floats.

Example:

<div style="clear: both;"></div>

Observation: This empty block ensures subsequent content starts below the floated elements.

When to use?

• To create simple two-column page layouts.
• To place images aligned beside paragraphs.
• To align multiple small blocks or buttons horizontally.

---

⭐ Summary Table

Property	Purpose	Common Values
text-align	Aligns text horizontally	left, right, center, justify
float	Moves an element left/right and allows wrapping	left, right, none

---

Activity: Exploring float and clear

Objective:

Understand how floated elements affect layout and how clearing works.

Materials:

• An HTML file or online editor (like JSFiddle or CodePen)
• Basic knowledge of HTML and CSS

Steps:

1. Create two colored <div> boxes with float: left each of width 100px and margin 10px.
2. Add a paragraph after these <div>s without clearing.
3. Observe that the paragraph wraps next to floated boxes.
4. Add a <div style="clear: both;"></div> after the boxes.
5. Refresh and observe how paragraph now moves below floated boxes due to clear.

Observation:

• Floated elements pull out of normal flow and let inline content flow beside them.
• Without clearing, second elements can wrap beside floats oddly.
• Clearing ensures proper separation and layout stability.

---

Scenario Based Questions

1. Scenario: You want the heading of a page to stand out centered on top.

   • Question: Which text-align value will you use?
   • Answer: Use text-align: center; to center the heading horizontally on the page.

2. Scenario: You need to place a small image on the right side of a paragraph so that text wraps on left.

   • Question: How will you achieve this using CSS?
   • Answer: Apply float: right; on the image element, so it moves to right and text wraps to its left.

3. Scenario: After floating two boxes left, the footer content is overlapping with the boxes.

   • Question: What CSS property can you apply to fix this?
   • Answer: Use <div style="clear: both;"></div> before footer to move it below floated boxes.

4. Scenario: You want a paragraph to have clean edges on both sides by stretching words evenly.

   • Question: Which text-align value should you select?
   • Answer: Use text-align: justify; to stretch lines so left and right edges align evenly.

5. Scenario: You have floated several small buttons left to make a toolbar aligned horizontally.

   • Question: How can you ensure next content starts below these buttons?
   • Answer: Add a clearing element with clear: both; after the buttons to avoid wrapping issues.

---