983366: updated the UG for AppBar

Author: praveensf4999

blazor/appbar/accessibility.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor AppBar Component
 
-The [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) component is developed with a strong commitment to accessibility, ensuring it adheres to globally recognized standards for inclusive user interfaces. It follows guidelines from [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor AppBar[Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) component is developed to support accessibility and aligns with globally recognized standards for inclusive user interfaces. It follows guidelines from [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor AppBar component is outlined below.
 

blazor/appbar/design.md

@@ -11,7 +11,7 @@ documentation: ug
 
 ## AppBarSpacer
 
-[AppBarSpacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AppBarSpacer.html) is used to introduce flexible spacing between items within the AppBar. It's particularly useful for pushing content to the left or right, or for creating balanced layouts.
+[AppBarSpacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AppBarSpacer.html) is used to introduce flexible spacing between items within the AppBar. It is particularly useful for pushing content to the left or right, or for creating balanced layouts.
 
 The following example demonstrates how to use `AppBarSpacer` to provide dynamic spacing between buttons:
 
@@ -72,7 +72,7 @@ The following example shows how to use `AppBarSeparator` to visually group actio
 
 ## Responsive AppBar with Media Queries
 
-You can use CSS Media Queries to define responsive layouts, ensuring the AppBar remains functional and aesthetically pleasing on both desktop and mobile devices.
+CSS media queries can be used to create responsive layouts, allowing the AppBar to remain functional and visually consistent across both desktop and mobile devices.
 The following example demonstrates how CSS media queries can adjust the AppBar's layout to wrap its content and resize for smaller screens:
 
 ```cshtml

blazor/appbar/position.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Positioning in Blazor AppBar Component
 
-The AppBar component offers flexible control over its placement and behavior within your application's layout. You can configure its position and whether it remains visible during scrolling using the  [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Position) and [IsSticky](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_IsSticky) property. The AppBar provides the following options for setting its position:
+The AppBar component offers flexible control over its placement and behavior within your application's layout. You can configure its position and whether it remains visible during scrolling using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_Position) and [IsSticky](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_IsSticky) property. The AppBar provides the following options for setting its position:
 
 * Top AppBar
 * Bottom AppBar

blazor/appbar/style-and-appearance.md

@@ -11,11 +11,11 @@ documentation: ug
 
 The AppBar component is highly customizable, allowing you to tailor its visual presentation to perfectly fit your application's design language. This document outlines various methods to modify the AppBar's appearance, focusing on overriding default CSS, utilizing custom classes, and applying HTML attributes.
 
-For comprehensive custom theming across Syncfusion controls, you can utilize our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material), which provides a guided interface to create and manage custom themes.
+For comprehensive custom theming across Syncfusion controls, the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material) offers an intuitive interface to create and manage personalized custom themes efficiently.
 
 ## Customizing AppBar Elements with CSS Classes
 
-The AppBar component is structured with a set of default CSS classes that you can target to override its default styles. Here's a list of common classes and their purpose:
+The AppBar component includes a set of default CSS classes that can be targeted to customize its appearance. Below is a list of commonly used classes and their respective purposes:
 
 |CSS Class | Purpose of Class |
 |-----|----- |
@@ -31,8 +31,7 @@ N> You can change the prominent AppBar height if larger titles, images, or texts
 
 ## CssClass
 
-The `CssClass` property of the `SfAppBar` component allows you to apply a custom CSS class directly to the root HTML element of the AppBar. This provides a clean way to introduce your own styles or completely override existing ones.
-
+The `CssClass` property of the `SfAppBar` component assigns a custom CSS class to its root HTML element.
 In the example below, the AppBar background and color are customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAppBar.html#Syncfusion_Blazor_Navigations_SfAppBar_CssClass) property.
 
 ```cshtml