title: How to apply this sidebar to all pages using CSS?
body: <p>I have 4 different html web pages. The html code below is for a menubar which I want to apply to all four pages. Is there any way I can do this using CSS instead of copying/pasting this menubar html code on all 4 of my html web pages? Basically the four pages are Home, News, Contact, About. Whenever someone clicks on a menubar item, it will redirect them to one of the 4 pages. And on all 4 of those pages, I want the menubar to be displayed. I want to create a CSS file which I can just link all 4 pages to and then the menubar will be displayed (code below). Thanks in advance!</p>
  
  <p>Is there any way I can create a CSS file which at least takes care of the styling? And I will manually add the menubar buttons to each html page?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
      margin: 0;
  }
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%;
      background-color: #f1f1f1;
      position: fixed;
      height: 100%;
      overflow: auto;
  }
  
  li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
  }
  
  li a.active {
      background-color: #4CAF50;
      color: white;
  }
  
  li a:hover:not(.active) {
      background-color: #555;
      color: white;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;ul&gt;
    &lt;li&gt;&lt;a class="active" href="page1.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page2.html"&gt;News&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page3.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page4.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div style="margin-left:25%;padding:1px 16px;height:1000px;"&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>