# Inline CSS vs CSS file **URL:** \ **Category:** Styling (CSS)\ **Created:** [November 10, 2018, 8:34pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391 "2018-11-10T20:34:42Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![RickH](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rickh/32/1479_2.png) [@RickH](https://forum.pinegrow.com/u/RickH)\ **Post date:** [November 10, 2018, 8:34pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/1 "2018-11-10T20:34:42Z")
Just starting with the demo version. Created a PHP page (with just HTML for now, based on ‘Holy Grail’). Set up an external style sheet (styles.css) in the page. Basic CSS divs in that css file. When adding elements and styling those elements, the CSS is placed ‘in-line’ in each div in the HTML code. How to I get all CSS styleing to be in the external styles.css file, rather than placed in-line? Thanks…Rick… ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [November 10, 2018, 9:22pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/2 "2018-11-10T21:22:42Z")
![Untitled-1](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/20d90dee2d6dccbe7ef93aa47c8f77444e8a7324.jpeg) ---
**Author:** ![RickH](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rickh/32/1479_2.png) [@RickH](https://forum.pinegrow.com/u/RickH)\ **Post date:** [November 11, 2018, 12:53am UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/3 "2018-11-11T00:53:16Z")
Still learning the interface, but if I click on an item in the style view (the ‘outline’ list of styles panel), and change an attribute of the style item, then the attribute is placed in-line, rather than in the styles.css. What I am looking for is a global-type setting that will put all class atributes/etc into the styles.css file, not in-line. This is the panel I am talking about (the Tree/Page Structure panel): if I click on ‘nav’ for instance, and add text color, that text color attribute is put in-line on the nav element in the html, and not placed in the styles.css file, as I wish it to be. ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b2a76fcc825b53ad0cf1a5653241c5f4e4cc821f.png) ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [November 11, 2018, 5:09am UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/4 "2018-11-11T05:09:31Z")
In the Styles panel, select CSS style you want the new rule added to. This will add it to the chosen CSS file, as opposed to inline in the HTML. ---
**Author:** ![m-artin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/m-artin/32/1447_2.png) [@m-artin](https://forum.pinegrow.com/u/m-artin)\ **Post date:** [November 12, 2018, 11:24am UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/5 "2018-11-12T11:24:12Z")
> [@RickH](#): > > if I click on ‘nav’ for instance, and add text color, that text color attribute is put in-line on the nav element in the html, and not placed in the styles.css file, as I wish it to be. You can save the element inline-style to CSS rule with the plus icon, as shown in the screenshot. ![pg-add-inline-to-css](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/373f49bb648f6e6b50b19e72d3a6036b5f1e94d9.png) ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [November 12, 2018, 5:08pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/6 "2018-11-12T17:08:28Z")
Good discussion taking place here. > [@RickH](#): > > When adding elements and styling those elements, the CSS is placed ‘ **in-line** ’ … How to I get all CSS styling to be in the external styles.css file, rather than placed in-line? @matjaz, I still believe this portion of the workflow should have some failsafes, as fragmented inline styles can occur for new users or even seasoned users inadvertently. If you recall I had mentioned it previously. * * * > [@CSS Properties — Direct user manipulation on page of basics properties — via Drag etc](https://forum.pinegrow.com/t/css-properties-direct-user-manipulation-on-page-of-basics-properties-via-drag-etc/1423/3): > > As it stands right now I believe this type of fragmented CSS can still presently occur and still remains to be considered even with the workflow as it currently stands at this moment. > > You can go into Pinegrow and start using the new Visual CSS Editor, which by default creates a “inline style attribute” for the selected item you are working on. You can do this on as many items you like and Pinegrow will amass a list of “Classes without rules” which translates to all these visual edits placing inline styles on items. > > The user can then save the file without warning and these inline styles will remain in place. Of course we know inline styles are largely frowned upon in general within the industry as it fragments the CSS workflow across locations and makes maintenance a nightmare to search for all the corresponding CSS instances in multiple locations. But having said that you can use it effectively, to create HTML emails which may require inline CSS, etc. > > So what to do, or what can be done to help prevent this inline CSS fragmentation? > [@CSS Properties — Direct user manipulation on page of basics properties — via Drag etc](https://forum.pinegrow.com/t/css-properties-direct-user-manipulation-on-page-of-basics-properties-via-drag-etc/1423/3): > > A developer should quickly learn or already be aware and know the current new Pinegrow CSS workflow already. But in the midst of working and using the Visual CSS Editor, or via on page direct item controls (as discussed in the first post), even a seasoned developer might let something inadvertently slip though as inline CSS. So it’s not just towards the newer less experienced user that this can occur or be a problem. * * * > [@Pinegrow Offspring -- Pine Seedling -- Designer App Coming?](https://forum.pinegrow.com/t/pinegrow-offspring-pine-seedling-designer-app-coming/2306/5): > > For **Pinegrow 5 the main focus is improving the styling** with CSS/SASS. What we have now is a powerful foundation, but **some parts of the workflow are still awkward** , for example, working with nested SASS structure. Hopefully something regarding failsafes will be included in Pinegrow 5, so the occurrence or possibility for fragmentation is prevented throughout the styling workflow(s) for all users. 🌲 ♥ ---
**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\ **Post date:** [November 13, 2018, 6:23am UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/7 "2018-11-13T06:23:03Z")
This is a very timely discussion - just working on this: ![inline](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0d3e346e8d6b13d9ea19a5c9d063218d626129df.jpeg) The improvements regarding working with inline styles have two parts: - Clearly indicating when inline styles are used in the Style panel - Showing the inline style icon in the Tree panel, with the ability to display just the elements with inline styles (among other filters) This will ship in Pinegrow 5, scheduled for next week. ---
**Author:** ![RickH](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rickh/32/1479_2.png) [@RickH](https://forum.pinegrow.com/u/RickH)\ **Post date:** [November 13, 2018, 6:48am UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/8 "2018-11-13T06:48:59Z")
Good news about the new feature. If not too late, I’d prefer (and enjoy) a ‘global’ setting of that would ‘force’ all CSS to go into an external file. Perhaps with an option on an individual tag (class) that would allow an in-line style if ‘global external CSS’ was enabled. So, by default, when that option enabled, all CSS goes into the external file. And perhaps even a button on an individual tag that would move the in-line to the external file (that would be helpful for inline styles that were previously defined). Pinegrow looks to be a great product, from my limited exposure with the demo version. I suspect you’ll get another happy buyer out of all this. Appreciate the responses. …Rick… ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 13, 2018, 8:13am UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/9 "2018-11-13T08:13:40Z")
> [@matjaz](#): > > just working on this: Thanks for this preview, looking very good! A simple and elegant way to highlight and show that inline style(s) are set. And “Tree panel” filters, I love it already! > [@matjaz](#): > > This will ship in **Pinegrow 5** , scheduled for **next week**. Great news, already started with blowing up balloons and making party hats (for everybody), to celebrate this upcoming release and milestone!🌲5️⃣🎈🥳🎈 ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [November 13, 2018, 12:38pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/10 "2018-11-13T12:38:45Z")
@matjaz, Thanks so much for working to improve the features between the Visual Tools and CSS workflows. This will really be beneficial for all users when visually styling as a failsafe regarding the presence of inline styles in projects. I especially like the idea of toggling “ **Show only: Inline styles** ” in the Tree View Panel. > [@matjaz](#): > > Showing the inline style icon in the Tree panel, with the ability to display just the elements with inline styles (among other filters) **[1.]** Will doing so also visually toggle the other items on the live page - like via the “Hide / show in Pinegrow” ? ![Hide%20%3A%20show%20in%20Pinegrow](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9b897c1ef1c9b774006dadaf81931c4eb598a856.png) Basically like using the “Hide / show in Pinegrow” feature, but for everything that “does not” have inlines styles. That would likewise be beneficial as another visual representation method on the actual page itself. Seems only logical, if you can utilize the hide/show feature and target the opposite collection of page items “without” inline styles via the “Show only: Inline styles”. * * * **[2.]** Another minor suggestion that would prove to be beneficial, is to change the “stroke color” or “background color” of the “Class, ID, Selector Input” field to the UI orange also. - If an Inline Style is present for the selected item then its orange: ![Class-ID-Selector-Input-Highlight](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e0cba349f738140fc173d0761e3e7f1f0cbb2550.png) - Otherwise if something is assigned it goes back the standard UI look: ![Class-ID-Selector-Input](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/47dd519f68cbea6516791a4cdab1bf75649e9887.png) This would provide another simple and elegant reminder for users to take action regarding input, while remaining appropriate to what you have shown via your screenshot. \*\* Thanks for taking those **2 suggestions** into consideration. They seem like minor adjustments (UI and feature that already exists), each could further aid in strengthening this revision and enhancement of the workflow. ;–) * * * Since our last discussion in that other thread a year ago, I looked at other apps and how they handle things. BlueGriffon for example puts a large bold color box around the input – but also actually **locks the user out** of doing anything further until they provide input. ![BlueGriffon-Please-Enter-ID-Style-Properties](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d550b5480856eea59a351491053669f645169b63.png) * * * Which is a very intrusive approach by them towards the user and general workflow. So obviously the Pinegrow approach you have shown is far superior, along with its overall visual tools and entire app by comparison. 😉 @matjaz, this will really be nice revision for users and the Pinegrow visual workflow and interface. 🌲 ♥ ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [November 13, 2018, 5:09pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/11 "2018-11-13T17:09:43Z")
@matjaz. Ūber Awesome! Number 5… FIVE? Well done! I’m with @Marf on the whole party hat sketch 🙂 Also, would it be possible to add the _HIDE_ bootstrap classes, as well the current SHOW them that we have? Once you list them, that is it, no way to get shot of them from your class listing again. and BS Classes can be a bit overwhelming (or any other framework which may be used really) when you just want to view your OWN classes. ok cheers! it might be a bit late to squeese that in, I assuemed it was there and I couldnt find it, but apparetnly not! and Next week? Fab! ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 13, 2018, 6:04pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/12 "2018-11-13T18:04:51Z")
> [@schpengle](#): > > I’m with @Marf on the whole party hat sketch 🙂 I take it very seriously. Already cut my fingers twice, but luckily still got them all ten. I’m able to make 200 party hats a day. Cancelled all my appointments for this week. @schpengle Can you help me with it to get the job done… ( Btw, we also need colorful hats for your “friendly” PineHounds! ) Also need to figure out, how to ship them fast enough to everybody! 😟 😬 😇 🥳 * * * > [@schpengle](#): > > …Also, would it be possible to add the _HIDE_ bootstrap classes… **+1** for this! @matjaz Would be great, to hide them again with one simple click. (See this previous topic) > [@How to see Bootstrap CSS Code of an element?](https://forum.pinegrow.com/t/how-to-see-bootstrap-css-code-of-an-element/2299/5): > > @matjaz It would be nice to have the option at the CSS panel to minimize/hide them directly. Back into having this state again. [16] * * * ---
**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\ **Post date:** [November 20, 2018, 3:05pm UTC](https://forum.pinegrow.com/t/inline-css-vs-css-file/2391/13 "2018-11-20T15:05:22Z")
> [@Pinegrow\_User](#): > > @matjaz, > > Thanks so much for working to improve the features between the Visual Tools and CSS workflows. This will really be beneficial for all users when visually styling as a failsafe regarding the presence of inline styles in projects. > > I especially like the idea of toggling “ **Show only: Inline styles** ” in the Tree View Panel. > > > @matjaz > > > > Showing the inline style icon in the Tree panel, with the ability to display just the elements with inline styles (among other filters) > > **[1.]** Will doing so also visually toggle the other items on the live page - like via the “Hide / show in Pinegrow” ? > > ![Hide%20%3A%20show%20in%20Pinegrow](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9b897c1ef1c9b774006dadaf81931c4eb598a856.png) > > Basically like using the “Hide / show in Pinegrow” feature, but for everything that “does not” have inlines styles. That would likewise be beneficial as another visual representation method on the actual page itself. > > Seems only logical, if you can utilize the hide/show feature and target the opposite collection of page items “without” inline styles via the “Show only: Inline styles”. > > **[2.]** Another minor suggestion that would prove to be beneficial, is to change the “stroke color” or “background color” of the “Class, ID, Selector Input” field to the UI orange also. > > - If an Inline Style is present for the selected item then its orange: > > ![Class-ID-Selector-Input-Highlight](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e0cba349f738140fc173d0761e3e7f1f0cbb2550.png) > > - Otherwise if something is assigned it goes back the standard UI look: > > ![Class-ID-Selector-Input](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/47dd519f68cbea6516791a4cdab1bf75649e9887.png) > > This would provide another simple and elegant reminder for users to take action regarding input, while remaining appropriate to what you have shown via your screenshot. > > \*\* Thanks for taking those **2 suggestions** into consideration. They seem like minor adjustments (UI and feature that already exists), each could further aid in strengthening this revision and enhancement of the workflow. ;–) * * * **Reply to Self:** @Pinegrow_User Concerning **#1** & **#2** suggested above regarding “Pinegrow 5” “PG5” “PG 5”, **No** and **No**.