view css with html in safari before uploading to server

catkustes · 10-02-2012, 05:19 AM

Hi there,

I apologize that this may seem like a stupid question, but please keep in mind that I'm new to this. I'm writing my html code in text wranger and have started a separate css file that the html file will link to. I've been checking my html by dragging the file into safari to see what it looks like, and I can see the css styling when I directly place it in the header of the html, but not if I link to the css file. How can I check it along the way just like I do with the html file that way I know how it looks as I continue to learn and build the site?

Thanks!

Cat

fireplace_tea · 10-02-2012, 06:45 AM

This sounds like it might be how you are linking to your css file. Does your link tag look like the following?

Code:

<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="testing.css" />
</head>

If it does, then it might be a relative/absolute path issue. Could you post your coding?

catkustes · 10-03-2012, 04:10 AM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sincerely Curious</title>
<link rel="stylesheet" type="text/css" href="sincerelycurious.css" />
</head>
<body>
<header role="banner">
<h1>Sincerely Curious</h2>


<header>
<nav role="navigation">
<ul>
<article class="social header">
<h2><a href="http://www.facebook.com/cat.kustes">Facebook</a></h2><h2><a href="https://twitter.com/Catkustes">Twitter</a></h2>
<h2><a href="http://www.linkedin.com/pub/caitlin-kustes/3a/6b6/90b">Linked In</a></h2>
<h2><a href="http://sincerelycuriousblog.blogspot.com/">Blog</a></h2>
</ul>
</div>
</nav>

CSS text:
<style media="screen" type="text/css">
h2{
color: red;
font: 11
}

Sammy12 · 10-03-2012, 05:06 AM

As fireplace said it is probably a linking problem.

I've always had trouble understand the linking concept without an Apache server. For some reason I keep thinking you cannot use the relative path without localhost, but I just tested this on windows and you can. Are you running on localhost?

If the file is .php and you are not running with some kind of localhost bundle, it will not work as your computer does not have php installed (is that the reason lol?).

Try using the absolute path as I'm curious to whether this is the problem. If you are using notepad++ or pnotepad or some kind of smart notepad, right click the tab ("asdf.html" in my example) and select "copy file path" or "full file path" or something of the sort and use it in your link href instead.

Muahaha sunfighter, too slow

sunfighter · 10-03-2012, 05:09 AM

catkustes · 10-05-2012, 04:10 AM

hmm the relative path i used was:href="/Users/Catkustes/Desktop/sincerely curious html/sincerelycurious.css

the html is saved as a .html and the css file is saved as a .css

i'm not using apache and i don't have a local host set up. all i've been doing is writing the code in textwrangler and dragging/dropping into safari to see what it looks like. the html works but when i try and link to the the css it doesn't work. it works when i put the css directly into the html, although i'd rather keep it as a different file.

sunfighter · 10-05-2012, 03:07 PM

Check these editors out http://webdesign.about.com/od/macint...sh-editors.htm

I use an editor I bought but I still program css as part of the html instead of two files. I only separate them if it's a large project. The reason for one file. I don't have to save the file to see changes in html or css, but if the css was a seperate file I would have to save it before seeing changes to it. Save a Cntr-s. Yeah, totally lazy.

fireplace_tea · 10-06-2012, 05:49 AM

Hi catkustes,

Sorry for not attributing more to the conversation sooner. I took on a short migration project that lead to 13 hour days (like from 4pm - 5am)...it sucked

Silly question for you. Is your .css file and .html file save in the same folder? And are you sure you have spelled your .css file correctly in your <link> tag?

Also, I noticed in your .css coding that you listed in an early post, you are missing some coding with font, such as the ending semi-colon. Since font is a shorthand property that sets all the font properties in one declaration and you are only using it for font-size, I would just do this coding:

Code:

h2{
color: red;
font-size: 11px;
}

Also, in your css file do you have the coding <style media="screen" type="text/css"> as you show in your example above? Because, I"m pretty sure that shouldn't be in the .css file, which could also be causing you the issue. Here is your example coding from an earlier post:

Code:

CSS Code:
<style media="screen" type="text/css">
h2{
color: red;
font: 11
}

catkustes · 10-11-2012, 05:53 AM

yikes that sounds horrific!

I got lazy and decided to combine my html/css project into one. My pages on my site will all be unique besides for the header so i figured that shoullllddd be okay.

I did have the css and the html file in the same folder....not sure if that changes anything :/

I'm going to try with another project and take your advice and see if i just messed up something silly with it.