How do you link Html and CSS in Coda 2?

Discussion in 'Web Design' started by mat.whlr, Jun 7, 2013.

to remove all ads.
  1. mat.whlr

    mat.whlr New Member

    Messages:
    5
    Hello,

    I have just downloaded Coda 2 for mac, but I am having some problems. When I open an html and enter the 'link' code to connect my html file to my CSS file nothing is happening. I preview my webpage, but the CSS code remains isolated and inactive.

    Could someone familiar with Coda walk me through the link method? How can I set up a session so that I can edit both a html and a CSS file together so that my manipulation of both affect my design?


    Thanks.
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Can't speak for Coda, but linking stylesheets shouldn't have anything to do with your editor:

    HTML:
    <link href="path/to/styles.css" />
    If you're using an older version of HTML/XHTML, you'll have to add the rel and type attributes, like so:

    HTML:
    <link rel="stylesheet" type="text/css" href="path/to/styles.css" />
    Maybe there's another issue. Care to post your code?
     
  3. mat.whlr

    mat.whlr New Member

    Messages:
    5
    I have been using the link codes you posted. I have actually tried both to no avail. I must not be opening my CSS file correctly. When I open a CSS it is with the 'spilt' function. Do I need to open the CSS so that it is blended with the HTML in the same frame and window?

    Code:

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

    This did not solve my problem.
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    It has nothing to do with how you open it in the editor. You can open it in any text editor and make it work. You put the CSS file in either the same folder, or a subfolder of the one the HTML is in, and put the code I posted inside the <head> tag of the HTML document. Then, change "path/to/styles.css" to the actual path to the CSS file. And the path will be relative. For instance, if you put the stylesheet in the same folder as the HTML and name it styles.css, the "path/to/styles.css" part will just be "styles.css". If the stylesheet is in a subfolder called, say, "css", the path would be "css/styles.css".

    Personally, I like to put the stylesheet, as well as all the other assets in subfolders. It helps keep things organized, but do what works for you.

    If you're still having trouble, post your HTML, and I'll help you from there.
     
  5. mat.whlr

    mat.whlr New Member

    Messages:
    5
    Here is basic code. What is up with it?Again, the html and css do not preview together. The two remain separated.


    Html:



    <!DOCTYPEhtml>

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


    <html>

    <body>



    <div>

    </div>




    </body>

    </html>

    CSS:


    div {


    width:100px;
    height:100px;
    color:green;

    }
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    1. your doctype should be <!DOCTYPE html>
    2. you need to include a <head> </head> in your document
    3. the link goes in the head
    4. both the <head> and its content go after the <html>
    5. your head will need some extra content at the very least a character encoding type
    <meta charset="UTF-8" >
    and a title
    <title> Page title goes here </title>

    eg.
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" >
    <title> Page title goes here </title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
    </head>
    <body>
    <div>
    </div>
    </body>
    </html>
    
     
    Last edited: Jun 12, 2013
  7. Frank

    Frank New Member

    Messages:
    117
    Web pages consist of HTML and CSS code (and some javascript), you will have figured that out by now. But Coda is just a text editor with which you can write that code. A rich text editor, but just a text editor.

    That means that you have to know how to write the code, contrary to so-called What You See Is What You Get (WYSIWYG) editors, which will do the coding for you, in the background.

    If you want manually write/code a web page, I would suggest to do a beginners course, such as at www.w3schools.com.
     
  8. mat.whlr

    mat.whlr New Member

    Messages:
    5
    I put something very basic in my last post because I only need to know how to view my css edits in conjunction with my html edits. So you are saying that in Coda I will never be able to preview my entire webpage, CSS included, before I have sent it into a web compiler or someplace other? I think I am making a very stupid beginners mistake in Coda. Where is the error in my link between my CSS and Html in my last post. This is all that I need to know.
     
  9. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Maybe you might want to re read my previous post if you want the solution!
    I spelt it out for you in black and white. Read it.
     
  10. mat.whlr

    mat.whlr New Member

    Messages:
    5
    Phreaddee, I overlooked your comment. I will check it out. Thanks a bunch.
     
  11. Aidan Chase

    Aidan Chase New Member

    Messages:
    1
    Hi guys! I know I'm late to this party (6 years late) but I'm having the same issue and was wondering if I could send my code along to someone for them to verify? I can't get my stylesheet to apply to my HTML.
     

Share This Page