Announcement

Collapse
No announcement yet.

Modifying CSS

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Modifying CSS

    If I was to take a piece of CSS out of the CSS file and put it directly to an HTML page and modify it. Will it over ride the CSS file for that particular HTML page? Lets use the following CSS Style as an example.

    Code:
    h3{background:url(../images/divider-4.jpg) bottom no-repeat;
    display:block;
     width:224px;
     margin:0 0 10px 0;
     padding:0 0 8px 10px;
     font-family:Arial,Helvetica,sans-serif;
     font-size:18px;
     color:#2f1a1a;
     font-weight:normal;
     }

  • #2
    Cascading stylesheets have the following priorities -- a separate stylesheet linked to the page, anything written in the <head> tags and anything written inline (most important).

    Does that help?
    Cat-herder Extraordinaire

    Comment


    • #3
      I think so. So if I take the css example i posted and add it to the HTML page. it will over ride the one in the style sheet.

      Comment


      • #4

        Why don't you suck it and see.

        Experimentation can only improve your coding skills.


        ~ the original bald headed old fart ~

        Comment


        • #5
          So I took the following CSS and nested it directly into the HTML page, so I could have control of it on that particular HTML page. But nothing changed, it never made it worse or better.

          Code:
          h3{background:url(../images/divider-4.jpg) bottom no-repeat;
          display:block;
           width:224px;
           margin:0 0 10px 0;
           padding:0 0 8px 10px;
           font-family:Arial,Helvetica,sans-serif;
           font-size:18px;
           color:#2f1a1a;
           font-weight:normal;
           }

          Comment


          • #6
            Did you put it inside <style> tags?
            Cat-herder Extraordinaire

            Comment


            • #7
              I put it here.

              HTML Code:
               <!DOCTYPE html>
              <html>
              <head>
              
              <meta charset="UTF-8">
              <meta name="description" content="Canadian Stick Curling">
              <meta name="keywords" content="Stick Curling, Curling, Disabled Curling">
              
              <title>Canadian Stick Curling - Home</title>
              
              <link href="css/style.css" rel="stylesheet" type="text/css">
              
              
              <style type="text/css">
              h3{background:url(../images/divider-4.jpg) bottom no-repeat;
              display:block;
               width:224px;
               margin:0 0 10px 0;
               padding:0 0 8px 10px;
               font-family:Arial,Helvetica,sans-serif;
               font-size:18px;
               color:#2f1a1a;
               font-weight:normal;
               }
              </style>
              
              
              </head>
              <body>
              
              
              <br>
              <div id="main-wraper">
              <div id="top-wraper">
              
              <div id="banner"></div>
              
              <!--Navigation starts-->
              
              <ul id="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="events.html">Events</a></li>  
                <li><a>Provinces</a>
                <ul>
                  <li><a href="alberta.html">Alberta</a></li>
                  <li><a href="bc.html">British Columbia</a></li>
                  <li><a href="manitoba.html">Manitoba</a></li>
                  <li><a href="newbrunswick.html">New Brunswick</a></li>
                  <li><a href="newfoundland.html">Newfoundland and Labrador</a></li>
                  <li><a href="novascotia.html">Nova Scotia</a></li>
                  <li><a href="ontario.html">Ontario</a></li>
                  <li><a href="pei.html">Prince Edward island</a></li>
                  <li><a href="quebec.html">Quebec</a></li>
                  <li><a href="saskatchewan.html">Saskatchewan</a></li>
                  <li><a href="ynt.html">Yukon and Northwest Territories</a></li>
                 </ul></li>
                <li><a href="rules.html">Rules & Draw Templates</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="links.html">Links</a></li>
                <li><a href="contact.html">Contact Us</a></li> 
              </ul>
              
              <!--Navigation ends-->
              
              <div id="mid-wraper"><br>
              <div class="mid-wraper-top">
              
              <div class="mid-leftouter"><br>
                <h1>2016 Manitoba Open Championships Index</h1>
                
              </div>
              
                 <!-- Left Navigation starts-->
              
              <div class="right-container">
              <div class="right-container-top">
              <h3><span class="red-heading">Back To Gallery Home</span></h3>
              
              
              
              
               <!-- Left Navigation ends-->
              <br>
              
              <table width="870" border="2">
                <tbody>
                  <tr>
                    <td ><h3><strong>2016 Manitoba Open Championships (From Behind The Glass)</strong></h3></td>
                    <td><p><strong>2016 Manitoba Open Championships (Banquet & Special Photos)</strong></p></td>
                  </tr>
                  <tr>
                    <td><p><strong>2016 Manitoba Open Championships (2016 Special Delivery(s))</strong></p></td>
                    <td><p><strong>2016 Manitoba Open Championships (Action shots)</strong></p></td>
                  </tr>
                  <tr>
                    <td><p><strong>2016 Manitoba Open Championships (2016 Awards)</strong></p></td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                </tbody>
              </table>
              
              
              <br>
              <br>
              
              
                                              <h3><span class="red-heading">Back To Gallery Home</span></h3>
                                           
              <div class="footer-right">&copy; Copyright 2014. Canadian Stick Curling</div>
              </div>
              </div>
              </div>
              </body>
              </html>

              Comment


              • #8
                Hi there conquer,

                But nothing changed, it never made it worse or better.
                In your "style.css" file you have this...
                Code:
                
                h3{background:url(../images/divider-4.jpg) bottom no-repeat;
                display:block;
                 width:224px;
                 margin:0 0 10px 0;
                 padding:0 0 8px 10px;
                 font-family:Arial,Helvetica,sans-serif;
                 font-size:18px;
                 color:#2f1a1a;
                 font-weight:normal;
                 }
                ...and in your HTML you have placed this...
                Code:
                
                <style type="text/css">
                h3{background:url(../images/divider-4.jpg) bottom no-repeat;
                display:block;
                 width:224px;
                 margin:0 0 10px 0;
                 padding:0 0 8px 10px;
                 font-family:Arial,Helvetica,sans-serif;
                 font-size:18px;
                 color:#2f1a1a;
                 font-weight:normal;
                 }
                </style>
                Correct me, if I am mistaken but the CSS attributes appear to be identical.

                Try changing a few values and then it will either "make it worse or better".


                ~ the original bald headed old fart ~

                Comment


                • #9
                  ok we got it now. font in cSS needed fixing. thank you all.

                  Comment

                  Working...
                  X