Title: How to Style Your Site with Global Styles Author: Vagelis Published: 9 January 2022 Last modified: 19 April 2023 --- # How to Style Your Site with Global Styles After you’ve selected a theme, you may want to create your own unique look for the site. In Block Themes, you can customize the Styles to set your preferred typography, colors, and more for your entire site. You can also override these Styles for just a few blocks. ## Objectives After completing this lesson, you will be able to: * Design your site with typography, colors, layout, and set styles for specific blocks using Global Styles. * Change the default settings to reflect your own brand using Global Styles. * Change the style of the Pullquote block so it matches the branding across your entire website. * Browse styles and apply preset combinations for your theme. ## Prerequisite Skills Participants will get the most from this lesson if they have familiarity with: * Activating a Block Theme * Using Appearance > Editor ## Readiness Questions * Have you ever found a WordPress theme you really like, but wanted to change the theme colors or fonts? * Are you ready to customize specific blocks, such as the Pullquote block, throughout your site? ## Materials Needed * Local install of WordPress with [demo content](https://learn.wordpress.org/lesson-plan/how-to-add-demo-content-in-wordpress/) * Twenty Twenty-Two or another Block Theme ## Notes for the Presenter * It may be helpful to search online for a color palette generator. Together with attendees, select or create a color palette to implement. ## Lesson Outline * Demonstrate how to get to Styles. * Then show how to browse default styles. * Then show how to configure typography, colors, and layout. * Finish with having attendees configure block settings beyond the example. ## Exercises **Modify Pullquote block styles** We’ve demonstrated how to modify the Verse block. Now it’s your turn. Create your own styles for the Pullquote block. * Go to Appearance > Editor > Styles > Blocks > Pullquote. * Configure your own font and color styles. ## Assessment **Changes made in Appearance > Editor > Styles impact all instances on your site.** 1. True 2. False **Answer:** 1. True **You can access all possible settings a theme’s Styles offers.** 1. True 2. False **Answer:** 2. False. Some themes can disable Styles access to modify settings. You could create a child theme to override this. **You can modify the Styles for types of Blocks from the Appearance > Editor.** 1. True 2. False **Answer:** 1. True. Each block may have its own style. Modifying these will impact each instance across your site. ## Additional Resources * [Styles Overview](https://wordpress.org/support/article/styles-overview/) * [Global Styles documentation](https://make.wordpress.org/design/handbook/focuses/global-styles/) ## Example Lesson To use this feature, you’ll need to be [using a Block Theme](https://wordpress.org/themes/tags/full-site-editing/) and WordPress 5.9 or higher. To install a theme, go to [Appearance > Themes > Add New](https://learn.wordpress.org/lesson-plan/choosing-and-installing-themes/). Once you’ve installed and activated a Block Theme, go to **Appearance > Editor**. In the top right corner, you can select the Styles button (between the Settings icon and the kebab menu) to display the Styles sidebar. You will see an example of the current Styles settings at the top in the Aa: preview. ![sidebar menu to browse and edit styles or customize blocks](https://i0.wp.com/ learn.wordpress.org/files/2022/05/global-styles-menu.png?ssl=1) Changes you make in the Styles will impact your entire site. You can override settings that come with the theme, but modifications will apply to posts, pages, and templates. Notice you can reset global styles by selecting the Styles kebab menu. [⌊Styles kebab menu with a cursor that has selected it. Beneath is a reset to defaults option, and the welcome guide.⌉⌊Styles kebab menu with a cursor that has selected it. Beneath is a reset to defaults option, and the welcome guide.⌉[ ### Browse Styles You can click **Browse styles **to see preset style combinations for your theme. Click the card representing the global styles preview image to see changes applied in the site editor. [⌊four cards representing global theme style variations⌉⌊four cards representing global theme style variations⌉[ ### Typography The typography settings allow you to manage text and link font family, weights, line heights, colors, and padding. You also can toggle between [font size units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#font_size), such as pixels, ems, or rems. [[ ### Colors From the colors options, you can manage your color palette, including your background, text, and link color elements. [[ It is possible for developers to limit access to some settings. If you don’t find these features, read the [theme documentation](https://learn.wordpress.org/lesson-plan/how-to-find-theme-specific-documentation/) for support. #### Solid Palette When you select Palette, you can choose from the colors that came with the theme by default, or add your own. [⌊Global Styles > Colors > Palette displayed.⌉⌊Global Styles > Colors > Palette displayed.⌉[ #### Gradient Palette Gradients and duotone options are possible for many types of blocks across your site. You can modify which gradients are available by selecting the Gradient option within **Styles > Color > Palette**. [⌊Styles > Color > Palette > Gradient displays theme, default, custom, and duotone gradient options.⌉⌊Styles > Color > Palette > Gradient displays theme, default, custom, and duotone gradient options.⌉[ ### Layout The Layout settings allows you to add [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) to your entire site. [[ ### Block Styles Each block on your site can be customized for your site. Every block will contain its own options. [[ For example, the Verse block has options around Layout and the Button block has Typography, Colors, and Layout options.  [⌊Appearance > Editor > Styles > Blocks > Verse > Colors > Background > Gradient⌉⌊ Appearance > Editor > Styles > Blocks > Verse > Colors > Background > Gradient⌉[ Changes here will impact each instance of this block unless it has been individually customized. ## Lesson Wrap Up 💡 Follow with the [Exercises](https://learn.wordpress.org/lesson-plan/how-to-style-your-site-with-global-styles/?output_format=md#Exercises) and [Assessment](https://learn.wordpress.org/lesson-plan/how-to-style-your-site-with-global-styles/?output_format=md#Assessment) outlined above. [ Practice on a private demo site ](https://playground.wordpress.net/?networking=yes) | Duration | 15 mins | | Audience | Users | | Level | [Beginner](https://learn.wordpress.org/lesson-plans/?wporg_lesson_level=beginner) | | Type | Demonstration | | WordPress Version | 5.9 | | Last updated | Apr 19th, 2023 | ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/). ## License [CC BY-SA 4.0 ](http://creativecommons.org/licenses/by-sa/4.0/)