HTML Reference/Site Design Save

October 26, 2009 at 05:28:13
Specs: Windows Vista
Sorry for title, i didn't really know how to phrase it...

Im soon to start developing a new site using HTML, without the use of software.

From previous experience, i've had a problem when i want to change a design feature.
Should i wish to add something to every page, i'd have to go to each page, and change every single one.

Is there a way to save the page design separate, and have the other pages reference it. Therefore, if i wanted to change the overall design, i'd only have to do one alteration.

Is this possible??

See More: HTML Reference/Site Design Save

Report •

October 26, 2009 at 10:32:36
Hi, yes this is possible. You can easily program this with the use of a CSS. CSS is an acronym for Cascading Style Sheets. It is an efficient and convenient way to define Web page layouts and formats such as font-type, colors, spacing, width, height and similar attributes.

In your header, add this line without comment '//'
// <link href="style.css" rel="stylesheet" type="text/css">

Create a file in notepad with your style attributes and save it as 'style.css'. What will happen is that your web page will call upon the css file as a reference for the style.

The CSS file doesn't need headers nor meta tags, just the attributes.

For example:

div{font-family:Tahoma; font-size:14px; color:#9C8E6D; }
.div{font-family:Tahoma; font-size:20px; color:#737373; }
.a_brown_font{font-family:Tahoma; font-size:30px; color:#8D7A50; }

Report •

October 26, 2009 at 10:42:12
thank you!! that's all i need (cant believe it's that simple)!!

Report •

October 26, 2009 at 11:38:09
oh, wait... hold on...

This doesn't allow for HTML features such as images and links to be referenced.

For Example;
If i were to add another area to the site, I'd have to go to each and every page and add another button at the top, as well as link to it in the sidebar.

Is there a way to do that??

Report •

Related Solutions

October 26, 2009 at 14:03:02
CSS is for presentation and display.

You can definitely code images into your CSS. Here are some examples of what you can include in your CSS file:

#image1 {
background-image: url(images/image1.jpg); background-repeat: no-repeat; background-position: right top; padding-top:5px; margin-bottom:5px;

#logo h1 {
background: transparent url(images/logo.jpg) no-repeat; display: block; width: 200px; height: 50px; font-size: 1px; color: #e9e9e7; border: none;

body {
background-color: #FFFFFF; background-image: url(body-image.jpg); background-repeat: no-repeat; background-position: center center;

You can also definitely code how you want your links to behave and appear in CSS, but you'll need to do the actual linking in HTML.

For example, you can define what it does on hover, visited, click and display for the link. Here's an example:

#Sample-Link-Format {
color:blue;font-size:10pt;display : block;line-height:10px; text-align : center;background-color:#D3AEGB; border:outset 5px #DH7063;text-decoration:none;} A:HOVER {color:black;font-size:10pt;zoom : 50%;display : block; line-height:10px;text-align : center;background-color : #H0DEE5; border :inset 3px #CF3366;text-decoration:none;

Report •

Ask Question