I am having a lot of trouble with the left side of CSS Designer. Sorry to sound like such a kvetch!
To take a simple example - From the Welcome screen I create a fuid grid layout and name my style sheet mystyles.css. When the document window/program opens I am seeing boilerplate.css in bold and only two selectors down below - "html, button, input, select, textarea" and "html". Why only two since the boilerplate has a huge complement of selectors?
Next question (more important) - when I click on mystyles.css a list of 16 selectors pops up, although the only one I was expecting to see was the selector for "grid container"! Why does this happen? Why doesn't Dreamweaver let me create my own selectors as I build the site? I have read that mystyles.css should contain only those style rules which I have inserted into the head of my code. Is that not true?
In general I feel that Adobe relies too much on robotic tutorials without explaining the underlying architecture. When the beginning uses starts out on his/her own, it is easy to get confused.
Kevin from Cambridge
I open DW and use File > New > Fluid Grid Layout to create a new project. I name my CSS file "fluidgrid1.css" and save it. DW now shows me my page in Design view with a link to my fluidgrid1.css, and to boilerplate.css in the head of the page code. On the CSS Designer panel, in the Sources pane, I see:
When I click on boilerplate.css in the Sources pane, I see oodles of selectors appear in the Selectors pane, all of which seem to be very general (like article, aside, figcaption, etc). When I click on fluidgrid1.css, I see a different (less extensive) set of selectors that appear to be tailored to my page content (like #div1, or .hide_mobile).
Are you with me so far?
Thanks for getting back to me. I'm just starting out in Dreamweaver CC on my own and I am having quite a bit of difficulty.
Your explanation makes perfect sense - that Adobe has volunteered to give me some selectors even though I didn't ask for them. Is this explained anywhere in the Dreamweaver literature? I have the book, DreamWeaver CC CLASSROOM IN A BOOK.
My next question has to do with the different screen sizes and the @MEDIA pane in CSS Designer. Please let me know if you are willing to continue with this. Thanks.
Please let me know if you are willing to continue with this.
That's why I'm here!
The CSS in each of those stylesheets provides the "boilerplate" layout for your fluid grid pages. Without that CSS, you would have no "fluid" and no "grid". That's why both of them contain pre-defined rules, many of which correspond to the ID's already assigned to the HTML (or the tag(s)) that is/are written on the page when it is first opened.
The contents of the @media pane are determined by the selections you made for the various widths and gutters in the New Page dialog that opened when you selected the Fluid Grid Layout option. You can adjust these as needed once they are written during this process.
So what are your further questions?
And by the way, I don't think there is specific documentation for these selectors other than what is offered at http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver .html.
You would experience the same "pre-loaded" CSS if you had elected to create one of the starter layouts (2 column fixed, right sidebar, header and footer or 3 column fixed, header and footer).