9 Replies Latest reply on Oct 7, 2010 10:03 AM by Nancy OShea

    Editing CSS

    ykgreene1

      Hey all,

       

      I am still learning css and I need some help. I am designing a websit from a template that has some really good css work. What i want to do is change the image of the computer on this page to a different image which i see is easy enough todo, but the problem is the image then changes on all the pages, because of the css.  So what i need to learn how to do is modify the css so that i only change the image on this one page instead on it changing on all the  pages. Below I have inserted a picture of the what this question is over I am showing the css on the side.

       

      question.jpg

       

      and here is a screen shot of the code view

       

      question2.png

       

      I know this has to be a pretty simple thing to do I just dont know how to do it. So please help me out on this because you guys know your stuff and i dont.

       

      thanks

        • 1. Re: Editing CSS
          Nancy OShea Adobe Community Professional & MVP

          External CSS styles are applied globally -- to the entire site.

           

          Embedded CSS styles are applied to the particular page in which they appear.

           

          Inline CSS styles are applied to specific portions of HTML code.

           

           

          To change one background image on one page, use Embedded CSS styles between the <head> and </head> tags in your HTML document.

           

          <style type="text/css">

           

          Page specific styles go here.

           

          </style>

           

           

          HTML & CSS Tutorials - http://w3schools.com/

           

           

           

           

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

          • 2. Re: Editing CSS
            ykgreene1 Level 1

            So that i correctly understand by inserting the text in bold it will allow me to change the image on the current page to what ever i want to without editing the image on all the other pages. And this is how it should be entered or do i have that all wrong too?

             

             

            Header 1


            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Comprehensive Services</title>
            <link href="fix.css" rel="stylesheet" type="text/css" />


            <style type="text/css"><img src="images/main-text.gif" width="488" height="117" alt="title" /></style>

            </head>

            <body>
            <div id="container">
              <div class="top-logo"><img src="images/logo.gif" width="236" height="91" alt="Logo" /></div>
              <div class="top-nav">
                <ul>
                  <li><a href="index.html"><img src="../2boys HTML/temp/images/but_01.gif" alt="home" width="102" height="31" /></a></li><li><a href="diy.html"><img src="../2boys HTML/temp/images/but_02.gif" alt="diy" width="64" height="31" /></a></li><li><a href="about.html"><img src="../2boys HTML/temp/images/but_03.gif" alt="about_us" width="124" height="31" /></a></li><li></li><li><a href="contact.html"><img src="images/but_05.gif" width="127" height="31" alt="contact_us" /></a></li>
                </ul>
              </div>
              <br class="clearboth"></b>
              <div class="header">
                <div class="header-txt">
                  <div class="header-content"><img src="images/main-text.gif" width="488" height="117" alt="title" /><p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu erat sed erat eleifend malesuada. Sed sed neque sapien. Fusce rutrum, mi et viverra dignissim, elit lectus scelerisque risus, vel ultricies metus neque ut dolor.</p><div class="button-go"><a href="#"><img src="images/but_go.gif" width="29" height="30" alt="Go" /></a></div> <br class="clearboth"></b></div>
                 
            <div class="header-corner"></div>
                </div>
                <div class="header-shadow"></div>
              </div>

            • 3. Re: Editing CSS
              Nancy OShea Adobe Community Professional & MVP

              I understood from your first post that your image was in the CSS background and that this image appears on all site pages.  But you want to use a different background image on one page only.

               

              Embedded CSS code looks like this -- not the same as HTML code.

               

              <style type="text/css">

               

              #divName {

              background-image: url (some-BG-image.jpg);

              background-repeat: no-repeat;

              background-position: top left;

              }

               

              </style>

               

              Please visit W3Schools.com for more on CSS backgrounds.

              http://w3schools.com/css/css_background.asp

               

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

              • 4. Re: Editing CSS
                ykgreene1 Level 1

                ok now I am starting to better understand. I was looking at the html code and not the css code.

                 

                here is the css code

                ---------------------------------------------------------------------

                body {
                    background-image: url(images/main-bg.jpg);
                    background-repeat: repeat-x;
                    background-color: #040404;
                    margin: 0;
                    padding: 0;
                    font-size: 11px;
                    color: #CCC;
                    font-family: Arial, Helvetica, sans-serif;
                }
                img {
                    border-top-style: none;
                    border-right-style: none;
                    border-bottom-style: none;
                    border-left-style: none;
                }
                #container {
                    width: 1000px;
                    margin: 0 auto;
                }
                .top-logo {
                    height: 91px;
                    padding: 0 0 0 27px;
                    width: 263px;
                    float: left;
                    margin: 0 0 29px 0;
                }
                .header {
                    height: 305px;
                    width: 849px;
                    margin: 0 0 0 76px;
                    background-image: url(images/main_img.png);
                    background-repeat: no-repeat;
                    padding: 36px 0 0 0;
                }
                .header-corner {
                    background-image: url(images/header-corner.gif);
                    width: 11px;
                    height: 269px;
                    float: right;
                }
                .header-content {
                    margin: 0px;
                    padding: 29px 0 0 10px;
                    float: left;
                    color: #333;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 11px;
                    text-align: center;
                    width: 488px;
                }
                .header-shadow {
                    background-image: url(images/header-shadow.gif);
                    height: 39px;
                    width: 849px;
                }

                 

                .button-go {
                    float: right;
                    margin: 10px 0 0 0;
                }
                #content {
                    margin: 0 0 30px 0;
                    padding: 20px 20px 0 45px;
                }
                .about-column1 h1 {
                    font-family: Headache;
                    font-size: 28px;
                    color: #FFF;
                    font-weight: normal;
                    letter-spacing: -1px;
                    margin: 0 0 20px 0;
                    padding: 0px;
                }

                 

                .footer-content {
                    width: 955px;
                    margin: 0 auto;
                    padding: 15px 0 0 45px;
                }
                .footer-copyright {
                    float: left;
                    padding: 13px 0 0 0;
                }

                 

                .footer-icon {
                    float: left;
                }

                 


                .content-img {
                    margin: 0 10px 20px 0;
                    padding: 0px;
                    width: 110px;
                    float: left;
                }
                .footer-icon ul {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                }
                .footer-icon li {
                    margin: 0px;
                    padding: 0 2px 0 0;
                    display: inline;
                }

                 

                .content-column {
                    width: 270px;
                    margin: 0 55px 0 0;
                    float: left;
                }
                .content-column01 {
                    width: 265px;
                    margin: 0 0px 0 0;
                    float: left;
                }

                 


                .content-column h1 {
                    font-family: Headache;
                    font-size: 28px;
                    color: #FFF;
                    font-weight: normal;
                    letter-spacing: -1px;
                    margin: 0 0 20px 0;
                    padding: 0px;
                }
                .content-column01 h1 {
                    font-family: Headache;
                    font-size: 28px;
                    color: #FFF;
                    font-weight: normal;
                    letter-spacing: -1px;
                    margin: 0 0 20px 0;
                    padding: 0px;
                }
                .about-column {
                    float: right;
                    width: 418px;
                }

                 

                 

                 

                .about-column h1 {
                    font-family: Headache;
                    font-size: 28px;
                    color: #FFF;
                    font-weight: normal;
                    letter-spacing: -1px;
                    margin: 0 0 20px 0;
                    padding: 0px;
                }
                .about-column1 {
                    float: left;
                    width: 400px;
                }
                .about-column1 ul {
                    list-style-type: none;
                    margin: 0px;
                    padding: 0;
                    background-image: url(images/icon-arrow.gif);
                    background-repeat: no-repeat;
                    background-position: left 3px;
                }
                .about-column1 li {
                    background-image: url(images/icon-arrow.gif);
                    background-repeat: no-repeat;
                    background-position: left 5px;
                    padding: 0 0 0 14px;
                    line-height: 18px;
                }

                 

                .about-pix {
                    margin: 0 10px 0 0;
                    padding: 0px;
                    float: left;
                    height: 134px;
                    width: 241px;
                }

                 

                 

                 

                 

                 

                 

                 


                .header-txt {
                    background-image: url(images/header-bg.gif);
                    height: 269px;
                    background-repeat: repeat-x;
                    margin: 0px 0 0 332px;
                }

                 


                .clearboth {
                    clear: both;
                }

                 

                .top-nav {
                    width: 595px;
                    float: right;
                    margin: 36px 0 0 0;
                }

                 

                .top-nav ul  {
                    margin: 0px;
                    padding: 0px;
                }
                .top-nav li  {
                    display: inline;
                    margin: 0px;
                    padding: 0px;
                    list-style-type: none;
                }
                .footer {
                    background-image: url(images/footer-bg.gif);
                    height: 95px;
                }

                 


                .txt-link {
                    font-family: Headache;
                    font-size: 12px;
                    font-weight: normal;
                    color: #FFF;
                }
                h1 {
                    font-family: Headache;
                    font-size: 28px;
                    color: #FFF;
                    font-weight: normal;
                    letter-spacing: -1px;
                    margin: 0 0 20px 0;
                    padding: 0px;
                }
                .contact-img {
                    float: left;
                    height: 137px;
                    width: 140px;
                    margin: 0 20px 0 0;
                }
                .txt-blank {
                    color: #000;
                }

                 

                .contact-column {
                    float: left;
                    width: 750px;
                }
                .contact-column ul {
                    margin: 0px;
                    padding: 0px;
                    list-style-type: none;
                }

                 


                .form{
                    padding: o;
                    margin: 0;
                }

                 

                div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
                    width: 400px; /*width of form rows*/
                    overflow: hidden;
                    padding: 0;
                    margin: 0;
                    height: auto;
                }

                 

                div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
                    float: left;
                    width: 80px;
                    margin-right: 15px; /*spacing with right column*/
                }
                div.thefield ul {
                    margin: 0px;
                    padding: 0px;
                }
                div.thefield li {
                    display: inline;
                    list-style-type: none;
                    margin: 0px;
                    padding: 0 6px 0 0;
                }

                 

                 

                 

                div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
                    float: left;
                    margin-bottom: 10px; /* space following the field */
                }

                 

                div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
                    width: 230px;
                }

                 


                div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
                    width: 229px;
                    height: 100px;
                }
                div.fieldwrapper div.thebig textarea {
                    width: 400px;
                    height: 100px;
                }

                 

                 

                 

                div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
                    width: 379px;
                    text-align: left;

                 

                }
                .contact-column li {
                    background-image: url(images/icon-arrow.gif);
                    background-repeat: no-repeat;
                    background-position: left 5px;
                    padding: 0 0 0 14px;
                    line-height: 18px;
                }

                 

                ---------------------------------------------------------------------

                So how do I incorporate this line into that css code

                 

                *<style type="text/css">*
                 
                #divName {
                background-image: url (some-BG-image.jpg);
                background-repeat: no-repeat;
                background-position: top left;
                }
                 
                *</style>*

                 

                I am wanting to learn this because I have noticed that alot of templates use css and by me learning how to do this I can create many different page styles that are based on templates without totally destroying the css.

                • 5. Re: Editing CSS
                  Nancy OShea Adobe Community Professional & MVP

                  I don't know.  Which image do you want to change?

                  Look through the CSS code to find the one you want replaced.

                  That's the style definition you'll be working with.

                   

                   

                   

                   

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

                  • 6. Re: Editing CSS
                    ykgreene1 Level 1

                    I only want to replace the main_img.png, however i will be replacing this img on multiple pages with diferent img on each page.  So how do i incorporate the code that you have given me in order to do this?

                     

                    .header {
                        height: 305px;
                        width: 849px;
                        margin: 0 0 0 76px;
                        background-image: url(images/main_img.png);
                        background-repeat: no-repeat;
                        padding: 36px 0 0 0;
                    }

                    • 7. Re: Editing CSS
                      MurraySummers Level 8

                      Change this -

                       

                      </head>

                       

                      to this -

                       

                      <style type="text/css">

                       

                      #divName {

                      background-image: url (some-BG-image.jpg);

                      background-repeat: no-repeat;

                      background-position: top left;

                      }

                       

                      </style>

                      </head>

                       

                      In other words, insert an EMBEDDED stylesheet just above the closing </head> tag, so that it overrides the rule in the linked stylesheet for this one page.

                      • 8. Re: Editing CSS
                        ykgreene1 Level 1

                        So do I insert this code in the css code or in the html code.  The only place I have seen the <head> tag is in the html code.   The #divName is what?  I am very sorry everyone but I really need this laid out in baby steps.

                        • 9. Re: Editing CSS
                          Nancy OShea Adobe Community Professional & MVP

                          You would insert this in each HTML page, between the <head> and </head> tags and replace NEW-main_img.png with your alternate images.

                           

                          <style type="text/css">

                           

                          .header {
                             background-image: url(images/NEW-main_img.png);
                              background-repeat: no-repeat;
                          }

                           

                          </style>

                           

                           

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