Learning How to Post HTML/CSS Files Here Properly

HTML & CSS
1

Index.html (355 Bytes)

main.css (79 Bytes)

Is this correct?

2

Could you just paste the code within the reply box, and format it as code? Easier / safer for us, rather than downloading files.

3

OK, my actual question is going back to 1 of my very first…

Why does the browser only render/show my .css code in black, until I make a change in the HTML file, then do a refresh? For instance, in this one, I had the 1st <p> stmt with a space between the last “>” and “I am blue” BEFORE I created the .css file. Then, when I finished the .css file, I tried to Run the code, and all I saw was the code for the .css file displayed as you would see it in the Editor. So, I made the change to the “I am blue” stmt that you see below, and left the others as is, and that was the only way I could make it Run correctly. Does that make sense?

Thanks again for your patience.
UB

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF=8/>
            <title>Tutorial 22 - ID's</title>
            <link rel="stylesheet" href="main.css"/>
        </head>
            <body>
                <p ID="blue">I am blue.</p>
                <p ID="red"> Oh Boy! I wish I were red. </p>
                <p ID="green"> If it's green, it won't be mean. </p>
                            
            </body>
    </html>"

    #blue{
        color:blue;
    }
    
    #red{
        color:red;
    }
    
    #green{
        color:green;
    }
5

That happens to me quite a lot. It’s because I’m still viewing the CSS file in the editor when I hit the “View in browser” button, rather than remembering to swap to the HTML file first.

6

Great! So, I wasn’t crazy. Hope I can remember to do that.

Thanks,
UB

7

If you would be kind enough to re-read the posting guidelines and note that a “working page” is one of the choices recommended (whereas individual files is not), and if you would consider posting your code in the following “working page” format, it would be helpful. Why? Because a “working page” is necessary to demonstrate the behavior of code. If posted in separate pieces, it may be necessary to assemble a “working page” anyway. Anything you can do to help us help you is appreciated .

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Tutorial 22 - ID's</title>
    <style type="text/css">

#blue {
    color:blue;
}

#red {
    color:red;
}

#green {
    color:green;
}

    </style>
</head>
<body>

<p id="blue">I am blue.</p>
<p id="red"> Oh Boy! I wish I were red. </p>
<p id="green"> If it's green, it won't be mean. </p>

</body>
</html>
8

Ronpat,

I completely understand your point, however, my question in reply is if I do post them in an all-in-1 format, then how do I know which file is causing problems if I don’t separate them. I’m not saying there isn’t an answer, I’m just trying to understand your logic.

Thanks again for your patience.
UB

9

I’m sorry, but I don’t quite understand the question. How could one not know which file causes a problem? If modifying the HTML fixes a problem, then the cause would be the HTML… if modifying the CSS styling fixes the problem, then the cause would be the CSS. They work together, so the solution to a particular problem may involve changes to both.

I think your question will answer itself as you gain experience. On the other hand, you may be thinking of a more complex situation that I am.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.