0

can anyone say how can we link a css file to a php file..

I tried this

<link rel="stylesheet" href="site.css">

here site.css is my css file and i am including this in home.php file in the head section.
but i am not able to get the effects in the webpage.
External style sheet concept is not giving any effect but embedded style sheet in the home.php file is showing the required effects
help me please
thanks in advance

3
Contributors
13
Replies
17
Views
5 Years
Discussion Span
Last Post by sharathg.satya
0

Try this code to see effect of CSS code

HTML CODE

<!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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="CSSStyle">

CSS Style

</body>
</html>
________________________________

CSS FILE CoDE

________________________________


@charset "utf-8";
/* CSS Document */

.CSSStyle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #C66;
}

Edited by mike_2000_17: Fixed formatting

0

well.thanks for the example
but i am not getting those effects in my file
can anyone help me please

0

well

my code is somewhat lengthy but i will post it with a hope that the problem gets solved :)

<html>
 <head>
   <link rel="stylesheet" href="/site.css"/>
  <title>
     home page
  </title>
 </head>
 
    <body>
 
      <h1>  <center>   Get to know something  about the food we eat</center> </h1>
    <?php
       require("include.php");
       
    ?>
   <br>

   <font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>The food we eat contains different types of protiens,vitamins and minerals contained in it. Lets us understand what protiens,vitamins and minerals means....</b></font>
  </br>
  <br>   
   <font id="header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>what is a protien </u> ?? </font>
   <pre> <ul type="circle"> <font ><b> <li> Protein is found in every cell, muscle and tissue of our body and is also present in many of the foods that we eat.</li>
    <li> Basically proteins are made up of long chains of amino acids.There are 20 different amino acids that join together <br> to make all types of protein.</li>
    <li> There are many  </li>
     </b>
     </font>
    </ul></pre>
<font id="header">&nbsp;<u>Complete Protien </u>:  </font>
 <pre><font><ul><b>  
   <li>Complete Protien Source :A complete protein called high quality proteins.Animal-based foods; for example, meat, poultry, fish, milk, eggs, and
</li>
  <br>   
<center>  <img src="C:/wamp/www/site/images/milk.jpeg" width="175" height="175" /><img src="C:/wamp/www/site/images/meat.jpg" width="175" height="175" /><img src="C:/wamp/www/site/images/egg.jpg" width="175" height="175" /><img src="C:/wamp/www/site/images/cheese.jpeg" width="175" height="175" /></center>
    

<li>more incomplete protein sources that together provide adequate amounts of all the 
essential amino acids. </li>
   <br>  
<center><img src="C:/wamp/www/site/images/rice.jpeg" width="175" height="175" /><img src="C:/wamp/www/site/images/beans.jpeg" width="175" height="175" /><img src="C:/wamp/www/site/images/corn.jpeg" width="175" height="175" /></center>
    

</pre>   












<font id="header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>Measure how much is required for you </u> .. </font>
  
  <pre>
   <ul><font><b>
             <li> The person's needs for protiens grows as he grows up.</li>
             <li> To figure out divide by 2 
 for example,        </li>
             <li>  if you're eating a balanced diet, you don't 
 need to keep track of it.</li> </b></font></ul></pre>






<font id="header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>What are Vitamins </u> ?? </font>
 <pre> <ul><font> <b><li> vitamins play together to help the body function correctly.</li>
   
  <li> A deficiency of any one of these vitamins has the potential of causing problems within the human body.</li>

<li>  Vitamins such as K are given to newborns in an effort to prevent unwanted bleeding and vitamin D is added to milk to as a 
 supplement. Folic acid is recommended as a supplement for pregnant women to alleviate potential birth defects.
</li></b> </font></ul>
</pre>

<center><img src="C:/wamp/www/site/images/vitamins1.jpeg" width="175" height="175" /><img src="C:/wamp/www/site/images/vitamins2.jpeg" width="175" height="175" /> </center>
<br>



  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To know more <a  class="anchorhover"  href="home.html" >Click here </a>
<br> <br>








<font id="header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>What are Minerals </u> ?? </font>
<pre><ul><font>
<li>minerals help your body grow, develop, and stay healthy.</li> 
<li>  Some minerals 
 are even used to make hormones or maintain a normal heartbeat.</li>
