22 {{ upvoteCount | shortNum }}
22 {{ upvoteCount | shortNum }}

linking .css to php document.

by ronc0011
19 replies
So I've started tinkering with php and of course right from the beginning i'm having problems with the simplest things. I've installed WAMP Server so I've got a live Apache instance on my machine with the php interpreter running so i can run the pages I build So the first thing I'm trying to do is print to the screen html and I want to style it using CSS. I've got an external stylesheet site.css and so far I haven't' been able to get my text to pick up any of the styling from my style sheet In fact I haven't been able to find anything helpful on this topic. I've got Lynda.com and also VTC.com and n both cases they seem to be using depreciated HTML or styling. which I don't really care so much about except if I load the page or html in to VWD it gets flagged as depreciated code. So I prefer to use VWD (Visual Web Developer) to create any file except php files. I find it to be a much better coding environment. End result is I'm building my CSS file in VWD so all my styling rules are in my file site.css


I have some basic classes defined in the css file i.e.


.Red
{
font-family:Tahoma;
font-size;42px;
font-weight:bold;
color:Red;
}


.blue
{
font-family:Tahoma;
font-size;42px;
font-weight:bold;
color:Blue;
}

so now in my .php file when i try to output any html I'm not getting any styling from site.css i don't really know how to set up that link.

This gets no styling
print
<span=class="Blue" >
"Some text on my page and some text I added to see if the page is refreshing"
?>
</span>
This gets no styling

<?php print
<h1 class="Blue">"This is some text in plan HTML"
?>
</h1>




This gets no styling

<?php
print "<p class="Blue">"Hello World"</p> ;

?>


I know it's got to be some little nuance that I'm missing I think one of the issues is that in the .php document there is nothing to link the CSS file
#css #document #linking #php
  • Profile picture of the author KirkMcD
    Did you include the line that includes the style sheet on the page?
    If so, what does it look like. If not, well...
    {{ DiscussionBoard.errors[6575540].message }}
    • Profile picture of the author ronc0011
      Well basiclly the page is an html document but it has a php file extension the head setion has the link tag in it like so...

      <link rel="stylesheet" type="text/css" href="site.css" />


      In fact the entir page is just this





      <html>


      <head>



      <title>phpPage</title>


      <link rel="stylesheet" type="text/css" href="site.css" />




      </head>
      <body>






      <?php



      <h1 class="Blue" >
      print
      x
      "Some text on my page and some text I added to see if the page is refreshing"
      ?>
      </h1>


      < br/>






      <p span=class="Blue">"that is pulling css styling from a linked stylesheet."</p>





      </body>
      </html>
      ?>

      If there are some tags misplaced its because I've been tinkering with it for a while rying to see what its doing or as the case may be "NOT doing"I did have the document declaration in the top I've taken that out at the moment.
      {{ DiscussionBoard.errors[6576119].message }}
      • Profile picture of the author ronc0011
        OK so this is the kind of stuff that just makes no since to me.

        Here's the code now




        <html>


        <head>



        <title>phpPage</title>


        <link rel="stylesheet" type="text/css" href="site.css" />




        </head>
        <body>
        <?php

        print
        <h1 class="Red" >

        "Some text on my page and some text I added to see if the page is refreshing"
        </h1>
        ?>

        < br/>






        <p class="Blue">"that is pulling css styling from a linked stylesheet."</p>


        </body>
        </html>
        ?>
        This page is only picking up teh styling on the second line of text the first line gets no styling but it's obviously reading the site.css file because that's where the blue font is defined and the Blue class. So I'm missing something, there's s reason why one line is getting styled and the other isn't.



        {{ DiscussionBoard.errors[6576220].message }}
        • Profile picture of the author Brandon Tanner
          This won't work...

          <?php
          print "<p class="Blue">"Hello World"</p> ;
          ?>

          ...because whenever you start a string with a double quote, as soon as the php interpreter sees the 2nd double quote, it thinks that the string has ended.

          So if you use double quotes inside the string, then you need to wrap the entire string in single quotes, like...

          <?php
          print '<p class="Blue">"Hello World"</p> ';
          ?>

          Alternately, you could wrap the entire string in double quotes, and use single quotes inside it, like...

          <?php
          print "<p class='Blue'>'Hello World'</p> ";
          ?>

          And to fix your other example...

          <?php
          print           '<h1 class="Red" >"Some text on my page and some text I added to see if the page is refreshing" </h1> ';
          ?>
          Signature

          {{ DiscussionBoard.errors[6576489].message }}
  • Profile picture of the author wayfarer
    I recommend you find an editor that will error check your PHP code before you put it on your server or upload it to the web. It will save you a lot of heartache. A decent free one is Netbeans.

    Also, I would recommend, always always ALWAYS "view source" in the browser, to see what is actually being output to the browser.
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[6577562].message }}
    • Profile picture of the author ronc0011
      Well I have to thank you for that. that seems to have fixed my problem Have just started working with Netbeans. The highlighting looks encouraging but other things are not looking good. mostly the way it appears to handle /manage files. I guess I'll have to see what kind of videos I an find on it.
      {{ DiscussionBoard.errors[6581954].message }}
      • Profile picture of the author Carl Potts
        I think you have a problem with your css selectors, they are case sensitive
        {{ DiscussionBoard.errors[6582138].message }}
        • Profile picture of the author wayfarer
          Originally Posted by Carl Potts View Post

          I think you have a problem with your css selectors, they are case sensitive
          No they aren't. CSS selectors are case insensitive, the exact opposite.
          Signature
          I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
          {{ DiscussionBoard.errors[6582177].message }}
          • Profile picture of the author Carl Potts
            Originally Posted by wayfarer View Post

            No they aren't. CSS selectors are case insensitive, the exact opposite.

            Lets agree to disagree I tested this before posting, I found selectors to be case sensitive
            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>
