Member Avatar for cavpollo

Hey there,

I need some help with how to achieve certain design in my web. The problem is that I dont knwo exactly the name of what I need nor the code.

But I know how to explain it.

Imagine this, u got 4 different pages and u place a table with a red square inside. No problems so far... but what if I change my mind and I want it to be yellow? I dont want to change the code of each one of those pages one by one.... is there a way to create a file that will load into those 4 pages so when I modify the file, the 4 pages with the square change without actually having to go through their code?

  • 8 Contributors
  • 7 Replies
  • 337 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Ausopenxcell

Dani AI

Generated

A single shared file is exactly the right idea. Building on and , the most maintainable approaches are (A) a single external stylesheet that every page links to, and (B) a shared header/snippet that you include in every page (server-side include or template). Below are compact, practical options and a few gotchas.

Use a CSS custom property so one edit changes every instance. Put this in one stylesheet and link it from every page:

:root {
  --square-color: yellow; /* edit this once to change site-wide */
}

.color-square {
  width: 50px;
  height: 50px;
  background: var(--square-color);
  display: inline-block;
}

If you prefer to centralize markup as well, keep the square in a single include file and insert that into each page. Example (server-side):

<!-- header.php -->
<div class="color-square"></div>

<!-- on each page -->
<?php include 'header.php'; ?>

Notes, caveats and practical tips:

  • Browser caching: when you update the stylesheet, visitors may still see the old color. Use a version query (e.g., styles.css?v=2) or change the filename to force clients to fetch the new file.
  • Old browsers: CSS variables are widely supported in modern browsers; add a simple fallback (a plain background: yellow; before the var(...) line) if you must support ancient browsers.
  • Accessibility: check contrast if the square carries information (color alone shouldn’t be the only cue).
  • Image vs CSS: as suggested, replacing an image works but is heavier than a CSS color for a simple solid square.
  • For quick prototyping you can use design tools, but for a single reusable color value the stylesheet or include is the cleanest, lowest-overhead solution (as and touch on in different ways).

This keeps the change isolated to one file, makes theming easy, and avoids editing multiple HTML pages.

Recommended Answers

All 7 Replies

Member Avatar for almostbob

its called CSS, cascading style sheets
a basic tutorial is http://www.w3schools.com/css/

simply you put a link in the head of each file to the stylesheet
and in the stylesheet define the look of the page
every page looks like the style
change the style sheet, change every page

When you get some code written, it is very much the same as the style in <head> or the width= background= attributes of plain vanilla html, there is a forum dedicated to css, next door to this one, html & CSS forum and there are code mavens who can answer and suggest
CSS :: no longer need tables for layout, position every element where you want it, tighter faster code, less to debug

Edited by almostbob because: n/a
Member Avatar for Arianna

Yes, you use CSS, just like almostbob said. It's very useful. As for the red square, you would make a div, and then choose the color. For example your html file's contents would have this:

<body>
<div id="box"></div>
</body>

In your css, you'd have this.

div.box {
width: 50px;
height: 50px;
background-color: red;
}

You would get a box with a red background. Now if you wanted it yellow, you'd just change the stylesheet for that. :)

Edited by Arianna because: n/a
Member Avatar for sarahxbox2009

Websites are judged by content and layout. How good your content maybe, if your layout is not appealing, visitors will not be eager to come back. Everyone is not born with a quality of creating layouts that are pleasing to the eye.
Try the following techniques:
1. Keep it simple
2. Readable font size and face:
3. Use web safe eye pleasing colors
4. One important aspect of layout is keeping track of dimensions of a web page
5. Limit File Size
Hope this post will help you:)

Member Avatar for migcosta

Start using professional web-design tools.. they will take care of the css for you ;)

Edited by migcosta because: n/a
Member Avatar for Geoff Hinde

If you are not into CSS you could try designing a background image (solid colour) and place it in the table cell. (See your html guide to do this.)

Then you could change the background image in your images subdirectory and it will appear on all pages.

(May not work well on all browsers. Check first.)

Geoff A Hinde

Member Avatar for stellamary

The meta tag must be kept in mind.

Dont tale slow proccesing site

Set the meningful splash

Keep the loud backround as possible as spotive process

Create your individuality in your message.

Member Avatar for Ausopenxcell

I also recommend you to go with W3Schools for learing CSS. You can learn easily with example for web designing.

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.