</font></ul></pre>









<font id="header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>Kinds of Minerals </u>.. </font>
<br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Minerals can be classified based on the amount required to the body.They are </b>
<pre><font><ul><li>&nbsp;&nbsp;&nbsp;<font style="color:black">Macrominerals :</font> .The 
   macromineral group is made up of calcium, phosphorus, magnesium, sodium, potassium, chloride, and sulfur. </li>
  <li>&nbsp;&nbsp;&nbsp;<font style="color:black">Traceminerals :</font>Trace means a little. Even though our body requires Trace Minerals they are needed in a small amounts. Trace minerals 
   includes iron, manganese, copper, iodine, zinc, cobalt, fluoride, and selenium.</li>
</pre>  

</ul>
</font><br>
<center><img src="C:/wamp/www/site/images/minerals1.jpg" width="250" height="250" /><img src="C:/wamp/www/site/images/minerals.jpg" width="250" height="250" /> </center>


<br>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To know more <a  class="anchorhover"  href="home.html" >Click here </a>
<br><br><br><hr color="yellow">
</body>    
</html>

and the css code is

body
         {
          background-color:#696565;
            font-style:italic;
         }
  a.page
   {
     color:#11168C;
       text-decoration:none;
   
   }
  a.anchorlink:link
    {
      color:orange;
       text-decoration:none;
      
       
    }
  a.anchorhover:hover
      {
        color:green;
        
          
      }
    h1
    {
     color: #B8860B;  
     text-decoration:underline;
     font-style:italic;
     text-shadow:2px 2px #FAF8CC;
    }
   font#header
    {
     color: #490A81;  
     font-size:"25px";
     font-style:italic;
     
    }
    font
   {
     font-size :medium;
     font-style :"italic";
     font-family:"comic sans";
     color:#641220;
   }

and the code for include.php is

<head>
  <style type="text/css">
   
   
   a:link
    {
      color:#F0E68C;
       text-decoration:none;
      
       
    }

    a:visited
      {
         text-decoration:none;
        color:#F0E68C;
      }
    a:hover
      {
        color:brown;
         text-decoration:underlined;
          background-color:#FF8247;
      }
  
  </style>
  </head>
   <body>
     <table border=1 cellspacing=0  align ="center" >
       <tr>
        <td><a href="home.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>home</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
        <td><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>more information</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
        <td><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>login</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
        <td><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>feedback</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
       </tr>
     </table>  
   </body>

now i hope i will be helped

thanks in advance

0

First problem is include.php file, you're going to include another header section to your main file. So if you look at the output source in your browser you will see two header sections.

This means: in your include.php write only:

<table border=1 cellspacing=0  align ="center" >
       <tr>
        <td><a href="home.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>home</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
        <td><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>more information</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
        <td><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>login</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
        <td><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>feedback</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>
       </tr>
     </table>

Then check if you are able to view the css file through your browser by typing http://your_server_link/site.css

bye

Edited by cereal: n/a

0

well i tried the way u asked to
i executed the code using wamp server
but i didnt find the effects changed

and what is my_server_link?
what does it refer to??

Edited by sharathg.satya: n/a

0

well the problem is solved..
but i am facing another problem when i am trying to execute the home.php file in mozilla browser..
the pics are not being displayed in mozilla where as they are being displayed in IE..
help me please
thanks in advance

0

Change the path for the images, for example:

<img src="C:/wamp/www/site/images/milk.jpeg" width="175" height="175" /> # wrong
<img src="/images/milk.jpeg" width="175" height="175" /> # ok

Just as for the css file. Bye :)

Edited by cereal: n/a

0

thanks for the help
i tried out this one

<img src="/images/rice.jpeg" width="175" height="175" /><img src="/images/beans.jpeg" width="175" height="175" /><img src="C:/wamp/www/site/images/corn.jpeg" width="175" height="175" /></center>

in this code the line <img src="/images/rice.jpeg" width="175" height="175" /> didnt work both in IE and Mozilla
but the code <img src="C:/wamp/www/site/images/corn.jpeg" width="175" height="175" /> worked in IE but not in mozilla
can anyone help me please
thanks in advance

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.