How do I link a CSS to a HTML properly?

Im currently trying to link my style.css document but it doesn’t appear to work when I try and I have looked over at other tutorials, and every attempt I tried was met with failure. And yes, I put my .css file in my web directory. I’m just really stumped at how to do this. (i’m still new at programing)

HTML:

<title>KitKart!</title>    
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
<h1>The offical KitKart webpage</h1>
<h3>Explore</h3>    

    <ul>
<li>home</li>
<li>links</li>
<li>misc</li>
<li>about</li>    
    </ul>

    
<h2>Home page</h2>
<h3>Hello, I am KitKart</h3>    
<img src="img/KitKartlogo.jpeg" alt="KitKartlogo">
</body>

CSS:
body {
background-color: #dce5e5;
}

1 Like

Dumb question… Do you have a complete HTML document, meaning doctype, html element, head element, in addition to what we see above?

Assuming you do, your link element looks correct so the only question that comes to mind is, where is the style.css file relative to the index.html file? Are they both in the same directory?

1 Like

I didn’t select the entire html file whoops. No worries its there.

They are both in the same directory, or at least I think.

For clarity, rename your html file to index.html.

That is the name used on files that act as the home page of a directory. Consider a live site URL…

https://www.example.com/index.html

The reason we can access this page with only the domain is because the server looks for index.html.

https://www.example.com/

is effectively the same URL.

1 Like

Wait so how does index.html have to do anything with .css, and im not quite necessarily looking to create a domain yet. And what do you mean by style.css file relative to the index.html file, or do you just mean that are they in the same directory?

The whole talk about index.html being a thing is because it is a thing. Even in your project folders, practice using that name if it is the home page of the project. Give the proper name to the folder.

widget/
+ css/
+ js/
+ images/
- index.html

Now the name is the URL.

https://www.example.com/widget/

and index.html will be sent back to the client.

+ means folder, - means file.

If the concerns are to be separate, then it makes sense to have them in their own folders. Style concerns (skin, position, &c.) go in the css folder. Script concerns (DOM, interaction, AJAX, &c.) go in the js folder. Media will go into its foray of folders.

Set up your local projects like this and it is easy to upload whole directories to a host server. The only difference might be how absolute the paths are on the server based pages. I typically write URLs as / to mean site root, so, /css/ means the css folder on the site root.

We are not doing this on our computer since our files are generally in a user account documents folder. / in that environment means, C:\, namely the root of the local volume.

Within a folder we can use relative paths.

css/style.css

js/script.js

images/pic.png

all those URLs will work on your computer AND on the server.

2 Likes

Do you mean this:

1 Like

Yes. Create a template of that folder with a basic HTML page and basic stylesheet in the css folder and you can start new projects on a dime. Copy the folder, paste it with a new name, and you have self-contained site folder.

Eventually you will have site, and that will change a lot of things. This general structure of our developmental behavior and thinkig will gel and become one’s own way to compartmentalize projects in one’s own mind so they don’t collide with one another. This is no easy task. Your training starts in how you manage your projects. Simple, practical, portable, re-usable. That is my bottom line on core resources.

1 Like

Finally, only a day after I started to learn how to do html, it worked. Now I just gotta properly divide my site up, and make the home, and about links. But that’s for tomorrow.

3 Likes