docs(header): add collapse header styling details (#19669)

* update large title styles

* add missing space

core/src/components/title/readme.md

@@ -89,6 +89,15 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
 
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```
+
 
 ### React
 
@@ -208,6 +217,15 @@ In this example, notice that we have added two sets of `IonButtons` both with `c
 
 `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
 
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```
+
 
 ### Vue
 
@@ -297,6 +315,15 @@ In this example, notice that we have added two sets of `ion-buttons` both with `
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
 
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```
+
 
 
 ## Properties

core/src/components/title/usage/angular.md

@@ -77,3 +77,12 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```

core/src/components/title/usage/javascript.md

@@ -77,3 +77,12 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```

core/src/components/title/usage/react.md

@@ -113,3 +113,12 @@ export const LargeTitleExample: React.FC = () => (
 In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
 
 `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```

core/src/components/title/usage/vue.md

@@ -83,3 +83,12 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```