Html and css doesnt work - html

My css doesnt work (html and css file are in the same folder) and i tried to give all the path ton href ,here is my files.First file is menu2.html and second is menu2style.css.Can anyone help?
html:
<head>
<title>
test menu
</title>
<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
</head>
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>
and css:
nav{ background-color:#99FF66;}

<style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>
The style element is for inline style. Don't put HTML to load an external stylesheet in it. Remove <style> and </style>
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
HTML start tags require a type before you put any attributes. In this case you need a link element.
<link rel...
The URL to your CSS should be:
To your CSS, not to an HTML document.
Either relative to the root of your website (e.g. /css/styles.css) or relative to the current document (styles.css since you say they are in the same folder). Not the full path on your local filesystem.
You don't need a type attribute here either.
Thus:
<link rel="stylesheet" href="styles.css">

If you include an external stylesheet, you must not wrap the element in style tags.
<!-- styles in menu2style.css -->
<link rel="stylesheet" type="text/css" href="menu2style.css">
<!-- inline styles -->
<style>
nav { background-color:#99FF66;}
</style>
Make sure you have the correct path specified in the href attribute!

You can write your style in the head, by using style tag.
if you want to external css you should use only link tag. you go to wrong way, because you are write the link tag in style tag.
<link rel="stylesheet" type="text/css" href="Your_directory/menu2style.css">
you write the wrong extension of style css style.It should be the dot css(.css)

Hmm.. I think you need to see the basics of HTML/CSS...
Here's an example of full html document :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/your/file/styles.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
You can see more examples here :
W3Schools

you have no need to write style tag
and you missing the link rel for add css style sheet
test menu
<***link*** rel="stylesheet" href="var/www/html/css_tests/menu2style.html" type="text/css">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>

test menu
<rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
<body>
<nav>
PHOTO 1
PHOTO 2
PHOTO 3
PHOTO 4
PHOTO 5
</nav>
</body>

test menu
<link rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.css">
<body>
<nav>
<img src="">PHOTO 1</A>
<img src="">PHOTO 2</A>
<img src="">PHOTO 3</A>
<img src="">PHOTO 4</A>
<img src="">PHOTO 5</A>
</nav>
</body>

The problem is with your link where you have given the path of your CSS file. It becomes difficult for the browser to understand what kind of path he has to point in order to get the relevant styles.
What I have done is I have created a separate file named menu2style.css and I have refered in my HTML page. This is a kind of using stylesheet, and it is called External Style.
Step 1: Create a file with named menu2style.css (css is the extension of stylesheet just in case if you are not aware of)
<style>
nav{
background-color:#99FF66;
}
</style>
Step 2: Refer the path of the CSS stylesheet that you just created in step1.
<link rel="stylesheet" type="text/css" href="C:/MyFolder/menu2style.css">
If you see above in the path I have given absolute path. This points the exact location in your file/ folder and renders the stylesheet from it onto a webpage.
Hope this helps.

Related

How do I link to another html with a different style? Is it possible to do?

I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.

Css in a separate file doesn't apply to index.html

I am new to html and I tried to create my webpage with the html as follows
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1> My web page </h1>
</body>
</html>
And the following css
h1{
color: red;
}
I tried adding a class to the h1 and styling it that way but in vain. If i do the css in style tags inside my html file it works but i want to have it in a main.css file
I want the h1 to have the color red, also I would want the css in a separate file, no the same one as my html so that it will be clean
If I am not mistaken you did not link your css file to the index.html, try something like this
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<link rel="stylesheet" type="text/css" href="./main.css">.
</head>
<body>
<h1> My web page </h1>
</body>
</html>
But try to replace ./main.css with the actual path of your main.css reffer to this for more info.
In the head section you have to link the html file to your css file.
Place the following code within <head> tags:
<link rel="stylesheet" href="[the path to your CSS file]">
It is usually this tag
<link rel="stylesheet" href="yourfilename.css">
But I think the problem you might be facing is the path of your css. Where is your css file located if it is inside a folder like a style folder then you would do something like this.
<link rel="stylesheet" href="style/yourfilename.css">
You need to import the css in the HTML file

Not sure why CSS is not being read

So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ETB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ">
<a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
<ul id="navigation" class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:
html
{
background-color: black;
}
See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.
There are two options here:
When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
Bootstrap.min.css is overriding your css styles (see answer by alex-bell)
Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.
Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.
Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.
Using Chrome as an example hit f12 to bring up the developer tools
Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css
Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.
Finally, and unrelated to the Dev Tools, learn about CSS Specificity
I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:
<style>
body {
background-color:black;
}
</style>
I assume you do, but just incase you do not know each html document can contain multiple <style> tags.

Linking CSS with HTML ..something simple

I'm using a Mac and using textedit to create a website the old fashion way. I have a HTML file and a CSS file. I cannot link the CSS with the HTML. Here is the code for my files:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“style.css” type="text/css" media="screen">
<title>William’s Physics Webpage</title>
</head>
<body>
<div class = “nav”>
<div class = “container”>
<ul>
<li> About Me </li>
<li> Why Physics? </li>
<li> Great Thinkers </li>
<li> Guest Page </li>
</ul>
</div>
</div>
</body>
</html>
Here is my CSS code:
body {
background-color:blue;
}
.nav ul {
display:inline;
}
As you can see, the back ground is supposed to be blue due to the CSS code, but it's not. The file name for my html file is main.html while the name of my css file is style.css
use proper " for style linking they are wrong "
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
If both of the files are in the same file directory, your code should work, unless you are trying to run it online.
Make sure to put the correct path to the file.
Look like media="screen" gives me some error, try media="print" or not use media at all like this:
<link rel="stylesheet" href="style.css" type="text/css">
Or the problem is that you used “ instead of " because you copied from somewhere and it pasted wrong. Try it out.
Please check the file path .. If your html and css file reside at same level means it should work fine.. or else if you have placed the css file inside css folder or some folder means.. your code would be like this
<head>
<link rel="stylesheet" href="flodername/style.css" type="text/css" media="screen">
</head>

Syncing html with css first time

Im just learning how to do this and im struggling with something that is very simple. I started building a website and I want to sync my CSS with my HTML. On my computer I started a file in my documents called 'development' and inside that folder another folder called 'practise' and inside that folder is my index.html, css folder (with my main.css file) and then my img folder. Here is my HTML code so far. Can anyone out there let me know why the css and html aren't reading one another?
p.s.- Ive tried
and
HTML :
<!DOC TYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Boast | Blah Blah </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<header>
<h1> Ashcroft & Rowe </h1>
<h5> Blah Blah </h5>
<nav>
<h3>Ad<h3>
<h3Br<h3>
<h5>St<h5>
<h5>De<h5>
<h5>Com<h5>
</nav>
</header>
<body>
<section>
</body>
</html>
Thanks :)
Your CSS link is pointing at "theme.css". If your css file is called main.css and is in a folder try changing it to href="foldername/main.css"
You need to reference the full path from where your html file is.
If your html file is practice folder and the css file is in the css folder within the practice folder your link tag should look like this:
<link rel="stylesheet" type="text/css" href="css/theme.css">
Sounds like your folder structure looks like this:
development/
practise/
index.html
css/
main.css
so, two problems:
Your HTML refers to theme.css, not main.css
the theme.css is in a subfolder, but you refer to it without a folder prefix, so the HTML thinks it's next to the HTML.
Change
<link rel="stylesheet" type="text/css" href="theme.css">
to
<link rel="stylesheet" type="text/css" href="css/main.css">
And, while you're at it, put the <header> element inside the body element as #Serlite noted.