Making a CSS Stylesheet for different pages of a website

Question

I am making a website with only two main pages which are "Index" and "About me" pages. After making the templates and everything, I came across a confusing problem where I couldn't really edit the Css style of the about page.

Basically my About and Index page got the same template from my main Html (the one made from scratch) Which i thing it's fine there .. but I would like My About page to have a different look from my Index page, Everytime i make a change on the Editable region that I would like to make disappear from the About page, It also Affects the INdex page. Same for the Stylesheet, I want different colors on the about page but it seems like everytime i do something it affects the whole site.

Here is the picture of the site i made so far. Homepage and about page

Both pages have the same template, same editable region and the same css and look exactly the same way at the moment but I would like to remove the div class:"notes" from the about page and expand the width of his div id="main-content" change completely almost every even the colors i mean the whole style of the about page, without affecting the Homepage and leave it as it is .. what should I do? Please

Thank you

PS: i am using Dreamweaver cs6.

main dwt html/ same html for the about and index page only difference is the for index and about are not editable

<code> 

<!doctype html>

<html>

<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5      elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>

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

<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>



<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
    <div class="frame">
      <div class="fade"></div>
      <img src="../images/huxley.jpg"/>
    </div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
     <div id="icon">
      <ul>
                <li><a href="http://www.twitter.com/justcallmebigdi"><img  src="../images/twitter.png" width="20" /></a></li>
                <li><a href="http://www.behance.net/justcallmebigdi"><img src="../images/behance.png" width="20" /></a></li>
      </ul>
  </div>

    <div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>



 <!--The main heading for the page -->    
    <header>
        <!-- <h1>CI135 Learning journal</h1> -->

      <h2> How I mastered web standards in 10 weeks</h2> 
    </header>

 <!--The primary navigation for the page -->
  <nav>
        <ul>
            <li><a href="../index.html">HOME</a></li>
            <li><a href="../about.html">ABOUT ME</a></li>
        </ul>
  </nav>

 <!--Secondary sidebar navigation -->  
  <aside>
  <div class="image"><img src="../images/information.png" width="100"/></div> 
  <div class="aside">
  <!-- TemplateBeginEditable name="aside" -->
      <h3> The Weekly posts </h3>
      <ol>
        <li><a href="../index.html">Getting started</a></li>
        <li><a href="../index.html">Learning more about tags</a></li>
        <li><a href="../index.html">Learning about lists and tables</a></li>
      </ol>
      <h3> Favourites</h3>
      <ul>
        <li> <a href="../index.html"> W3C markup validation service </a></li>
        <li> <a href="../index.html"> Web platform Docs -  Web development for beginners </a>  </li>
        <li> <a href="../index.html"> Html5 Doctor -  Helping you implement HTML5 today </a></li>
      </ul>
      <h3> Basic Definitions </h3>
      <dl>
        <dt><strong>HTML</strong></dt>
        <dd>Hyper-text markup language - markup language used to structure content</dd>
        <dt><strong>CSS</strong></dt>
        <dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
        <dt><strong>JavaScript</strong></dt>
        <dd>Scripting language for adding interactive behaviour to web pages</dd>
      </dl>
      <!-- TemplateEndEditable -->
      <h3> My time table </h3>
    <table width="523" height="81" border="1">
          <tr>
              <td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
              <td width="215" bgcolor="#FFFFFF">Monday</td>
              <td width="215" bgcolor="#FFFFFF">Tuesday</td>
          </tr>
          <tr>
              <td height="25" bgcolor="#FFFFFF">9-10 am</td>
              <td>&nbsp;</td>
              <td>Lecture</td>
          </tr>
          <tr>
              <td height="23" bgcolor="#FFFFFF">10-11 am</td>
              <td>lecture</td>
              <td>Lab</td>
          </tr>
      </table>
  </div>        
  </aside>



 <!--The main page content -->   
  <main><!-- TemplateBeginEditable name="mainContent" -->
    <article>
      <!--Content node -->
      <div class="header">
        <h1>Week 3: Tables, link images, quoting text </h1>
      </div>
      <p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
    </article>
    <article>
      <div class="header">
        <h1>Week 2</h1>
      </div>
      <p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
    </article>
    <article>
      <div class="header">
        <h1>Week 1</h1>
      </div>
      <p>ADD COMMENTS ABOUT WEEK 1. </p>
      <p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
    </article>
  <!-- TemplateEndEditable --></main>

  <div id="right_side_note">
            <div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
              <h2>Notes</h2>
              <p class="date">March 22, 2011</p>
              <p>The W3C defines HTML and CSS as follows:</p>
              <blockquote>
                <p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
                  <cite>W3C standards for web </cite></p>
              </blockquote>
            <!-- TemplateEndEditable --></div>
  </div>

  <div id="footer">
      <!--Footer content -->
      <p class="footer-text">&copy; 2013 Daniel Biakath / University of Brighton.</p>
