9 Replies Latest reply on May 9, 2010 7:26 PM by JulesN

    How to apply CSS to Existing Site

    East_Livermore

      Help! I am a Macromedia Dreamweaver user. I manage a few simple sites on a volunteer basis. I was recently forced by a new computer purchase to upgrade to CS4 for Vista compatibility.

       

      I have never used Style Sheets. I've spent several hours this afternoon combing the web for instructions and found that most of the information assumes way more knowledge than I have, and the more basic articles seem to provide nice overviews of what CSS is and why one might want to use it, or possibly how to build a new site using CSS, but they have not answered my "how to" questions about my existing sites.

       

      My two most pressing unanswered question are these:

       

      1)  I seem to have successfully created a new CSS rule by selecting a section of text in the document, setting the Property Inspector to CSS and then naming the rule and choosing a font style and size (although the new rule dialog box never appeared - I did it all in the Property Inspector). Do I have to go through the whole site and apply this rule individually to each section of body text? The existing document has all the text set by its specific features (e.g. Arial Bold 10), not using "heading 1" "heading 2" etc.

       

      2) I do not use Dreamweaver to upload my finished documents. I use a site-managemet ftp page on my host server. Once I've created these CSS style rules, is there anyting that I need to upload besides my edited pages?

       

      Thank you in advance for help.

        • 1. Re: How to apply CSS to Existing Site
          JulesN Level 2

          If you are using the same font family, font size, colour, etc... you can use a separate style sheet and just use

           

          body {font-size:14px; font-family:arial, helvetica, sans-serif}

           

          this will make all your site the same body style.

           

          Do I have the book for you:  CSS in easy steps by Mike McGrath  isbn#1-84078-301-x

          It's a really good beginner's book to CSS.  And really easy to read!  Was a huge help to me in my beginnings of CSS.

           

          Also, www.lynda.com is a great resource.

           

          Hope this helps!

           

          You'll need to upload that extra css page with the rest of your site!

           

          Message was edited by: JulesN

          1 person found this helpful
          • 2. Re: How to apply CSS to Existing Site
            Nancy OShea Adobe Community Professional & MVP

            3 types of CSS rules (in order of importance):

             

            1) INLINE = CSS code inside your HTML tags. Mostly used on HTML emails.  Not recommended for sitewide styles.

             

                 <table style="width:500px; border: 2px solid green">

             

            2) EMBEDDED = page specific CSS rules that appear between the <head> and </head> tags in your HTML document.

             

            <style type="text/css">

            body {

            font: 1em/1.5 Arial, helvetica, sans-serif;

            width: 900px;

            margin: 0 auto;

            }

            </style>

             

            3) EXTERNAL = sitewide CSS rules contained in a separate physical file, to which all your HTML pages are linked.

             

            See Linking Stylesheets -

            http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            1 person found this helpful
            • 3. Re: How to apply CSS to Existing Site
              East_Livermore Level 1

              Thank you Jules. I will check out that book. From what I've learned, I'm kind of excited about what it looks like CSS can do on any new site I might create (and I'm about to do a total overhaul of one of them, so this could be great).

              • 4. Re: How to apply CSS to Existing Site
                East_Livermore Level 1

                Thank you Nancy,

                 

                Do I understand correctly that if I'm formatting text using the Property Inspector in such a way that the CSS dialog box doesn't pop up (I'm just using the drop-down boxes in the Property Inspector, with the Property Inspector set to CSS instead of HTML) that this would be the "Embedded" CSS? This seems like the way to go with a page that I'm simply adding a paragraph to, as opposed to reconstructing the page, since it will preserve my headers without making them the same size/weight as the paragraph body text.

                 

                And seems like I'll work toward the External CSS approach as I recreate these sites over time.

                 

                Am I understanding that?

                 

                Thanks again,

                -cynthia

                • 5. Re: How to apply CSS to Existing Site
                  JulesN Level 2

                  Just wait until you get into style sheets.  You'll wonder whatever took you so long!  You can completely eliminate the use of tables for structure of your pages by using positioning.  Also, if you design your templates with PhotoShop and then use Save for Web, you can pretty much let that do all of the work for you for calculating all of the structure.  Good luck with it! 

                  • 6. Re: How to apply CSS to Existing Site
                    JulesN Level 2

                    If you set inline css into your pages, it will rule first.  If you were looking to keep all your h1 tags the same, place the rule on an external style sheet.

                    IE:

                    h1 {font-size:18px; font-weight:bold; etc, etc}

                     

                    This will make all of your h1 tags the same size and weight.  If you go to each page and set an inline style, that h1 tag will keep its style even if you change the one on the external style sheet.  This might cause problems in the future if your client wants all the h1 headers to be 20px for instance.

                     

                    The property inspector adds the style to the header, inline, or external.  You have all the options with that.

                     

                    You will notice that if you attach a stylesheet, then in the property inspector, it will add the option of the id or class that you added.

                    • 7. Re: How to apply CSS to Existing Site
                      Nancy OShea Adobe Community Professional & MVP
                      If I'm formatting text using the Property Inspector in such a way that the CSS dialog box doesn't pop up (I'm just using the drop-down boxes in the Property Inspector, with the Property Inspector set to CSS instead of HTML) that this would be the "Embedded" CSS?

                       

                      Yes.  DW embeds Style classes into your document for you.

                       

                      Example:

                       

                      .Style1 {font-size: small}

                      .Style2 {color: Red}

                      .Style3 {text-align: center}

                       

                      Since you can re-use classes many times per page, it's best to give them meaningful names so you know what each one does.

                       

                      .small {font-size:small}

                      .red {color:Red}

                      .center {text-align:center}

                       

                      When you're ready to move embedded CSS to an external stylesheet, having recognizable class and selector names makes your sheet must easier to work with. 

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      http://alt-web.com/
                      http://twitter.com/altweb
                      http://alt-web.blogspot.com

                      • 8. Re: How to apply CSS to Existing Site
                        Nancy OShea Adobe Community Professional & MVP

                        Also, if you design your templates with PhotoShop and then use Save for Web, you can pretty much let that do all of the work for you for calculating all of the structure.

                        Jules,

                        I don't recommend this way of working except for quick comps. Graphics apps produce code that is mostly rigid and fragile to work with later, not consistent across all browsers, etc...

                         

                        A much better suggestion for someone new to CSS layouts is to start with a pre-built Template that has been fully tested to perform well in all browsers.  I like Project Seven's Page Packs or CSS Layout Magic.   http://www.projectseven.com

                         

                         

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb
                        http://alt-web.blogspot.com

                        • 9. Re: How to apply CSS to Existing Site
                          JulesN Level 2

                          Nancy, I've been using this method for years and years.  As long as it's set up properly, it's flawless on all of my Websites, on ALL tested browsers.  There are all sorts of ways of creating something.  It is a perfect solution that is really easy to do and I'm willing to bet on it that Adobe would back me up on that.  Yes, you can use the templates from DW.  There are more ways to skin a cat...  no offense to your logo!