I take it that “…CSS, nothing to do with WordPress” means that website styles are not accessible to casual users/developers such as myself.
Actually what I meant was that you don’t really need any WordPress-specific knowledge to write custom CSS to style the page (other than knowing where to put the CSS code in your WordPress dashboard).
Whether it’s WordPress, Joomla, Drupal, or even plain ‘ole static HTML… doesn’t make any difference: you simply need to know your standard CSS selector and specificity rules and the knowledge of your browser’s developer tools.
For instance, you said the page title has this:
<h1 class="wp-block wp-block-post-title ...
But you’re using the selector:
.wp-block .wp-block-post-title {
}
… which is wrong (according to CSS rules, not WordPress rules).
Since the two classes are defined together for the same element, there should be no space in the class names in the selector. So this should be
.wp-block.wp-block-post-title {
}
But I don’t know if there are other elements on the page with the same classes, so better safe by limiting it to the h1 element only, so it becomes
h1.wp-block.wp-block-post-title {
}
And this will affect ALL pages that have an h1 element with these classes. If this is just for the homepage, you’ll need to add the homepage’s unique body class to it (provided your theme includes the body classes!), so it becomes:
.home h1.wp-block.wp-block-post-title {
}
All these have nothing to do with WordPress per se: they’re just basic CSS rules (which is what I was trying to say earlier.)
