HTML class refuses to look in CSS file - html

I am trying to use a class called "secondary" in my HTML file and set it's properties in my CSS file, but it seems like
HTML:
<!doctype html>
<html>
<head>
<title> My Webpage</title>
<link href="D:\Web_developing\css\styles.css" rel="stylesheet"/>
</head>
<body>
<h1>Main webpage</h1>
<ul>
<li>page 2</li>
</ul>
<p class="secondary">this is the main page of the website</p>
</body>
</html>
CSS:
body {
color: green;
background: black;
font-family: arial;
text: white:
}
.secondary {
background: green;
color: blue
}
I expected the paragraph given the class would have the properties set in the CSS file.
After some testing with the file path I have concluded that the problem seems to be with the class. Is there perhaps any wrong syntax?

The problem seems to be with your link to the CSS file. It's always better to use relative paths when linking asset files to your web page. Try this instead...
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
Learn more about file paths here - W3Schools

Your path does not appear to be correct for the CSS file, your code appears fine other than that.
Assuming you are inside the directory Web_developing change your CSS path to this:
<head>
<title> My Webpage</title>
<link href="css\styles.css" rel="stylesheet"/>
</head>
If your root directory has the directory Web_developing then change it to this:
<head>
<title> My Webpage</title>
<link href="Web_developing\css\styles.css" rel="stylesheet"/>
</head>

If it is taking only the <body> property, try the <div> block and set the class for div, not a paragraph like "<div class = " " ...>".
Otherwise, it will take "<body>" CSS properties.

Related

external CSS, test on local computer, css file not found

I just started to implement a website. I have no host yet. First I would like to try some things locally on my own laptop.
I would like to use external css.
A simple version of the index file to show the problem looks like:
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
The test.css looks like this:
<style>
h1 {
color: red;
}
</style>
The problem is that the html file does not find the css file (the header will be black instead of red) although they are located in the same directory. I tried some variants but it did not help.
If I add the same css code inline, then it works.
This should be very easy, but I fail to see why the html file does not find the external file.
I tried this on firefox and IE.
Hope somebody could help me.
you missed open html tag
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
remove style from your css file
h1 {
color: red;
}

How Do You Style Multiple Pages Individually With Css?

So I want to style my contact page which has its own file, so when you click on it, it brings you to a whole new page, I already got that I'm Just wondering how do I style that page Inside my style sheets without changing every other page?
i've tried
Inside Html
Inside Css
.stylec {
anything i put in here styles nothing because you cant set the body as a class
}
i havent found any youtube videos for this or anything on google other than
"Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using #import keyword."
I'm Just trying to style my contact page inside my style.css and not styling it inside its html
I just want it all to be inside my styles.css so its neat and clean!
thanks for your time!
You should make on stylesheet of CSS and give styles according to the class names.
example:-
.first_body
{
background-color: lightblue;
}
.second-body
{
background-color: cyan;
}
1st-Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>1st html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="first_body">
</body>
</html>
2nd Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2nd html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="second_body">
</body>
</html>
You have to assign classes and ids in the html. (You should use an id rather than a class to style the body of a document, since there will only be one per document.)
For instance in your contact.html (or whatever the contact page's file is called) change your body tag to:
<body id="contact-style">
Then in your css file you can assign special styling just for that page using...
body#contact-style {}
You can insert any styles between the curly brackets. To test this, try assigning a background color. If no other elements in your site have a background color, you will see this change right away.
body#contact-style {background-color: red;}
Okay! Your basic HTML document looks like this;
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p class="apple">This is an apple paragraph</p>
<div class="mango">This is a mango paragraph</div>
<h1 id="cat">This is a cat paragraph</h1>
<p class="dog">This is a dog paragraph</p>
</body>
</html>
Note:
Inside the <head> tag is where you import your style.css
Use this tag to import <link rel="stylesheet" href="style.css">
The "href" is used to specify the link of your css file
Example of css file:
body{
background-color: blue;
}
h1{
color: orange;
}
.apple{
color: green;
}
.mango{
color: yellow;
}
#cat{
color: beige;
}
#dog{
color: white;
}
Give the different pages an id attribute on the body tag
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
....
</body>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">
....
</body>
In the style sheet that you link to style.css you can define styles for all pages and redefine the styles you want different on the contact page
h1 {
font-family: serif;
color: blue;
}
#contact h1 {
font-family: sans-serif;
color: tomato;
}

does notepad++ have a way to connect a way to use an external style.css file.?

I'm new to coding and have only learned how to use HTML and CSS. If I use notepad++ how do I make an external stylesheet?
You can add CSS styles to an HTML document by using the <link> element. It's documentation is here.
Here is a simple example that assumes both files are in the same directory:
styles.css
.my-class {
background-color: red;
}
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<p class="my-class">The background of this paragraph will be red.</p>
</body>
</html>

The id and class attributes don't work

I'm trying to make a HTML-code but when I try to use 'div' with a class or id it won't do what's written in the class. Only when I write it between the tag (so the when I write width between the tag it works, but not if I wrote it in the class).
.header {
width: 100px;
height: 10px;
background: blue;
}
<!doctype html>
<html>
<head>
<link type="text/css" rel="OIM11 - CSS" href="OIM11 - CSS.css" />
<title></title>
</head>
<body style="background-color:#666666">
<div class="header"></div>
</body>
</html>
Any idea why this doesn't work?
When in doubt, open developer tools on literally any website and look at the way they include stylesheets. I don't know how you came up with that format. This is the proper way:
<link rel="stylesheet" type="text/css" href="path/to/main.css">
Also, avoid spaces when naming files. In your shoes, I would rename the current file to OIM11-CSS.css.

I can't use CSS code in HTML doc?

I am super new to HTML and CSS and I ran into a problem when I try to link CSS code in HTML. The code doesn't show the background color like it should. HTML Code:
<!doctype html>
<html>
<body>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<body>
</html>
CSS code:
body {
background: #999;
}
I have them both in the same folder. I am lost and confused so any help would be greatly appreciated!
CSS files should be included in the head section. If you have them in the same folder you need to change the href aswell.
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<body>
</html>
You have to use href="main.css"
By using styles/ the browser searches for a folder called styles in the same folders and can't find it so no CSS will be applied
Try adding the link element to head tag instead of body tag.