Default program for CSS?

Question

0.00/5 (No votes)

See more:

I am trying to make my first web page.

I have the css file

body {
background-color: lightblue;
}

and the code

<!doctype html>
<html>
  <head>
    <title> My web Page </title>  
   
<link rel="stylesheet" type="text/css" href="leser/main.css">
  
  </head>

  <body>   
   <h1>  My webSite</h1>
   <ul> 
        <li>home </li>
        <li> <a href="page2.html"> page 2  </li>
        <li> <a href="page3.html"> page 3   </li>
   </ul>
   <h2> This is my homepage content</h2>
   </body>

</html>

The problem is that the css wont show. By accedent charged the default program for css programs into skype, but changed it back into notepad. I dont know which program it original was. Is it the code or the default program that is wrong?

What I have tried:

I have tried changing the default css opening program nto different types, and I tried making the css as a tage inside the index page, but that did not work.

I also tried this

<!doctype html>
<html>
  <head>
    <title> My web Page </title>  
   

<style>
body {
    background-color: red;
}

</style>
  </head>

  <body>   
   <h1>  My webSite</h1>
   <ul> 
        <li>home </li>
        <li> <a href="page2.html"> page 2  </li>
        <li> <a href="page3.html"> page 3   </li>
   </ul>
   <h2> This is my homepage content</h2>
   </body>

</html>

Posted 28-Nov-17 16:28pm

Member 13546856

Updated 28-Nov-17 18:21pm

v3

Add a Solution

Comments

Karthik_Mahalingam 29-Nov-17 0:49am

the above code works. what is the issue?

Member 13546856 29-Nov-17 1:08am

when I does it, it does not work.
The background is not red.
I beleve it has something to do with that I changed the default program to open css files, but I dont know.

Karthik_Mahalingam 29-Nov-17 1:17am

this is what i have tried

<!doctype html>
<html>
<head>
    <style>
        body {
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>  My webSite</h1>
    <ul>
        <li>home </li>
        <li> <a href="page2.html"> page 2  </li>
        <li> <a href="page3.html"> page 3   </li>
    </ul>
    <h2> This is my homepage content</h2>
</body>
</html>

enhzflep 29-Nov-17 1:25am

Is the CSS file in the right place? You need to put the main.html file somewhere. Inside *that same location* you need a folder called "leser". Inside this new folder you put your css file.
If you do this, load the page, then hit Ctrl-Shift-I (Chrome) you'll bring up the developer tools. You'll see immediately if the file is found but some other problem prevents visual changes being made, since there will be a "failed to load" type error for the CSS file.

Member 13546856 29-Nov-17 1:31am

The css is in the right file. I have a folder called "leser".
I load the page by pressing ctrl + o right?
Nothing happen when I press x + shift + l

What program should I mark as the one to read css files in?
when you right click a file and select "open as" and then mark "always use this program to open". I selected "Skype". Might this be the problem?

enhzflep 29-Nov-17 1:37am

I generally use F5 to reload the page. (Chrome user here)
The hotkey combo I mentioned (Ctrl-Shift-I) along with my browser vendor was a poor way of suggesting that you open your browser's "Developer Tools" console. If you open the dev-tools, you'll see more info on your problems.

Nah mate, not even close. What you've done is make it so that when you double-click a CSS file, Skype will try to open it. !oops! Common thing that people have here is either nothing - i.e no file association for css files or they associate them with a text-editor. This is nothing more than a convenience. It allows you to double-click to edit a file, rather than right-click and open-with or dragging it onto an open text editor window.

EDIT: Why would you "press x + shift + l" and expect anything to happen after reading my post? You need to press Ctrl+Shift+I (that's 3 keys all held down at the same time. One letter, an i and two modifier keys - Ctrl and Shift. :p

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Accepted Answer · 2017-11-28T18:10:00

Solution 1

Take a close look at your body tag in the HTML. You seem to have spelled it wrong.

Posted 28-Nov-17 18:10pm

Dave Kreskowiak

Comments

Member 13546856 29-Nov-17 0:19am

I changed it. That was not the solution

Dave Kreskowiak 29-Nov-17 8:02am

OK, if you're got your HTML file in a folder and then your CSS file in a subfolder of that folder, this should work, IF everything is spelled correctly.

You also don't need the <!doctype html> tags.

Dave Kreskowiak 29-Nov-17 8:05am

This is exactly what I did.

Create a folder on your Desktop, called "Test". Put this file in that folder and name this file "Test.html":

<html>
	<head>
		<title> My web Page </title>     
		<link rel="stylesheet" type="text/css" href="leser\main.css">
	</head>
 
<body>   
	<h1>My webSite</h1>
	<ul> 
		<li>home </li>
		<li><a href="page2.html">page 2</li>
		<li><a href="page3.html"> page 3</li>
	</ul>
	<h2>This is my homepage content</h2>
</body>
</html>

Create a subfolder called "leser" in the folder you created above. In this folder, create the following CSS file and call it "main.css":

body {
	background-color: lightblue;
}