I am currently in the process of creating a website with only two main pages - an "Index" page and an "About Me" page. However, I have run into a dilemma when it comes to editing the CSS style on the About Page.
Both my About and Index pages have adopted the same template from my main HTML (which was created from scratch). While having a consistent design is fine overall, I would like the About Page to have a distinct look from the Index Page. Every time I make a change in the editable region that should only apply to the About Page, it unintentionally affects the Index Page as well. The same issue arises with the stylesheet - I want different colors and styles for the About Page, but any changes seem to affect the entire website.
Here is an overview of the current layout of the site: [Homepage and about page](https://www.dropbox.com/s/9a7nm2c6uulbx3e/Untitled-3.jpg)
At this point, both pages share the same template, editable region, and CSS, making them look identical. My goal is to remove the div class:"notes" from the About Page, widen the div id="main-content", completely revamp the style including colors, without impacting the Homepage. How can I achieve this? Please advise.
Thank you
PS: I am using Dreamweaver CS6.
Main DWT HTML/Same HTML structure for the About and Index pages; the only difference being the content for each.
<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 -->
...
<code>