Geek Answers Handbook

Why is my CSS overridden?

MY CSS is called ppcss.css, but after the three jquery links that I have, it overrides my css and makes my page different. Can someone help me solve this problem? change or change the code to explain me. thank.

    $(function() {

    $( "#tabs" ).tabs();

    });
body { background-color:#00BFFF;}
		
    div#header { width:auto;
			height:75px;
			background-image:url('banner.gif');
		  }	
    h1{ color:white;
			text-align:center;
			font-size:1.8em;
			
			}
    h3{ color:white;
	text-align:center;
	font-size:1em;
			
			}
  
    div#wrapper{width:1200px;
			background-color:#fff;
			margin-left:auto;
			margin-right:auto;
			
			
			}	
		  
    h1.head,h3.subhead{font-family:georgia,serif;
					margin-left;20px;}
						
				
 						
    h1.head{font-size;2.25em;
		padding-top:15px;
		
	   }
    h3.subhead{ margin-top:-20px;
			letter-spacing:1px;
		  }
    ul#navlist li{ display:inline;
			list-style-type:none;
			padding-right:30px;}
    ul#navlist{			
			background-color:#ADFF2F;
			margin-top:.99px;
			margin-bottom:1.99px;
		 }
    ul#navlist a{			
			text-decoration:none;
			font-size:1.5em;
		 }		
     ul#navlist a:hover{	color:red;		
	  		
		 }	
	
    div#leftcol{ float:left;
			width:180px;
			margin-left:2px;}


    div#maincol{float:left;
		   width:500px;
			margin-left:15px;
			margin-right:15px;
			text-align:center;
			}
    div#maincol h5{font-size:85%;
			line-height:1.25em;
			text-align:center;
			margin-right:1px;
			font-family:arial, sans-serif;
			}
			
    div#rightcol{ width:180px;
				float:right;
				margin-right:20epx;
				
				}
    div#footer{ background-color:#ADFF2F;
					height:15px;
					clear:both;}
    #home div.smfeature{width:180px;
			height:auto;
			border:thin solid red;
			margin-bottom:10px;}
    #home div.smfeature h4 { font-family:arial,sans-serif;
				font-size:75%;
				color:brown;
				background:#48D1CC;
				text-align:center;
				letter-spacing:2px;
				padding:.5em;
				
				margin-top:0px;
				margin-right:0px;
				}
    div#searchbox2 { background-color:#7B68EE;
					text-align:center;
					}
    div#links { width:150px;
			height:auto;
			text-align:center;
			}
    a { text-decoration: none;
	}				
    p a:hover{ color:red;}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   
     <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="tabs">

    <ul>
    <li><a href="#home">Homepage</a></li>

    <li><a href="animals.html">Animals</a></li>

    <li><a href="Algae.html">Plants</a></li>

    <li><a href="FAQS.html">F.A.Qs</a></li>
	
	<li><a href="ContactUs.html">Contact us</a></li>

    </ul>
    <div id="home">
	<div id="wrapper">
	<!-- header -->
	<div id="header">
	<h1 class="head"> Underwater World </h1>
	<h3 class="subhead">
	A New World!
	</h3>
	</div>
	
		
	<!-- left column -->
	<div id="leftcol" >
	
	<div class="smfeature">
	<h4> Who we are. </h4>
	
	</div>
	
	<div class="smfeature">
Run codeHide result
+4
source share
4 answers

jquery-ui.css applies its own styles to .tabs () if you want to use your own styles .. delete this

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

or you can go to jquery-ui.css and make it empty

+1
source

, , CSS Viewer FireFox ( , ), , .

, ( ) js- , :

.elementClass {
border: 1px !important;
}
0

