7 Replies Latest reply on Apr 26, 2011 12:21 PM by Comp. 792

    Problems Naming a CSS File

    Comp. 792 Level 1

      Hi, I am trying to "correctly" save a Style sheet in Dreamweaver. When I create a new folder at my site "Root" named "STYLES" and save the css rule as "container.css" it looks like this in the CSS Styles which I think is wrong isn't it.

       

      So I selected the "New Folder" and in my sites "Root Folder" I created a new folder for my CSS styles named "STYLES". I then saved the .css rule in the "STYLES" folder and named it "container.css" but when I looked at my style in the "CSS Rules" panel it didn't look right. (see image 02)

       

      Image 01

      styles.jpg

      Image 02

      css_rules.jpg

       

      But when I open a .css page in the Dreamweaver default CSS Layouts the Rules seems to be named:

       

      Styles

           #container

       

      What am I doing wrong? Shouldn't the flder structure be named:

       

      Styles

           #container

        • 1. Re: Problems Naming a CSS File
          mathruD Level 1

          image 2 looks right to me. based on the image, you created a css file called "container.css"

           

          then, inside that css file, you have created a style for the id "container." so basically, it looks as though you are going to create & style a div with the id, "container."

           

          that would look like this in the html code: <div id="container"></div>

           

          you may style that id in your css file as something like:

           

          #container {

               width: 300px;

               height: 200px;

               background: #000;

               color: #fff;

               padding: 10px;

          }

           

          so container.css and #container are two different things. i hope i understood your question correctly.

          • 2. Re: Problems Naming a CSS File
            mytaxsite.co.uk Level 6

            Have you defined a site before you started doing anything?  If not, then why not?

             

            Dreamweaver will make your life so easy if you follow the basic rules of creating a website:

             

            1) Define a site

            2) create the necessary folders:  css, images, scripts, templates (always use small letters to make them compatible with other systems)

             

            Now when you are editing the site, always open the site (do not open the page!!   there is a big difference in doing so and find out what this difference is)

             

            When you are ready to upload your site, this approach will ensure you are uploading the correct folders and that all the links to the assets are still working.

             

            Now you are in a better position to create files and to save them on the fly!

             

            Hope this helps and good luck.

            • 3. Re: Problems Naming a CSS File
              Comp. 792 Level 1

              Thanks mathruD

               

              Thanks DWILCOX01

               

              My Question Is:

              I opened a new "One Column Fixed Header and Footer" layout page included in DW. So how did they get <style> ? Should my CSS Styles panel look like that? I mean start with <style> too? How did they do that? Please explain?

               

               

              style.jpg

               

              Have you defined a site before you started doing anything?  If not, then why not.

               

              Yes I have defined a site within Dreamweaver. And I just renamed all of my folders with lowercase letters.

               

               

              Now when you are editing the site, always open the site (do not open the page!!   there is a big difference in doing so and find out what this difference is)

               

              I always open the "index.html" page. How do I open the site?

               

               

              When you are ready to upload your site, this approach will ensure you are uploading the correct folders and that all the links to the assets are still working.

               

              I've been uploading using the Local and Remote sites panel. I just drag the files from the local to the remote site. Works pretty well.

              • 4. Re: Problems Naming a CSS File
                mathruD Level 1

                There are three ways that you can use css: external, internal, and inline.

                 

                Whenever you see <style>, it usually indicates that there is internal css. This means that they have included css between the <head></head> tags on the html page. External css would be creating a new css file, such as your "container.css" file, and linking to it. And inline css is including the css directly to your code. Something such as <div id="box1" style="height: 100px; background: #000; color: #fff;"></div> Inline css is not recommended. External is the way to go.

                 

                This link will explain the difference in the three: http://www.w3schools.com/CSS/css_howto.asp

                 

                Also, to upload files to the server, all you have to do is look in the "local view" panel, select the files you want to upload, and click the blue arrow to "put" the files on the server. You shouldn't have to drag and drop them.

                • 5. Re: Problems Naming a CSS File
                  Comp. 792 Level 1

                  Whenever you see <style>, it usually indicates that there is internal css. This means that they have included css between the <head></head> tags on the html page.

                   

                  mathruD,

                   

                  That's exactly what I was trying to understand. Thanks. I didn't realize the brackets <style> were an indication of a head tag but that makes sense.

                   

                   

                   

                  So what is the "proper" way of saving an "External Style Sheet"?

                   

                  Should the root folder be called "css"?

                  Pretend you have created a div for the container and now you want to save an external style sheet. Should I name the...

                   

                  ID: container

                  Selector: #container

                   

                  And what name would you give the external style sheet?

                  • 6. Re: Problems Naming a CSS File
                    mathruD Level 1

                    It looked like you did it properly in the first step. You created a new folder, called "styles" in the root of your website. Then, you

                    created a css file called "container.css" and placed it in the "styles" folder. All of that is correct. The actual names for the css files & folders don't matter. Personally, I usually create a css folder called "css" and then I call the actual css file, "global.css"

                     

                    The reason I call it global.css is because I usually use that css file to style the entire site. Again, the names don't matter, though.

                     

                    Once you have created your css folder and saved your css file inside that folder, you can either create a new html file or open an existing one. Once you have done that, look in the "css styles" panel. At the bottom of that panel, you will see a chain link icon. Click that icon, and a window will pop up asking you to select your css file. All you do is select your css file and click ok. Once, you have done that, your css file is externally linked to the html page and any styles you create will be applied. The actual linkage will look something like this in the <head> tag:

                     

                    <link href="css/global.css" rel="stylesheet" type="text/css" />

                     

                    At that point, you can add your styles to the css file. You can do this by selecting the "new css rule" icon in the css styles panel. it looks like a sheet of paper with a plus symbol on it. Or you can create a new css rule by inserting a new div on the html page. This button can be found under the "common" tab of the dreamweaver toolbar. Clicking on it will cause a pop up window to appear. It will ask you about the type of div you want to add to the page. Fill the info in, and click ok, and it will take you to the new css rule window (this is the same window that shows up if you click the "new css rule" icon in the css panel.

                     

                    If you have a div named container in your html file it would look something like this:

                     

                    <div id="container">

                    This is some text for the container div.

                    </div>

                     

                    To add a style for this div, just go to the css styles panel and click the "new css rule" button. In the pop up window, select "id" as the selector type. Then, for the name, write #container and click ok. Once you click ok, the actual styling box will pop up. In there you fill out the actual styling of the div. For example you can set the width, height, color, etc...

                     

                    Also, remember that you have to link the css file on every html file that you want it to effect.

                    • 7. Re: Problems Naming a CSS File
                      Comp. 792 Level 1

                      mathruD,

                       

                      Wow, your reply is just what I needed. I a going to give it a try now and post any questions I have. Thanks so much!