Attaching .css files to existing .html files

CkretAjint · 10-08-2009, 04:52 PM

Sure.

Within the head just add a link to the css document.

Code:

<link rel="stylesheet" type="text/css" href="styles.css" />

Spix · 10-08-2009, 04:59 PM

Thanks for the quick reply Ckret, I'm sorry but I don't quiet understand what to do. Can you break it down a bit? Thanks.

CkretAjint · 10-08-2009, 05:03 PM

Within Dreamweaver create a new css document( File > New > under "Page Type" select "CSS". Save the file in the same folder as your .html document with the name of "styles.css"

In your html document between the <head> tags add "<link rel="stylesheet" type="text/css" href="styles.css" />"

Should look something like:

Code:

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- Other code might go here if you are calling other files or have meta data. -->
</head>
<body>
......

Spix · 10-08-2009, 06:04 PM

Thanks, but how do I apply this procedure to 40 documents at the same time? Do I have to enter the details in the head of each html file?

Audentia · 10-08-2009, 06:06 PM

Originally posted by Spix View Post

Thanks, but how do I apply this procedure to 40 documents at the same time? Do I have to enter the details in the head of each html file?

Build a template in Dreamweaver for your main structure that includes the tag for the stylesheets. Then apply to the forty pages.

or copy and paste it into all forty...

Spix · 10-08-2009, 06:10 PM

Thanks Audentia, can I build a template at this stage where all 40 pages are already designed? Or is it too late now?

CkretAjint · 10-08-2009, 06:27 PM

Its a little time consuming to do it right now, but in terms of updating the pages down the road it will make edits a LOT easier.

Spix · 10-08-2009, 06:38 PM

Thanks guys! Very helpful stuff.

digizan · 10-08-2009, 07:06 PM

Originally posted by Spix View Post

I have designed my site without css, now I like to change the background colour and font colour of all my pages.

Bear in mind that if you've used deprecated inline tags in your existing code, then those are going to override your new CSS styles, so you'll need to remove them in order for your CSS to work properly.

For example, the code below will override any styles that are in your external stylesheet:

HTML Code:

<p><font face="Verdana, Geneva, sans-serif">Duis aute irure dolor <strong><font color="#006666">quis nostrud</font></strong> exercitation sed do eiusmod tempor incididunt. <a href="#"><font color="#0000ff">Lorem ipsum dolor sit amet</font></a>, ut labore et dolore magna aliqua. In reprehenderit in voluptate ut enim ad minim veniam, <em>quis nostrud exercitation</em>.</font></p>

Digi

xc-runner · 10-08-2009, 07:31 PM

Can you do a find and replace, i do that all the time when coding...just gotta be careful, some programs do it and there's no going back once it's done.

Originally posted by Spix View Post

Thanks Audentia, can I build a template at this stage where all 40 pages are already designed? Or is it too late now?

Audentia · 10-08-2009, 08:35 PM

So long as the pages are built in a way that the navigation is broken out in the code and all its own... and then the "middle section" or bulk of the pages are their own stuff you can apply templates after they are built.
Make your template in dreamweaver make sure it's saved as a template in the root folder of your site.
Then one each page delete it's navigation and other stuff that is all the same...
then you go to Modify -> Templates -> Apply to Page
It will add the template and you just have to tell it which sections of the template to put the code that already exists.

I think I got that all explained okay... I just learned how to do this a few weeks back so forgive me if it's not perfect...
I had a good online tutorial... let me see if I can find it...

Audentia · 10-08-2009, 08:36 PM

Oh... I think this is the one I used... but there are lots if you google it...
http://www.entheosweb.com/website_de...r_template.asp

**Drazan** · 10-09-2009, 12:59 AM

search & replace.

Really, Dreamweaver is king. It can also search out and replace code in a folder of documents.

Trust me this works. I've retrofitted an archive site with over 18,000 pages in less than 20 hours.

You can also use this to search out line formatted code and replace with css code.

oh, and if you are not sure...just make a duplicate of the folder and work in that.

Jade

digizan · 10-09-2009, 01:24 AM

Originally posted by Drazan View Post

oh, and if you are not sure...just make a duplicate of the folder and work in that.

Seconded. *twitches; whimpers at the memory of what can happen when you don't make a backup copy before a doing global search & replace*

Digi

Attaching .css files to existing .html files

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment