In this module, we will explore the basics of styling in Ionic. Styling is a crucial aspect of any application as it enhances the user experience and makes the app visually appealing. Ionic provides a robust set of tools and methodologies to style your applications effectively.

1. Ionic Framework and CSS: Understand how Ionic leverages CSS for styling.
2. Global Styles: Learn about global styles and how to apply them.
3. Component-Specific Styles: Discover how to style individual components.
4. Utility Attributes: Utilize Ionic's built-in utility attributes for quick styling.
5. Theming: Get an overview of theming in Ionic.

Ionic uses standard web technologies like HTML, CSS, and JavaScript. It also integrates with Angular, React, and Vue, allowing you to use CSS and preprocessors like SCSS to style your applications.

• HTML: Defines the structure of the Ionic components.
• CSS: Styles the div with the class custom-style to have blue text, a font size of 20px, centered text, and a top margin of 20px.

Global styles are applied across the entire application. They are defined in the src/global.scss file.

• Global SCSS: Sets the font family and background color for the entire application.

Component-specific styles are scoped to a particular component, ensuring that styles do not leak into other parts of the application.

• Component HTML: Defines the structure of the home page.
• Component SCSS: Styles the div with the class home-content to have green text and a font size of 18px.

Ionic provides utility attributes that can be used to quickly apply common styles without writing custom CSS.

• Utility Attributes: The expand="full" attribute makes the button full width, and the color="primary" attribute applies the primary color theme.

Theming in Ionic allows you to customize the look and feel of your application by defining color schemes and applying them throughout your app.

• Theme Variables: Defines primary, secondary, and tertiary colors that can be used throughout the application.

1. Create a new Ionic page named About.
2. Add a header with the title "About Us".
3. Add a content section with a paragraph describing your app.
4. Apply global styles to set the background color of the app to light gray.
5. Apply component-specific styles to the About page to set the text color to dark blue and center the text.

• HTML: Defines the structure of the About page.
• Component SCSS: Styles the div with the class about-content to have dark blue text, centered text, and a top margin of 20px.
• Global SCSS: Sets the background color of the entire application to light gray.

In this section, we covered the basics of styling in Ionic, including global styles, component-specific styles, utility attributes, and theming. Understanding these concepts will help you create visually appealing and consistent applications. In the next module, we will dive deeper into using CSS and SCSS in Ionic to further enhance your app's styling capabilities.