Member Avatar for vjw757

I have a site .

If you go to the site. You see a bunch of text links on the left side.

My question is
how do i change or control everything in that menu from one CSS file? I would like to use that menu on every page of my site and edit all text and links at from one place.

  • 3 Contributors
  • 3 Replies
  • 130 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ccube921

Dani AI

Generated

Short answer: use one stylesheet for the menu's look, and put the menu HTML itself in a single file that every page pulls in. and are right to use an external CSS file for styling, but CSS only controls presentation — it cannot change link text or the href values. To edit text and URLs from one place you must centralize the menu markup and include that file on every page.

Server-side include (recommended when available):

<!-- menu.html contains the <nav> / <ul> markup -->
<?php include 'menu.html'; ?>

Client-side include (if you have static hosting):

fetch('/menu.html')
  .then(r => r.text())
  .then(html => document.getElementById('site-menu').innerHTML = html);

Key gotchas and tips:

  • Paths: links inside the included menu and image URLs inside CSS resolve differently. Use absolute paths (start with /) or test carefully. Background-image URLs in CSS are resolved relative to the CSS file; <a href> is resolved relative to the page.
  • Active page: add a server-side class="current" to the matching menu item, or use a short script to compare location.pathname and add a class for styling.
  • Caching: browsers cache CSS. When you update styles, bump a query string (e.g., styles.css?v=20251129) or clear cache to force reload.
  • Accessibility: wrap the list in a <nav> and use clear link text for screen readers.

If hosting doesn’t support server-side includes, client-side fetch works but understand search engines and users without JS may not see the menu.

Recommended Answers

All 3 Replies

Member Avatar for essential

Here's a quick example. Assuming that you have this external style sheet in your directory default.css -- and the rules would be:

ul { list-style-type: none; line-height: 140%; margin-left: 1em; width: 100%; }
li { display: inline; margin: 0.8em 0 0 0.8em; padding-left: 0.5em; line-height: 140%; width: auto; }
li a:link { display: block; text-decoration: none; border-bottom: thin dashed; padding-bottom: 0.3em; } /* now try to reference it with your (x)HTML document's. */

Use the link element to reference it on your pages. Simply insert the code below between the head section of your (x)HTML document's...

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

hope this will help you for now...

Member Avatar for vjw757

im sorry im not understanding

Member Avatar for ccube921

1. Save all the CSS in that menu, into a file, and call it menu.css.
2. Add this code to all of the files which have the menu in it:
<link rel="stylesheet" type="text/css" href="menu.css" media="all" />
Now all of the pages with that code in it, use that stylesheet and when you change that stylesheet all of the pages will change

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.