</div>

</div>
</div>

<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html> 

<code>

You should do 2 different css pages, and call each of them in the correct page. — freddy
– freddy, Commented Jan 11, 2014 at 1:22
Yh mate I thought about it .. but then How to that and link the new css page to the about page only .. — Codart
– Codart, Commented Jan 11, 2014 at 1:25
He just explained that when he said "call them in the correct page". If you need a sample of how to link to CSS files you should see the answer below. — RacerNerd
– RacerNerd, Commented Jan 11, 2014 at 1:31
Instead of the picture, you should include the HTML for each page. — RacerNerd
– RacerNerd, Commented Jan 11, 2014 at 1:32

RacerNerd · Accepted Answer · 2014-01-11 01:36:31Z

3

You should create two separate CSS files and put the styles for each page into the separate files, say about.css and home.css. From the about page, link to the about.css and from the home page link to the home.css.

A CSS link should look something like this:

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

CSS files are loaded in order so you will need to take that into consideration if styles are supposed to override each other. If the following is declared in the head and both files have a style with the same name, the style in the home.css file will be used. You might not be seeing changes made to the about.css if this is the case. The most important CSS file should be listed last.

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

If your styles are currently inline and look like this:

<style type="text/css">
/*YOUR STYLES HERE*/
</style>

you can make the changes in each file directly or if you want cut everything from inside the tag and put it in the appropriate css file.

If after making changes to your CSS nothing is happening, it is possible, depending on the system you are using, that cache is coming into play. Even though you make changes, the version served by the web server is the same. CSS files seem to do this a lot to me if I'm not careful. If that's the case, reset the website and clear browser cache and you should be good to go.

edited Jan 11, 2014 at 1:36

answered Jan 11, 2014 at 1:25

RacerNerd

1,5751 gold badge13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RacerNerd Over a year ago

If the CSS from the Main.html is stuck in there then you will need to do what you describe and put the CSS in the About page to override those in the other CSS. If you could name the classes and ids for the about us page different than the main, you could use a single css, but if there are shared names, I think you are stuck overriding things.

Codart Over a year ago

Awwwwwwwwwwww Racenerd .. Thanks alot mate .. I get it now ... Yh thanks a lot .. For some reason i can't vote the answer up cuz I got no reputation or somthin ¬_¬ but thanks again.

TimSPQR Over a year ago

Very nice comments RacerNerd. I've agonized over the optimal way to handle external style sheets, and have seen a variety of philosophies - from "One style sheet for the whole site" to "One style sheet for each page, and load all the style sheets on every page" (not sure why). Probably the "right" way is somewhere in the middle. Thanks!

Smith Over a year ago

Yes, Ctr+F5 is a web designers best friend. Most of the time at least.

Codart Over a year ago

OK Guys. after spending the night on it ... The RacerNerd was a Good Idea which i tried but wasn Working more like having multiple separated stylesheet to avoid a bulky single Stylesheet, which wasn't what I asked for.. what i asked is like what TimSPQR said : "One style sheet for each page, and load all the style sheets on every page" .. I guess I just didn't know how to formulate my question

Collectives™ on Stack Overflow

Making a CSS Stylesheet for different pages of a website

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related