<style>
.blue{color:blue;}
</style>
</head>

<body>

<h1 class="Blue"> This is a test</h1>
</body>
</html>
            {{ DiscussionBoard.errors[6582261].message }}
            • Profile picture of the author lazypuppy
              Originally Posted by Carl Potts View Post

              Lets agree to disagree I tested this before posting, I found selectors to be case sensitive
              See here - w3.org/TR/css3-selectors/#casesens
              or here - w3.org/TR/CSS21/selector.html#pattern-matching

              Always be consistent!
              {{ DiscussionBoard.errors[6582423].message }}
              • Profile picture of the author Carl Potts
                Originally Posted by lazypuppy View Post

                See here - w3.org/TR/css3-selectors/#casesens
                or here - w3.org/TR/CSS21/selector.html#pattern-matching

                Always be consistent! agreed

                I kind of stand corrected, thanks for the correction

                from the second of your links
                The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.
                I'm not sure how this correlates with my xhtml test file, which did show selectors to be case sensitive

                after further checking css is case insensitive where html is not,http://stackoverflow.com/questions/7...case-sensitive the lack of consistent capitalisation could be the problem here
                {{ DiscussionBoard.errors[6582511].message }}
                • Profile picture of the author lazypuppy
                  Originally Posted by Carl Potts View Post

                  The last link on that page explains it perfectly - Case Sensitivity

                  Especially the last paragraph.
                  The simplest way to mitigate any potential issues surrounding case sensitivity is to always use lowercase for everything in your markup and CSS, where possible. If that's not possible, make sure the case you use is consistent between your CSS and your document markup.
                  {{ DiscussionBoard.errors[6582633].message }}
                  • Profile picture of the author Carl Potts
                    Originally Posted by lazypuppy View Post

                    The last link on that page explains it perfectly - Case Sensitivity

                    Especially the last paragraph.

                    brilliant, thank you Lazypuppy I just use lowercase selectors and I have for years

                    I'm glad we've cleared it up

                    Wayfarer was correct, I was wrong

                    css is case insensitive, xhtml is not

                    the problem is the OPs lack of consistency with class names I think
                    {{ DiscussionBoard.errors[6582715].message }}
                • Profile picture of the author wayfarer
                  Originally Posted by Carl Potts View Post

                  I'm not sure how this correlates with my xhtml test file, which did show selectors to be case sensitive
                  Well, technically XHTML is supposed to be a form of XML. Which is kinda silly, but it makes sense. I never use XHTML any more, since it has pretty much failed in its original purpose, and the HTML 5 DOCTYPE is available, and much easier to remember.
                  Signature
                  I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
                  {{ DiscussionBoard.errors[6582741].message }}
  • Profile picture of the author matt5409
    it's easy to print from PHP you just sometimes need to escape your characters (in this case you don't):

    <?php
    echo '<span class="blue">hello i'm blue</span>';
    ?>

    I hope that helps
    {{ DiscussionBoard.errors[6583729].message }}
  • Profile picture of the author ALicenseToCode
    In response to the OP (ronc0011) I Just wanted to give you another tip going forward that's best development practices, and that's to ALWAYS use the SAME kind of quotes (Either double or single) when you do output prints and echos, and learn the escape character which is a backslash (\).

    This doesn't work:

    <?php echo "<div class="Blue">hello</div>"; ?>

    But this does:

    <?php echo "<div class=\"Blue\">hello</div>"; ?>

    You see? You put the forward slashes in front of characters that don't go in strings and it displays them. You want to get in the habit of always using the same kind of quotes when you echo a string or you'll have to spend a lot of time thinking about it each time you go to make some outputs, and that can get tiring quickly!

    I could go really deep into this but the particular issue you have is resolved, so I wanted to leave this here as a bit of relevant advice you can use.
    {{ DiscussionBoard.errors[6586483].message }}
    • Profile picture of the author ronc0011
      Originally Posted by ALicenseToCode View Post

      In response to the OP (ronc0011)

      This doesn't work:

      <?php echo "<div class="Blue">hello</div>"; ?>

      But this does:

      <?php echo "<div class="Blue">hello</div>"; ?>

      You see? You put the forward slashes in front of characters that don't go in strings and it displays them. You want to get in the habit of always using the same kind of quotes when you echo a string or you'll have to spend a lot of time thinking about it each time you go to make some outputs, and that can get tiring quickly!

      .

      Excellent point and I think you are correct , a much better approach as a general practice
      {{ DiscussionBoard.errors[6588623].message }}
  • Profile picture of the author SmartWeb
    well most of times, i use like this

    <?php echo "<div class='Blue'>hello</div>"; ?>
    or
    <?php echo '<div class="Blue">hello</div>'; ?>

    both of these works, using mix of " and '.
    Signature
    Smart Web Solutions
    {{ DiscussionBoard.errors[6601588].message }}
  • Profile picture of the author jaasmit
    You have given a really good example of integrating css into php. This will be very helpful to the new programmer and who want to build their carrier in the field of web development.
    {{ DiscussionBoard.errors[6611610].message }}

Trending Topics