FNB App Academy Notes 17 May 2025
Let’s continue from yesterday’s notes and dive deeper into practical examples.
Understanding CSS Basics
CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages. It’s essential to understand the basics of CSS, including:
Selectors
– Tag selectors (e.g., h1)
– Class selectors (e.g., .header)
– ID selectors (e.g., #logo)
Properties
– Define the style attributes of an element
– Examples: color, font-size, background-image
Values
– Specify the value of a property
– Examples: red for color, 16px for font-size
Box Model
The box model consists of:
Content Area
– The area where the content is displayed
Padding
– The space between the content area and the border
Border
– The visible outline of the element
Margin
– The space between the element and other elements
Display Property
Common values include:
Block
– Displays an element as a block-level element
Inline
– Displays an element as an inline-level element
Inline-Block
– Displays an element as an inline-level block element
Positioning
Common values include:
Static
– The default positioning value
Relative
– Positions an element relative to its normal position
Absolute
– Positions an element absolutely, relative to its nearest positioned ancestor
Fixed
– Positions an element fixed, relative to the viewport
Styling HTML Elements
CSS provides a wide range of properties to style HTML elements, including:
Color
– Sets the text color of an element
Background-Color
– Sets the background color of an element
Font-Size
– Sets the size of the font
Font-Family
– Sets the font family
Practical Coding Examples
Let’s create a simple web page with a header, navigation menu, and main content area.
HTML Code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Example Web Page</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to our web page</h1>
<p>This is a sample web page demonstrating CSS concepts.</p>
</main>
</body>
</html>
CSS Code
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 10px;
}
This example demonstrates the use of CSS selectors, properties, and values to style a simple web page. It also showcases the box model, display property, and positioning.
Advanced CSS Techniques
Some advanced CSS techniques include:
CSS Grid
– A powerful layout system for creating complex, grid-based layouts
Flexbox
– A layout mode for creating flexible, responsive layouts
CSS Animations
– A way to create complex animations using CSS keyframes
Best Practices
Following best practices in CSS development is essential for maintaining a clean, efficient, and scalable codebase. Some key best practices include:
Using a Preprocessor
– Like Sass or Less, to write more efficient and modular CSS code
Organizing Code
– Using a consistent naming convention and organizing code into logical sections
Using CSS Frameworks
– Like Bootstrap or Tailwind CSS, to speed up development and ensure consistency
By applying these concepts and best practices, you can create efficient, scalable, and visually appealing web applications.
Conclusion