Hi, I'm very new to website creation and just bought Bootstrap Studio to get me going, so please forgive my ignorance.
I am currently following a tutorial and in there, the CSS styling is done both directly in the STYLES panel and in the styles.css file. What is the difference between the two?
Thanks!
in the "styles.css" is your real CSS
In the Panel is every CSS shown, that is used actually. So if you have 3 *.css files, here is only that you use in your design out of them
When you add your own custom classes they will go into a file that you add to the Styles pane. I just call mine custom.css, keeps it simple lol.
When you look at the Styles Window, that is the CSS viewport that shows you all classes "connected" to whatever element or DOM line, HTML line you are clicking on in those windows or panes. You will very very seldom every see the entire set of classes that your site is using, only those associated with the element you're working on that is selected somewhere.
These classes will include all classes from all CSS files. This will be shown on the right side of each class which will show you which file the class is being pulled from, and those names are clickable to take you directly to that class to either edit it, or copy it if it's a locked default class. You can then copy that class to your custom CSS file for editing.
The little dots to the right are actually a pulldown menu, click it and you'll see your options there for each class in your Styles window.
Basically though, the Styles window is the viewing window, it's not the file, it's all files that it's currently using for a specific element or item you have selected. The Styles pane on the right side lists all the CSS files that are connected with your project. ALL, for the entire project, not just for that page.
Hope that helps. :)