FNB App Academy Notes 15 May 2025

Understanding CSS
CSS Fundamentals
Topics Covered:
1. CSS Box Model
2. Display Property
3. Positioning

CSS Box Model
The CSS Box Model is a fundamental concept in web development that describes the structure of an HTML element as a rectangular box. The box model consists of four main parts:

1. Content Area: The area where the content is displayed.
2. Padding: The space between the content area and the border.
3. Border: The visible outline of the box.
4. Margin: The space between the box and other elements.

Example:

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}

In this example, the .box element has a content area of 200×100 pixels, with 20 pixels of padding, a 1-pixel solid black border, and 10 pixels of margin.

Display Property
The display property in CSS determines how an element is displayed. Common values include:

1. block: Displays the element as a block-level element.
2. inline: Displays the element as an inline-level element.
3. inline-block: Displays the element as an inline-level block element.
4. flex: Displays the element as a flexible container.
5. none: Hides the element.

Example:

.inline-block {
display: inline-block;
width: 100px;
height: 50px;
background-color: #f0f0f0;
border: 1px solid #000;
}

In this example, the .inline-block element is displayed as an inline-level block element with a width, height, background color, and border.

Positioning
The position property in CSS determines how an element is positioned. Common values include:

1. static: The default positioning value.
2. relative: Positions the element relative to its normal position.
3. absolute: Positions the element absolutely relative to its nearest positioned ancestor.
4. fixed: Positions the element fixed relative to the viewport.
5. sticky: Positions the element sticky relative to its nearest ancestor.

Example:

.relative {
position: relative;
top: 20px;
left: 30px;
}

.absolute {
position: absolute;
top: 0;
right: 0;
}

In this example, the .relative element is positioned 20 pixels from the top and 30 pixels from the left of its normal position. The .absolute element is positioned absolutely at the top-right corner of its nearest positioned ancestor.

Code Examples:

<!– Box Model Example –>
<div class=”box”>Box Model Example</div>

<!– Display Property Example –>
<div class=”inline-block”>Inline Block Example</div>

<!– Positioning Example –>
<div class=”relative”>Relative Positioning Example</div>
<div class=”absolute”>Absolute Positioning Example</div>

/* Box Model Styles */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
background-color: #f0f0f0;
}

/* Display Property Styles */
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
background-color: #f0f0f0;
border: 1px solid #000;
}

/* Positioning Styles */
.relative {
position: relative;
top: 20px;
left: 30px;
background-color: #f0f0f0;
border: 1px solid #000;
}

.absolute {
position: absolute;
top: 0;
right: 0;
background-color: #f0f0f0;
border: 1px solid #000;
}

Best Practices:
1. Use the box model to control the layout and spacing of elements.
2. Use the display property to control how elements are displayed.
3. Use positioning to control the position of elements relative to other elements or the viewport.

By mastering these CSS fundamentals, you’ll be able to create visually appealing and well-structured web pages.

Advanced CSS Techniques:
1. CSS Grid: A powerful layout system for creating complex grid-based layouts.
2. CSS Flexbox: A flexible layout system for creating flexible and responsive layouts.
3. CSS Transitions and Animations: Techniques for creating smooth and engaging interactions.