sonal Posted November 26, 2011 Share Posted November 26, 2011 I try to modularize my site with header and footer templates of a css file. When I link a css file in my header file, it does not show the format/style. But when I copy-paste entire CSS code into head part of the header file, then I can see the style and formatting applied to the index page. ( I make sure that link and paths are correct, and file exists.) But I don't know CSS yet. Second thing I want to know is, How can I apply different CSS parts in different pages? I mean my index page shows an introductory text, but login and registration page requires to show forms. Do I apply the CSS file again in those pages? Link to comment Share on other sites More sharing options...
Josee Posted November 26, 2011 Share Posted November 26, 2011 Hello, Sonal, Could you show the code you have in your header file regarding the link to the CSS file? How can I apply different CSS parts in different pages? I mean my index page shows an introductory text, but login and registration page requires to show forms. Do I apply the CSS file again in those pages? It depends on how much CSS you have, but if it's not too much you can have all the CSS in one file. Since you say you don't know CSS yet, the basics are that you create different formatting styles for all the different HTML elements. So one and the same file can/will have styles for introductory texts, headings, input fields in forms, tables and all the other elements you are using in your website. If you want the text in one paragraph to be blue, instead of black as the default text-color, you just use a "class" in your html (something like: < p class = "blue_text" >), and create a special CSS rule for this class of paragraphs. In your example, all the different styles for your introductory text and your forms can be in one and the same CSS file. Or you can decide it will be easier to maintain your files if they are smaller, and you can split the CSS into two files, for instance: one called css_main.css, and another called css_forms.css, for instance. But you will probably still need links to both files in your header, because your registration page will probably use rules from both. So your header file would have two lines like these: <link rel="stylesheet" type="text/css" href="css/css_main.css" media="all" /> <link rel="stylesheet" type="text/css" href="css/css_forms.css" media="all" /> In this example, I'm considering that all files needing the css files will be in the same directory as a sub-directory called "css", where I keep the different css files. Which means my file hierarchy is like this: project_directory index.php some_other_page.php includes header.php footer.php css css_main.css css_forms.css And the path in the < link > element is from "index.php" to "css_main.css", not from "header.php" to "css_main.css". I hope this helps, 1 Link to comment Share on other sites More sharing options...
sonal Posted November 27, 2011 Author Share Posted November 27, 2011 Thank you very much, Josee. It worked for me. The last line of your reply, "And the path in the < link > element is from "index.php" to "css_main.css", not from "header.php" to "css_main.css"." showed me the correct way to link that css file. I was doing the other way, showing the path from my header file. I also got the basics of CSS in just one line of your answer, " create different formatting styles for all the different HTML elements". That's so great! Thanks again for taking time to elaborate the answer. Link to comment Share on other sites More sharing options...
sonal Posted November 28, 2011 Author Share Posted November 28, 2011 Josee, It worked yesterday on my localhost. But I tried to upload all related files, and updated the codes as well on live site. But it doesn't show the formatting. I also tried to use absolute path in <link> element. But it's not working. I don't know why. My live sitename is : www.myreadinglog.net (I have not included new formatted header to any other pages, except the homepage.) thanks in advance.. Link to comment Share on other sites More sharing options...
Josee Posted November 28, 2011 Share Posted November 28, 2011 Hello, Sonal, When I look at the source code for your website, the path to the css file (with added spaces) is href = " /home/myreadin/includes/default.css " Is this the right URI, or should it start with "includes"? Remember that the path is from the file that calls your css file (for instance, from "index.php") to "default.css". This topic from the forum helped me to get the paths to my files right: http://www.larryullm...actly-is-a-uri/ I hope it may help you too. 2 Link to comment Share on other sites More sharing options...
sonal Posted November 28, 2011 Author Share Posted November 28, 2011 Yes, I now know that path is from the file "index.php" to "default.css". So I gave it that, and it was not working. So I used the whole absolute path. Even that did not worked. Then I transferred my css and its related files into a different folder, than "includes" where my header file resides. And again updated link with "css/default.html" . That did not work either. Now I transferred all css stuff into parent folder, with index file. Updated link as "href="default.css" , and it shows the format. Well, I think It should work before when files were separate... Any way, thanks again for your reply... Link to comment Share on other sites More sharing options...
Recommended Posts