using Textedit for css stylesheet

I am building a website with HTML and CSS using the Textedit. It appears that I cannot edit a css stylesheet in Textedit after the initial save. Is this true and how do I get around it? Making a new CSS stylesheet with every change is just not an option. Please help

mac pro, Mac OS X (10.6.1)

Posted on Nov 4, 2009 6:27 AM

Reply
18 replies

Nov 4, 2009 9:40 AM in response to Danoflorida

I can edit css files with TextEdit with no problems whatsoever. First off, you need to make sure your css files are plain text files. Also you need to make sure you have write permissions to the file in question. TextEdit has no "set criteria for a .css file"--I don't even know what that would mean. A css file is just a txt file with the .css extension instead of the .txt extension. There are dedicated css file programs: I use CSSEdit, and my css files are set to open in that as the default editor (it has lots of nice features for creating css files), but TextEdit opens the files without difficulty and edits them. As was already mentioned TextWrangler is another nice program for editing css files. It is free, you might try it, it will display the css files with various things in color, which can be useful.

I'm also not sure what this statement means: "It just won't apply changes when I make it a .css file." Just what is that "it" you refer to? Was the file an rtf document originally? And where are the css files you are attempting to edit? Do you have write permissions to the files and the folder they are in? You can check using GetInfo.
Francine

User uploaded file
Francine
Schwieder

Nov 17, 2009 8:03 AM in response to Royden Kading

Getting there slowly, but now have two different results, neither good.

First: Open browser which automatically opens my homepage. Follow the links to the pages for which I am trying to change the background color. All the graphics, links are there, but the test page I am using has not changed color.

Second: open browser, open the file I am testing by using dropdown menu File, open file. File opens with background color changed, however, all my graphics are gone, the links work, but only a small square where the graphic should show. The graphics are also gone on all the 65 pages on my site. The only page that remains ok is the index page.

What am I missing?

Nov 17, 2009 9:49 AM in response to Royden Kading

Here is my lists.css file: body {
background-color: #FFFF99 }

and here is what the html page is: <head><title>mypage</title>
<link rel="stylesheet" href="lists.css" type="text/css">
</head>

When I put the whole html <style> in the page as: <head><title>mypage</title>
<style type="text/css">
body {background-color: #99FF66;}
</style></head>
it works fine.

Think I have tried every combination imaginable and can't get it to work.

Nov 17, 2009 10:20 AM in response to Royden Kading

You can either have a style sheet as a separate file, or you can embed it in the html page. Either will work. If you use it as separate file, then the link in the html must point to the location of the css file. Thus, I have a structure like this:

pinkmutant (folder)
articles.html (file)
mainb.css (file)
articles (sub-folder)
snowleo1.html (file)

Both articles.html and snowleo1.html use the same mainb.css style sheet. But since they are located in different places, the link tag differs. For articles the link tag is

link rel="stylesheet" href="mainb.css"

But for snowleo1 the tag is

link rel="stylesheet" href="../mainb.css"

If you use style sheets in this way you have to add the link tag with the correct path to the style sheet for every single page. However, once you have done that you can change every page by just editing the style sheet. So initially you have to edit all html pages, a pain for a large site. But once you have done it, subsequent edits of style are simplified, as you only have to edit the one css file.
Francine

User uploaded file
Francine
Schwieder

Nov 17, 2009 1:00 PM in response to Royden Kading

Actually, the problem is the path. Your path is saying there is a sub-folder called "searchfiles" INSIDE the folder "files" and the css file is in there. What you want to go up out of the files folder into the seachfiles and consult the css file that is in the parent folder. To that you use the dots (as illustrated above in my example), so the link tag should read:

link rel="stylesheet" href="../lists.css"

This tells the browser "go one directory upwards and use the file lists.css"--I suspect you are confusing the syntaxes (if that is a word) of absolute and relative links, and how they work. You can see how things work on my page here:

http://www.pinkmutant.com/articles/snowleo1.html

Then select "View Source" from the View menu in Safari. The css file is actually here:

http://www.pinkmutant.com/mainb.css

And the image location is specified there, along with a bunch of other things, I could change the image used and formatting for all pages that use that style sheet by just editing the css file.

The only time I use type="text/css" is as a separate tag when I embed the css within the html page, and the W3C Validator doesn't seem to have a problem with that, and neither do any of the browsers I use.

If you want to validate your pages, take a look here:

http://validator.w3.org/#validateby_uri+withoptions

Sometimes the errors detected are useful for trouble-shooting your code.
Francine

User uploaded file
Francine
Schwieder

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

using Textedit for css stylesheet

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.