Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
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??

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; }

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??

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;
}

![]() |
![]() |
![]() |
| Login or Register to Reply | |
| Login | Register |
| Ads by Google |