How do I edit the CSS based on node, page, or placement on page? I've been learning how to navigate around and edit my global.css file, but am confused as to how to edit specific elements. I've come across answers to this question that don't specifically describe how to do this

To clarify, say that I have 3 pages on my site titled Red, Blue, and Black. If I want to edit just the h1 headers on page Red, how do I go about doing that? Is there a way to do this without PHP or installing extra modules?

Currently, whenever I try to edit the h1 header on supposed Red page, every single h1 header on my site is updated and edited.

Sorry if this is a duplicate, I honestly couldn't find any answer to my question while I was searching
This isnt a Drupal API question. It's more of a CSS and how does that work in the browser question. That being said there are docs on how to theme drupal 6 and 7. Since drupal is a web application they cover topics such as:


Working with CSS
Standard Drupal Core Styles and Classes


Within (2) it describes the .node and .node-title CSS classes:


  .node
  
  A wrapper div around all of a node, including its title.
  
  .node-title
  
  The title of the node.


Depending on the theme your using you may or may not have those exact classes, every theme is slightly different. Basically in your theme you want to use Firebug or Chrome Developer Tools to look at the HTML markup and CSS classes and IDs attached to things. You can then target a page or node title, and create a rule to target specific page urls if need be. As an example Drupal page (using AdaptiveTheme subtheme):



The &lt;body&gt; tag has a million css classes on it including page-node-2 that specific CSS class would target only this node (by its NID). You can inject other more useful body classes into any theme using hook functions and template files -- but thats beyond this writings scope.

In this case you can also see the node title has an ID of h1#page-title

A general CSS rule to target this 1 page's title you could put in global.css is body.page-node-2 h1#page-title { color: red; }

For your theme it would be the same process:


examine the body tag in your Theme and find a useful CSS class to specifically target the page(s) with a CSS rule.
examine the Section Header tags within the page to find the exact CSS classes/ids to target just that element as well.


Lastly, I dont think every theme has a global.css file ... though most probably do. My exact CSS rules herein will likely not work for your usecase, they're just examples of what you could do. See the documentation pages listed above to better understand Drupal Themeing.