7 Replies Latest reply on Feb 5, 2010 9:40 PM by Jane Smith 2300

    How to detach CSS for just one page

    Jane Smith 2300 Level 1

      Hi,

       

      I am planning to redesign my site which has CSS styles, including CSS style for the background picture.

       

      I would like to see how my site would look with a different background but keep all of the typographical styles, etc. that I have made. If I delete that one style element from the CSS styles sheets then it will impact all the other pages in my site--I don't want this to happen. So what do I do?

       

      Can you delete just one feature of CSS styles for just one page?

       

      Or, should I copy the CSS styles into another stylesheet, delete the background style and attach that to my new page so I can see what it looks like?

       

      Thanks for any help.

       

      Jane

        • 1. Re: How to detach CSS for just one page
          Nancy OShea Adobe Community Professional & MVP

          Don't delete rules.  Instead use embedded or inline CSS on that page only.

           

          Inline CSS - mostly used for HTML emails.  Inline styles appear inside the HTML code and take priority over other embedded or external styles.

           

          <body style="background: url(new-BG.jpg) repeat">

          your page content

          </body>

           

          Embedded CSS - used on single pages. Appears between the <head> and </head> tags of your HTML page. Embedded styles take priority over external styles.

           

          <style type="text/css">

          body {

          background: url(new-BG.jpg) repeat;

          }

          </style>

           

          External CSS - global site styles inside a separate physical file to which html pages are linked.

           

           

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

          • 2. Re: How to detach CSS for just one page
            Jane Smith 2300 Level 1

            Hi,

             

            Thank you for answering my question.(see below).

             

            Would you mind telling me what the code should be, in the example below, if I just want the background to be white for that one page?

             

            Jane

             

             

            Re: How to detach  CSS for just one page

            Don't delete rules.  Instead use  embedded or inline CSS on that page only.

             

            Inline CSS - mostly  used for HTML emails.  Inline styles appear inside the HTML code and  take priority over other embedded or external styles.

             

            <body style="background:  url(new-BG.jpg) repeat">

            your page content

            </body>

             

            Embedded  CSS - used on single pages. Appears between the <head>  and </head> tags of your HTML page. Embedded styles take priority  over external styles.

             

            <style  type="text/css">

            body {

            background: url(new-BG.jpg) repeat;

            }

            </style>

             

            External  CSS - global site styles inside a separate physical file to  which html pages are linked.

            • 3. Re: How to detach CSS for just one page
              Nancy OShea Adobe Community Professional & MVP

              Would you mind telling me what the code should be, in the example below, if I just want the background to be white for that one page?

               

              In that case, create an ID in your external stylesheet like so:

               

              #plain-BG

              {background-color: #FFF;

              background-image:none;

              }

               

               

              HTML:

              <body id="plain-BG">

              Your page content goes inside the body tags.

              </body>

               

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

              • 4. Re: How to detach CSS for just one page
                Jane Smith 2300 Level 1

                Thank you, Nancy. Your answer was right on.

                 

                Jane

                • 5. Re: How to detach CSS for just one page
                  Jane Smith 2300 Level 1

                  Hi Nancy,

                   

                  I thought I understood your reply (see below) but there is one thing I guess I didn't get:

                   

                  ================

                  In that case, create an ID in your external stylesheet like so:

                   

                  #plain-BG

                  {background-color: #FFF;

                  background-image:none;

                  }

                   

                   

                  HTML:

                  <body id="plain-BG">

                  Your page content goes inside the body tags.

                  </body>

                  ===================

                   

                  My question is about the HTML code you suggested above: After making an ID I went to the HTML code and tried to enter the 3 lines you suggestsed. But I kept getting errors. All the rest of my page content disappeared.

                   

                  <body id="plain-BG">

                  Your page content goes inside the body tags.

                  </body>

                   

                  I don't know where to put this. In the head? body?  If it's the body, do I just copy the entire 3 lines and put it in the body?? I tried that and it didn't work. Am I doing something incorrect?

                   

                  I guess it's really the first line   <body id="plain-BG">  that I don't understand.

                   

                  If you can help with this I would be most appreciative.

                   

                  Jane

                  • 6. Re: How to detach CSS for just one page
                    Nancy OShea Adobe Community Professional & MVP

                    No.  Only one <body> tag is allowed per page.  Copy and paste this code into a new, blank HTML document.

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                    <title>Plain Background</title>
                    
                    <style type="text/css">
                    #plain-BG {
                    background-color: #FFF;
                    background-image:none;
                    }
                    </style>
                    
                    </head>
                    
                    <body id="plain-BG">
                    <h1>H1 Heading</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem diam, lacinia
                    vel cursus ut, accumsan sed sapien. Proin ipsum enim, fringilla at semper eu,
                    feugiat vel arcu? Cras a tortor ac mauris pharetra dictum nec et odio! Morbi
                    gravida magna sed urna fermentum sed ornare sapien interdum. Nunc eu lorem purus.
                    Phasellus posuere condimentum magna in malesuada. Ut fermentum ultrices quam
                    sed iaculis. Aenean at lacinia urna? Suspendisse potenti. Curabitur egestas dignissim
                    tortor vel mattis? Sed sed semper lectus. Class aptent taciti sociosqu ad litora
                    torquent per conubia nostra, per inceptos himenaeos.</p>
                    </body>
                    </html>
                    
                    

                     

                     

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

                    • 7. Re: How to detach CSS for just one page
                      Jane Smith 2300 Level 1

                      Hi Nancy,

                       

                      This will be the final email on this topic.

                       

                      You have completely answered my question.

                       

                      Thank you so much for answering my question.

                       

                      I didn't know that the opening body tag could be changed to:

                      <body id="plain-BG">

                       

                      Your solution worked perfectly.

                       

                      Thanks again.

                       

                      Jane