External style sheet in CoffeeCup...

User 2664381 Photo


Registered User
6 posts

Thanks for bearing with me Eric. How do I give the link? I am so far just messing about in CoffeeCup HTML Editor. However, I gave the full contents of 'trialstyles.css' above and this is the full contents of my html page 'Untitled1.html' when reduced to a minimum and still showing my problem

<html>
<head>
<link rel="stylesheet" href="stylesheets/trialstyles.css" type="text/css">
<!-- To test putting the css commands in header instead: uncomment -->
<!--
<style>
body { background-color:#0FFFFF; }
p {margin-left:20px; color:#009933;}
</style>
-->
</head>
<body>
<p> some text here </p>
</body>
</html>

Does that give you enough to work on?
User 187934 Photo


Senior Advisor
20,271 posts

Try this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Mon, 24 Mar 2014 01:08:40 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheets/trialstyles.css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p> some text here </p>
</body>
</html>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2664381 Photo


Registered User
6 posts

Thanks Eric. Sadly, it did not make a difference, however I have clue now. I can get a change in trialstyles.css to show in the F12 view pane by doing this:

1. Edit trialstyles.css
2. Edit Untitled1.html in any non-consequental way, eg add a space in a comment line
3. Do File>Exit
4. In the pop-up box that appears: "Would you like to save the changes to the following file?" with the next line in box " ...... trialstyles.css" click on button "Yes"
5. Change in 1. is shown.
6. Another pop-up box is shown "Would you like to save the changes to the following file?" and next line in box " ...... Untitled1.html", here click button "Cancel"

The point of step 2. and 6. is only to keep the editor open so that the behaviour can be seen. Does this help?
Cheers Ed
User 1948478 Photo


Senior Advisor
1,850 posts

Hi Ed,

I think it my be clear now what was wrong/misunderstood from the beginning! The preview will pick up the saved version of your css file, i.e. not whatever unsaved version you happen to have displayed on the screen in the Editor. Any unsaved changes in the css file will therefore not show up in the preview.

You definitely do not have to go through all those 6 steps you describe in your post. :P
All you have to do is save the css file (File > Save) before you preview! ;)
Any unsaved file will have an asterisk before the name on the display tab in the Editor. The keyboard shortcut for File > Save is Ctrl+S, which I often find quicker.
User 187934 Photo


Senior Advisor
20,271 posts

You can do the split screen preview of your page then make changes to the css and it instantly shows in the preview without saving.
1.Open your html page
2. Open your css page
3. Hit f12 with css page in view
The screen will split showing the html page in the split panel and you will be able to make changes to the css and see them as you work.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1948478 Photo


Senior Advisor
1,850 posts

I was thinking mainly about browser previews, where the css file does need to saved first...
User 187934 Photo


Senior Advisor
20,271 posts

Yes saving always seems to be required for browser window previews. I wish it worked the same.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2664381 Photo


Registered User
6 posts

EXCELLENT. Thanks all, I now understand. Cheers, Ed

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.