FNB App Academy Week 2 Comprehensive Guide 13 May 2025

Week 2 Notes: Styling Your App with CSS
Introduction to CSS
CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages. In Week 2 of the FNB App Academy, we’ll dive into the world of CSS and learn how to style our apps with fonts, colors, hover effects, and more.

CSS Fundamentals
CSS is used to separate the presentation of a document from its structure, which is defined in HTML. Here are some key CSS concepts:

– Selectors: Used to target specific HTML elements and apply styles to them.
– Properties: Used to define the styles applied to selected elements, such as color, font-size, and background-color.
– Values: Used to specify the value of a property, such as a color value or font size.

CSS Selectors
CSS selectors are used to target specific HTML elements and apply styles to them. Here are some common types of selectors:

– Element Selectors: Target specific HTML elements, such as h1, p, or img.
– Class Selectors: Target elements with a specific class attribute, such as .header or .footer.
– ID Selectors: Target elements with a specific id attribute, such as #logo or #nav.

CSS Properties
CSS properties are used to define the styles applied to selected elements. Here are some common CSS properties:

– Color: Specifies the color of text or background.
– Font-size: Specifies the size of text.
– Font-family: Specifies the font family used for text.
– Background-color: Specifies the background color of an element.

CSS Units
CSS units are used to specify the measurement of properties, such as font-size or width. Here are some common CSS units:

– px (Pixels): A fixed unit of measurement.
– em: A relative unit of measurement based on the font-size of the parent element.
– rem: A relative unit of measurement based on the root element’s font-size.

CSS Box Model
The CSS box model is a fundamental concept in CSS that describes the structure of an HTML element. Here are the components of the box model:

– Content Area: The area that contains the content of the element.
– 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.

CSS Display Property
The display property is used to specify how an element is displayed. Here are some common values:

– Block: Displays the element as a block-level element.
– Inline: Displays the element as an inline-level element.
– Inline-block: Displays the element as an inline-level block element.

CSS Positioning
CSS positioning is used to specify the position of an element. Here are some common values:

– Static: The default position of an element.
– Relative: Positions the element relative to its normal position.
– Absolute: Positions the element absolutely relative to its nearest positioned ancestor.
– Fixed: Positions the element fixed relative to the viewport.

Best Practices
Here are some best practices to keep in mind when working with CSS:

– Use a preprocessor: Consider using a CSS preprocessor like Sass or Less to write more efficient and modular CSS code.
– Use a consistent naming convention: Use a consistent naming convention for classes and IDs to make your code more readable and maintainable.
– Test and iterate: Test your CSS code in different browsers and devices, and iterate on your design to ensure it looks great everywhere.

Conclusion
In Week 2 of the FNB App Academy, we’ve covered the basics of CSS and learned how to style our apps with fonts, colors, hover effects, and more. By mastering CSS, you’ll be able to create visually appealing and user-friendly interfaces for your apps. Keep practicing, and you’ll become proficient in CSS in no time!

Project Development
Now that you’ve learned the basics of CSS, it’s time to apply your knowledge to a real-world project. In this project, you’ll combine HT…