Joy
(@joyously)
There can be multiple style.css files.
The theme has one (required to be there with a certain comment in order for WP to know the root of the theme’s folder).
Plugins can use that same file name.
Versions of WP with the block editor have many style.css files, that are used in the editor and some on the front end.
These all contain different CSS.
The selectors used in the CSS must match the HTML, in order for the CSS to work. So the theme outputs HTML and CSS to match. The theme can’t match much very specifically in the post content, since the user creates that. Usually the theme has generic styles to unify the look of the site.
The block editor has styles for each block (and the theme can also), which would affect the blocks used in posts.
And of course, plugins can provides CSS to affect whatever they are adding to the page.
So your question doesn’t make much sense. What is “standard” in terms of styles? Is it color, margin, padding, font, text direction?
So I want to be able to take the styles for the different types of blocks so I can know what all has a particular style. So for instance:
.post {...}
.blockquote{...}
h1 {...}
I want to know what elements/tags I need to consider when making a custom theme. Not sure if I make sense now, but I appreciate your response.
Joy
(@joyously)
A theme should style all HTML tags that could exist on a page.
After that, styling blocks is not that important unless you disable the default styles and want to style each one your own way. But that is a never-ending struggle, as the core blocks change and the user could add any custom blocks they want that the theme doesn’t know about.
Since the theme outputs the HTML for the page, you style what you use and allow for the user to have whatever HTML they want in the post content (styled so it works with the overall theme styles). There are some core classes that should be styled, like alignleft, alignright, aligncenter, etc. You can find these in the Theme Developer Handbook.
If you want to know what CSS rules are applied to any particular element on a web page, right click on it and select Inspect Element (browser/platform dependent, YMMV). A developer tool is displayed listing all applicable styles and their source. You can alter the rules in the tool to help you refine your site’s appearance. Changes will not persist unless you copy them somewhere more permanent. The customizer’s Additional CSS panel is usually a good choice.
If the right click bit doesn’t work, there should be some other way to open the element inspector developer tool. The tool also has an element picker tool within so you can inspect numerous elements while the tool is open.
