Allow p5.element style() function to accept CSS directly or multiple properties

Increasing Access

Beginners likely gain some basic HTML/CSS knowledge prior to or parallel to their exposure of p5.js. If they get into the DOMs p5.element set of functions (createDiv(), createButton() etc) – they'll see that it can also be .style()'ized right there - however the format for changing those styles is both very different than the vanilla js approach and the CSS format syntax. Giving the function the ability to accept plain CSS properties, may help one understand the connection between the two.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature enhancement details

If using the DOM set of functions extensively to generate dynamic elements on the page with p5.js, one likely has to find a way to style them outside of the p5.element .style() function – which requires one (property, value) per every call. Nevertheless, CSS is usually written as a block of 5+ properties. One technique is to give the elements an id/class and then dynamically add a <style> tag to reference them:

createElement('style', `
  .mydiv{
       background: red;
       border: 1px solid #fff;
   }
`);

However, I wonder if it would help beginners (and experts alike) if the .style() tag also accepted a form of multiple property changes at once? I could imagine two techniques,

1 - block of CSS that is then parsed per : and ; or simply embedded inline

let myStyle = `
    background: red;
    border: 1px solid #fff;
`
createDiv('hello').style(myStyle);

2 - JSON object of property/values

let myStyle = {
    background : 'red',
    border : '1px solid #fff'
}
createDiv('hello').style(myStyle);

Option 1 seems more useful for beginners and reducing the amount of syntax needed. Not sure within implementation, if it would be best that it adds the styling inline or creates similar <style> tag blocks like mentioned above?

Start with the p5.Element.style() entry point in the DOM API and compare its current single-property usage with the proposed CSS-string and JSON-object forms. Resolve which input format and application behavior should be supported, then define completion around an agreed API and verified styling behavior.