# CSS Code from the Grid **URL:** \ **Category:** Beginners\ **Created:** [March 14, 2019, 2:29am UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841 "2019-03-14T02:29:33Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)\ **Post date:** [March 14, 2019, 2:29am UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841/1 "2019-03-14T02:29:33Z")
Once I start to place elements on the grid. Where can I see that CSS code? I do not see it on style.css. ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [March 14, 2019, 10:04am UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841/2 "2019-03-14T10:04:29Z")
You have to add classes using the tree page structure and then save the inline style to a proper css rule using the CSS tyle panel. Otherwise it will not write the css on a stylesheet but as inline style in the html. ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/88d952ccfa0efa511fd866fd9fdadb0c0242b843.png) ---
**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:** [March 14, 2019, 8:55pm UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841/3 "2019-03-14T20:55:23Z")
And this might help a bit more too. When you create the grid (or ANY STYLING) in Pinegrow… the styles are save to an INLINE STYLE IN THE WEB PAGE -until. you actually save the styles IN AN EXTERNAL Style sheet. where is the styling for the CSS Grid outline you can see? Well, it is saved here, in the. web page itself as an INLINE style. ![2019-03-14_20-32-25](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/97a6a3d7304bb6f15709c688f011205fad980f4f.png) So use Visual grid tool to create a grid, then Click on the GRID ELEMENT in page view, and it’s CSS STYLE Will appear in the STYLE panelTab, under _Active_ Tab view. ![2019-03-14_19-41-38](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5f94394aea7fc153c7e7d923b9448b8624092028.png) You can then move this style to the external style sheet. so to do this! -basically, hover the mouse over the **+** sign Ito the right of the styling and it will present a pop up that says _move inline style to a proper CSS Rule_ YAY! do that. ![2019-03-14_19-39-54](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/70d1fe005625a89adf8a6304dab8b4e3ad2cb07c.png) Give it a name with a . in front of it for a class and you will then see that inline style has gone from the body and is now in style.css ![2019-03-14_20-54-20](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/28665037881901549566e96fdffa1456991b3b9a.png) ---
**Author:** ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)\ **Post date:** [March 15, 2019, 4:11am UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841/4 "2019-03-15T04:11:08Z")
Ah, thanks. schpengle, your method of annotating your answers very much serves my need for visual learning! ---
**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:** [March 15, 2019, 11:40am UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841/5 "2019-03-15T11:40:30Z")
Hi, @jtkay your welcome, very glad it was helpful. 🙂 @red-rosefields answer was fine, but I too am mostly a visual/kinesthetic learner but when i followed those instructions, I realised I needed visuals! So! Thought I would create them! oh the joy of VARK! [http://vark-learn.com/](http://vark-learn.com/) Also, I really should have included the link to @matjaz 's (the Pinegrow Author) excellent, youtube CSS Grid course. Stupid of me to have omitted that, but it was late and I was tired 🙂 so here you go, on the Main Pinegrow Documentation site > **[Summer Nights CSS Grid Tutorial | Pinegrow Web Editor](https://pinegrow.com/docs/css-grid/tutorials/summer-nights-css-grid-tutorial/)** > > A step by step tutorial on creating a responsive CSS grid layout with fallback for older browsers. or on Youtube https://www.youtube.com/embed/ZXr5XR7XOjo?feature=oembed&wmode=opaque&list=PLNHKFtMjaNvHQ55HQE3Am_iIWCc7sSsYt and then check out his _summer nights_ tutorial on that channel too and basically, watch EVERYTHING by him!! Its all shown very well explained excelletnly I find. ---
**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\ **Post date:** [September 1, 2019, 7:41pm UTC](https://forum.pinegrow.com/t/css-code-from-the-grid/2841/6 "2019-09-01T19:41:26Z")
i would add, that in the case of inline styling on the -body-, as is shown by [schpengle](https://forum.pinegrow.com/u/schpengle)’s example, you don’t need to invent a .class name, you can simply add it to the CSS rule for -body- body { grid:display; yada…yada; } inventing .class names is hard… don’t do it if you don’t have to.