Title: How Styles are generated Published: 13 August 2024 Last modified: 30 September 2024 --- [Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/) [Advanced WordPress User](https://learn.wordpress.org/course/advanced-wordpress-user/) How Styles are generated [ Exit Course ](https://learn.wordpress.org/course/advanced-wordpress-user/) 1. a. [ Unlocking advanced SEO techniques: Part 1 ](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-1-2/) [Preview](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-1-2/) b. [ Unlocking advanced SEO techniques: Part 2 ](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-2-2/) [Preview](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-2-2/) 2. 2 lessons 3. a. [ Adding custom user roles using a WordPress plugin ](https://learn.wordpress.org/lesson/adding-custom-user-roles-using-a-wordpress-plugin/) [Preview](https://learn.wordpress.org/lesson/adding-custom-user-roles-using-a-wordpress-plugin/) 4. 1 lesson, 1 quiz 5. a. [ Creating custom post types and taxonomies ](https://learn.wordpress.org/lesson/creating-custom-post-types-and-taxonomies/) [Preview](https://learn.wordpress.org/lesson/creating-custom-post-types-and-taxonomies/) b. [ WordPress taxonomies ](https://learn.wordpress.org/lesson/wordpress-taxonomies-2/) [Preview](https://learn.wordpress.org/lesson/wordpress-taxonomies-2/) 6. 2 lessons, 1 quiz 7. a. [ Understand where your files live ](https://learn.wordpress.org/lesson/understand-where-your-files-live/) [Preview](https://learn.wordpress.org/lesson/understand-where-your-files-live/) b. [ Introduction to phpMyAdmin ](https://learn.wordpress.org/lesson/introduction-to-phpmyadmin/) [Preview](https://learn.wordpress.org/lesson/introduction-to-phpmyadmin/) 8. 2 lessons 9. a. [ Using caching to improve website performance – W3 Total Cache plugin ](https://learn.wordpress.org/lesson/using-caching-to-improve-website-performance-w3-total-cache-plugin/) [Preview](https://learn.wordpress.org/lesson/using-caching-to-improve-website-performance-w3-total-cache-plugin/) b. [ Using a CDN to enhance performance ](https://learn.wordpress.org/lesson/using-a-cdn-to-enhance-performance/) [Preview](https://learn.wordpress.org/lesson/using-a-cdn-to-enhance-performance/) 10. 2 lessons, 2 quizzes 11. a. [ Why would a WordPress user need to run a local site? ](https://learn.wordpress.org/lesson/why-would-a-wordpress-user-need-to-run-a-local-site/) [Preview](https://learn.wordpress.org/lesson/why-would-a-wordpress-user-need-to-run-a-local-site/) b. [ How to start using WordPress Playground ](https://learn.wordpress.org/lesson/how-to-start-using-wordpress-playground/) [Preview](https://learn.wordpress.org/lesson/how-to-start-using-wordpress-playground/) 12. 2 lessons, 1 quiz 13. a. [ The building blocks of WordPress templates ](https://learn.wordpress.org/lesson/the-building-blocks-of-wordpress-templates/) [Preview](https://learn.wordpress.org/lesson/the-building-blocks-of-wordpress-templates/) b. [ How Styles are generated ](https://learn.wordpress.org/lesson/how-styles-are-generated/) [Preview](https://learn.wordpress.org/lesson/how-styles-are-generated/) 14. 2 lessons, 2 quizzes 15. a. [ Troubleshooting your site: Plugin and theme conflicts ](https://learn.wordpress.org/lesson/troubleshooting-your-site-plugin-and-theme-conflicts/) [Preview](https://learn.wordpress.org/lesson/troubleshooting-your-site-plugin-and-theme-conflicts/) 16. 1 lesson 17. a. [ Use WordPress to create a one-page site ](https://learn.wordpress.org/lesson/use-wordpress-to-create-a-one-page-site/) [Preview](https://learn.wordpress.org/lesson/use-wordpress-to-create-a-one-page-site/) b. [ Making the most of the Font Library ](https://learn.wordpress.org/lesson/making-the-most-of-the-font-library/) [Preview](https://learn.wordpress.org/lesson/making-the-most-of-the-font-library/) c. [ How to build a responsive WordPress website ](https://learn.wordpress.org/lesson/how-to-build-a-responsive-wordpress-website/) [Preview](https://learn.wordpress.org/lesson/how-to-build-a-responsive-wordpress-website/) d. [ Use the Create Block Theme plugin for exports, and theme variations ](https://learn.wordpress.org/lesson/use-the-create-block-theme-plugin-for-exports-and-theme-variations/) [Preview](https://learn.wordpress.org/lesson/use-the-create-block-theme-plugin-for-exports-and-theme-variations/) 18. 4 lessons, 3 quizzes 19. a. [ What is WordPress Multisite? ](https://learn.wordpress.org/lesson/what-is-wordpress-multisite/) [Preview](https://learn.wordpress.org/lesson/what-is-wordpress-multisite/) b. [ Managing a WordPress Multisite network ](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network-2/) [Preview](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network-2/) 20. 2 lessons, 1 quiz ### The language of the web # How Styles are generated ## Transcript ### Introduction In this lesson, we will explore how styles are generated. If you’ve completed the Customization module of the Intermediate WordPress User Learning Pathway, you’ll remember that WordPress offers two ways to modify colors, fonts, and layout via the Site Editor. One is to use Global Styles, and the other is to use the Style Book, which gives you a visual representation of the block you are modifying. But where do these built-in styles come from, and where are they defined? ### Theme.json The answer is in a file named theme.json, which is the focus of this lesson. But first, what is theme.json? The theme.json file is used to define the global and block-based styles for your theme. Every visual aspect of every property is there, from color and typography to spacing and dimensions. This approach is often referred to as having a single source of truth. In this case, theme.json is the primary file that’s responsible for specifying and organizing all the theme’s design aspects, making it easier to update, modify, and manage. So, where do we find theme.json? In the first lesson of this chapter, we peeked into our site’s theme files. Let’s return to that page and navigate to Tools and then Theme File Editor. You’ll be greeted with a warning message advising you not to edit your theme directly. This is only a brief introductory visit, so you can safely hit the I understand button. In the right sidebar, under Theme Files, click on Theme Styles and Block Settings. If you followed the previous lesson, The Building blocks of WordPress templates, you might have noticed that theme.json includes mostly JSON, a universal data format. JSON represents data in pairs, a key, and its value. ### Examples In this example, we have a Button’s block. The keys are the properties of the Button’s block, for example, background color, text color, and border-radius. The values are its styles and settings. Let’s look at two more examples. In this example, JSON defines a color palette. Each object in the palette array or list represents a color in the palette with the following properties. The hex code, a human readable name for the color and the slug or a short identifier for the color. In the last example below layout, we will see a key named Content Size and a value of 620 pixels. And that means the content width of this theme is set to 620 pixels. When you customize a style via the Editor, for example in this case we’re going to change the content width to 650 pixels, WordPress generates these changes as JSON, ensuring they are rendered into CSS styles that can be displayed properly in the browser. Take a moment to browse around Theme.json. Scroll down and search for words you’re familiar with from the Editor, such as color, layout, button, border, etc. Note how color, for example, appears numerous times across the file while the layout is only specified once. All these properties describe the predefined styles of the theme as determined by the designers and developers who created it. ### Theme.json versus Editor While you can alter these default styles right in theme.json, it’s not the recommended method, neither for users nor extenders. Customizing the design via the Editor is a more practical and intuitive approach. Going into the specifics of JSON is beyond the scope of this lesson. To continue your journey as a web maker, check out the Beginner WordPress Developer Learning Pathway, specifically the Global Settings and Style lesson in the Introduction to Developing WordPress Themes module. ### Conclusion So what is next? If you have already made changes to your styles in the Site Editor, for example, changing the Image block’s radius as in this example, or maybe picking a different color for a block, you won’t find these changes in theme.json. That’s because these customizations were stored in the database, not the theme files. To understand the difference between the database and theme files and how you can update the theme’s theme.json to include your modifications, check out the module How WordPress saves your content and the lesson, Use the Create Block Theme plugin for exports and theme variations. ## Practical Open the File Editor in WordPress Playground and navigate to Theme Styles and Block Settings to access the theme.json file. Review the properties within theme.json, paying attention to key style-related terms like color and layout. Observe how these properties are structured. This is a preview lesson Register or sign in to take this lesson. [ Take course ](https://learn.wordpress.org/course/advanced-wordpress-user/) [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fhow-styles-are-generated%2F&locale=en_US) ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).