css jquery-ui.css. css , jquery-ui.css. , css, ul li jquery-ui.css, -

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: url(http://code.jquery.com/ui/1.11.2/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png);
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(170, 170, 170);
border-bottom-style: solid;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(170, 170, 170);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(170, 170, 170);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(170, 170, 170);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
color: rgb(33, 33, 33);
display: block;
float: left;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: normal;
height: 59.375px;
line-height: 22.8800010681152px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: -1px;
margin-left: 0px;
margin-right: 3.51999998092651px;
margin-top: 1px;
padding-bottom: 1px;
padding-left: 0px;
padding-right: 30px;
padding-top: 0px;
position: relative;
text-align: left;
top: 0px;
white-space: nowrap;
width: 194.53125px;

, .

I also noticed that you did not set id navlistin yours ul. So your public did not get the css you wrote. I changed your fragment a bit. This is not entirely normal, but it shows the effect of your css.

$(function() {

      $("#tabs").tabs();

    });
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <style>
      body {
        background-color: #00BFFF;
      }
      div#header {
        width: auto;
        height: 75px;
        background-image: url('banner.gif');
      }
      h1 {
        color: white;
        text-align: center;
        font-size: 1.8em;
      }
      h3 {
        color: white;
        text-align: center;
        font-size: 1em;
      }
      div#wrapper {
        width: 1200px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
      }
      h1.head,
      h3.subhead {
        font-family: georgia, serif;
        margin-left;
        20px;
      }
      h1.head {
        font-size;
        2.25em;
        padding-top: 15px;
      }
      h3.subhead {
        margin-top: -20px;
        letter-spacing: 1px;
      }
      ul#navlist li {
        display: inline;
        list-style-type: none;
        padding-right: 30px;
      }
      ul#navlist {
        background-color: #ADFF2F;
        margin-top: .99px;
        margin-bottom: 1.99px;
      }
      ul#navlist a {
        text-decoration: none;
        font-size: 1.5em;
      }
      ul#navlist a:hover {
        color: red;
      }
      div#leftcol {
        float: left;
        width: 180px;
        margin-left: 2px;
      }
      div#maincol {
        float: left;
        width: 500px;
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;
      }
      div#maincol h5 {
        font-size: 85%;
        line-height: 1.25em;
        text-align: center;
        margin-right: 1px;
        font-family: arial, sans-serif;
      }
      div#rightcol {
        width: 180px;
        float: right;
        margin-right: 20epx;
      }
      div#footer {
        background-color: #ADFF2F;
        height: 15px;
        clear: both;
      }
      #home div.smfeature {
        width: 180px;
        height: auto;
        border: thin solid red;
        margin-bottom: 10px;
      }
      #home div.smfeature h4 {
        font-family: arial, sans-serif;
        font-size: 75%;
        color: brown;
        background: #48D1CC;
        text-align: center;
        letter-spacing: 2px;
        padding: .5em;
        margin-top: 0px;
        margin-right: 0px;
      }
      div#searchbox2 {
        background-color: #7B68EE;
        text-align: center;
      }
      div#links {
        width: 150px;
        height: auto;
        text-align: center;
      }
      a {
        text-decoration: none;
      }
      p a:hover {
        color: red;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

    <div id="tabs">
      <ul id="navlist">
        <li><a href="#home">Homepage</a>
        </li>

        <li><a href="animals.html">Animals</a>
        </li>

        <li><a href="Algae.html">Plants</a>
        </li>

        <li><a href="FAQS.html">F.A.Qs</a>
        </li>

        <li><a href="ContactUs.html">Contact us</a>
        </li>

      </ul>
      <div id="home">
        <div id="wrapper">
          <!-- header -->
          <div id="header">
            <h1 class="head"> Underwater World </h1>
            <h3 class="subhead">
    	A New World!
    	</h3>
          </div>


          <!-- left column -->
          <div id="leftcol">

            <div class="smfeature">
              <h4> Who we are. </h4>

            </div>

            <div class="smfeature">
Run codeHide result
0
source

A simple workaround would be to increase CSS specifications. For example, I updated all tab tab properties in 'html body #tabs> ul [role = tablist]' and now it will respect your new rules.

    $(function() {

    $( "#tabs" ).tabs();

    });
body { background-color:#00BFFF;}
		
    html body div#header { width:auto;
			height:75px;
			background-image:url('banner.gif');
		  }	
    html body h1{ color:white;
			text-align:center;
			font-size:1.8em;
			
			}
    html body h3{ color:white;
	text-align:center;
	font-size:1em;
			
			}
  
    html body div#wrapper{width:1200px;
			background-color:#fff;
			margin-left:auto;
			margin-right:auto;
			
			
			}	
		  
    html body h1.head,html body h3.subhead{font-family:georgia,serif;
					margin-left;20px;}
						
				
 						
    html body h1.head{font-size;2.25em;
		padding-top:15px;
		
	   }
    html body h3.subhead{ margin-top:-20px;
			letter-spacing:1px;
		  }
    html body #tabs > ul[role=tablist] li{ display:inline;
			list-style-type:none;
			padding-right:30px;}
    html body #tabs > ul[role=tablist]{			
			background-color:#ADFF2F;
			margin-top:.99px;
			margin-bottom:1.99px;
		 }
    html body #tabs > ul[role=tablist] a{			
			text-decoration:none;
			font-size:1.5em;
		 }		
     html body #tabs > ul[role=tablist] a:hover{	color:red;		
	  		
		 }	
	
    html body div#leftcol{ float:left;
			width:180px;
			margin-left:2px;}


    html body div#maincol{float:left;
		   width:500px;
			margin-left:15px;
			margin-right:15px;
			text-align:center;
			}
    html body div#maincol h5{font-size:85%;
			line-height:1.25em;
			text-align:center;
			margin-right:1px;
			font-family:arial, sans-serif;
			}
			
    html body div#rightcol{ width:180px;
				float:right;
				margin-right:20epx;
				
				}
    html body div#footer{ background-color:#ADFF2F;
					height:15px;
					clear:both;}
    html body #home div.smfeature{width:180px;
			height:auto;
			border:thin solid red;
			margin-bottom:10px;}
    html body #home div.smfeature h4 { font-family:arial,sans-serif;
				font-size:75%;
				color:brown;
				background:#48D1CC;
				text-align:center;
				letter-spacing:2px;
				padding:.5em;
				
				margin-top:0px;
				margin-right:0px;
				}
    html body div#searchbox2 { background-color:#7B68EE;
					text-align:center;
					}
    html body div#links { width:150px;
			height:auto;
			text-align:center;
			}
    html body a { text-decoration: none;
	}				
    html body p a:hover{ color:red;}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   
     <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="tabs">

    <ul>
    <li><a href="#home">Homepage</a></li>

    <li><a href="animals.html">Animals</a></li>

    <li><a href="Algae.html">Plants</a></li>

    <li><a href="FAQS.html">F.A.Qs</a></li>
	
	<li><a href="ContactUs.html">Contact us</a></li>

    </ul>
    <div id="home">
	<div id="wrapper">
	<!-- header -->
	<div id="header">
	<h1 class="head"> Underwater World </h1>
	<h3 class="subhead">
	A New World!
	</h3>
	</div>
	
		
	<!-- left column -->
	<div id="leftcol" >
	
	<div class="smfeature">
	<h4> Who we are. </h4>
	
	</div>
	
	<div class="smfeature">
Run codeHide result
0
source

More articles:


All Articles