why the html code doesnt linked with the css code? - html

here is the code I used for index.html
<!DOCTYPE html>
<html>
<head>
<title>Github Hub </title>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
<div><img src="C:\Users\Maryam\Pictures\Saved Pictures\github.logo.jpg" width="205" height="150" /></div>
<div>This is <i>site for Github</i> to search for interesting peojrcts.</div>
<nav>
<ul>
<li> Home </li>
<li> Contact </li>
<li> About </li>
</ul>
</nav>
</header>
<section id="main">
<p>We will show you a list of <b> Github projects</b><span> and the dates</span>, (click here for more information Gethub).</p>
<form action="http://wilder.azurewebsites.net/echo" method="post">
<label for="SearchPhrase">Search Phrase:</label>
<input name="SearchPhrase" id="Searchphrase" /> <br />
<input type="checkbox" name="UseStars" /> <label for="UseStars"> Use Stars?</label> <br />
<label for="LangChoice">Languages:</label><br />
<select name="langChoice" id="langChoice">
<option selected>All</option>
<option>JavaScript</option>
<option>Java</option>
<option>C#</option>
<option>Ruby</option>
</select>
<br />
<input type="submit" value="search" />
</form>
</section>
<footer>
© 2020 Mariam Shabou LLC
</footer>
here is the code I used for site.css
i linked HTML with CSS but the problem once i run the work doesn't appear in the web
/*site.css*/
header, footer {
background: lightgrey;
border: solid 1px black;
/**font-family: 'Times New Roman', sans-serif,**/
}
footer{
padding: 10px;
border-radius: 3px;
}
body{
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#main{
border: solid 1px #ccc;
border-radius: 5px;
margin: 20px 0;
padding: 5px;
}
#main > form > label
{
font-weight: bold;
}
here is what i got when i run the code of index.html and the problem is the code that i wrote in site.css is not linked to index.hmtl means the modyified in site.css doesnt exists.

Double check your relative path. On everything else, you're leading with a slash, which makes me think you probably need one before your CSS path, but without looking at your filesystem it's impossible to tell.

Judging by your screenshots this appears it might be a classic File Path error. It looks like your index.html is located in localhost/img/index.html
Where does your CSS live?
If it lives in localhost/img/css/style.css your code should work fine.
If it lives in localhost/css/style.css then you need to change the location of your CSS to the following;
<link rel="stylesheet" type="text/css" href="../css/site.css">
the ../ tells the href to go back a directory, then go in to CSS. Without the ../ you are telling it to look in the current directory, which by your screenshot it would be; localhost/img/css/style.css.
When using File Paths that way; you have to be mindful that it is RELATIVE to where the current document exists.
Take a read of these articles relating to File Paths;
https://www.w3schools.com/html/html_filepaths.asp
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
https://css-tricks.com/quick-reminder-about-file-paths/

It would be better if you share the folder structure of your current project.
However, there are few common mistakes seems obvious in your code such as loading something from absolute file directory (C:\) which makes me believe you are using static files only and is not recommended at all.
If these front-end code is part of a bigger project such as using c#, php etc., you could easily use base_url concept and load the files via the publicly accessible absolute url such as http://localhost/yourproject/site.css or http://yourdomain.com/css/site.css.
In any cases, like many of us trying to point to you that, it is about the relative path of the CSS file you have. That should fix your problem now and will guaranteed to work even if you move the server.

Related

Why won´t Atom read my first segment of CSS code but reads everything below it?

I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file

CSS file not loading in basic HTML

this is very basic code as I'm still a beginner, I'm having trouble getting it to load into Chrome via Brackets on OSX.
When I load the file locally it displays everything but the CSS is not loading, everything else is functioning properly.
My troubleshooting so far:
index.html and my tutoringservices.html are in the same directory as style.css.
I've saved and restarted my computer to make sure it wasn't a refresh issue
Cleared Chrome's cache to make sure the CSS was being loaded properly
I've copypasted CSS code from w3schools.com and other basic websites to make sure the basic code would function properly. I removed everything but the .button styling, as that's what I was originally trying to troubleshoot, not so much the font import.
I don't know how open Firefox thru Brackets so I have not loaded Firebug.
I have not yet linked the CSS to my index.html as in theory it should work on tutoringservices.html anyhow. Here's my code:
tutoringservices.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
</head>
<body>
<header>
Home
</header>
<main>
<h1>Get in Touch</h1>
<hr>
<p>
Thank you for your interest. Inquiries usually receive a response within 24 hours.
<br>If you do not receieve a timely response, please feel free to send another!</p>
<form class="contact-form" action="contactform.php" method="post">
<input type="text" name="name" placeholder="Full name">
<br><br>
<input type="text" name="mail" placeholder="Your E-Mail">
<br><br>
<input type="text" name="phone" placeholder="Phone Number (optional)">
<br><br>
<input type="text" name="subject" placeholder="Subject">
<br><br>
<textarea name="message" placeholder="Message"></textarea>
<br><br>
<button type="submit" name="submit">SEND</button>
</form>
</main>
</body>
</html>
style.css
#charset "UTF-8";
.paragraph {
font-size: 50px;
line-height: 62px;
font-family: 'Amatic SC', cursive;
}
font-family: 'Amatic SC', cursive;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Be happy to answer any additional questions, thanks for your time.
The .name in the css file indicates it is styling a class, but the classes are not used in the HTML file. So .button means it styles the button class instead of the button element.
Two options:
Style the element instead of the class by removing the dot
Add the class to the css file, for example on the button:
<button class="button" type="submit" name="submit">SEND</button>
Use classes in your HTML code. In your CSS you use, for example, .paragraph - so use it in HTML as well: <p class="paragraph">, and the same for button.
Second issue is a little bit more tricky to spot, but easier to fix. You have a wayward CSS declaration outside of any selector in your style.css file, on line 9. Simply remove it:
font-family: 'Amatic SC', cursive;
Do those two fixes and you will be golden.
Ok the problem as I see it (assuming the directory of css file is correct), is that your referring in your css code the classes ".paragraph" and ".button" which do not exist in your html code. When you refer in css to some part of html, you do it as follows:
for id ex:
html
<div id="my_id">
css
#my_id{}
- "." for class
html
`<div class="my_id">`
css
`.my_id{}`
- just the tag name for the tag itself
html
`<div>`
css
`div {}`
you must be careful when referring by tag names.
You man not need the ./ if it is in the same directory in the href="style.css". When it comes to the paragraph and button, your css is referring to them as classes by adding a "." before them. If you just want to call them by html tag
p {
// put style for all paragraph tags here
}
button {
// put styling for all buttons here
}

Why isn't the CSS file showing up?

I've double checked my syntax for linking the CSS file in the of my HTML file, and it all looks correct to me. And when I view the page source of my HTML page, it does indeed to be linking correctly to the CSS page. But none of the styling seems to be showing up. I'm fairly certain that the linking of the CSS file is fine, but I can't understand why none of the changes are appearing.
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<!--title to appear on the tab of the browser-->
<title>Midterm: Hangman</title>
<!--linking a CSS style sheet for the page-->
<link rel="stylesheet" type="type/css" href="hangman.css">
<!--running the hangman game-->
<script src="hangman.js"></script>
</head>
<!--run the main function from the javascript file when page is loaded-->
<body onload="javascript:hideWord()">
<!--adding a title that will appear on the webpage-->
<h1>Hangman</h1>
<!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
<input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />
<!--create a button to submit guessed letter and run the compareLetter function when clicked-->
<button type="button" onclick="javascript:compareLetter()">Guess!</button>
<button type="button" onclick="javascript:hideWord()">Restart</button>
<!--underscores to hide the word that the player is guessing-->
<div id="hiddenWord"></div>
<!--a counter to keep track of number of player attempts-->
<p id="counter"></p>
<!--add instructions for the player-->
<h2>Instructions</h2>
<p>Put some instructions here!</p>
</body>
</html>
CSS FILE:
body {
background: #2C2A30;
}
button[type=button] {
background: #D94C47;
font-family: Arial;
padding: 5px 5px;
font-size: 25px;
border-radius: 5px;
padding: 7px 12px;
border: 1px solid #D94C47;
color: white;
font-weight: bold;
}
button[type=button]:hover {
background: #FF7A61;
border: 1px solid #FF7A61;
color: #2C2A30;
}
SCREENSHOT OF CHROME DEVELOPER TOOL:
SCREENSHOT OF FOLDER STRUCTURE:
You should be using <link rel="stylesheet" href="hangman.css">.
You have a typo:
<link rel="stylesheet" type="type/css" href="hangman.css">
should be:
<link rel="stylesheet" type="text/css" href="hangman.css">
Note the type --> text.
Additionally, in HTML5 you don't need the type attribute at all, so you can just have:
<link rel="stylesheet" href="hangman.css">
If the CSS page is linking to the html page, and you're not seeing updates, it's possible that this is a cashing issue. In Google Chrome, right click on the page and click 'Inspect'. THEN, wiith the inspector open, navigate to the top of the page near the address bar and right click on the refresh icon. Then select 'Empty cache and Hard Reload'.

External CSS file won't work with one page in particular

I'm a beginner and I'm creating my first website, but I've stumbled with one page that will not recognize the CSS it's linked to.
I've linked each html page of the website to its own CSS style sheet and they all work, except for one. All the files are in the same root folder and if I check the 'Page Source' when opening my problematic page in a browser (FireFox) there are no errors showing up, so I'm really lost.
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>About X</title>
<LINK rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
<header>
<img src="images\logo.jpg" width="100" height="80" alt="logo">
<h1>Mister X</h1>
<nav>
<a href=///C:/Users/Soniaa/Desktop/web%20design/webpage.html>Pictures</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/News.html>News</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/About.html>About</a>
Shop
</nav>email#gmail.com</address>
</header>
<figure><img src="images/pic.jpg" width="300" height="300" alt="Portrait">
<figcaption>Short Bio... </figcaption>
</figure>
<h2>Education</h2>
<ul>
<li>this</li>
<li>that</li>
</ul>
<h2>Personal Exhibitions</h2>
<dl>
<dt>2010</dt>
<dd>...</dd>
<dt>2006</dt>
<dd>...<dd>
<dd>...</dd>
<h2>Group Exhibitions</h2>
<dl>
<dt>2008</dt>
<dd>...</dd>
<dd>...</dd>
<footer>© Mister x <br>
<IMG SRC="images/fb.png" width="30" height="30" ALT="Facebook">
<br>
Webdesign by me </footer>
</body>
</html>
The actual page has a lot of definition lists in it (no idea if that would have anything to do with it).
The same CSS works with my "Home" page, for example, which has the same header.
Maybe I'm missing something very obvious, but any help would appreciated!
EDIT: Thank you to everyone who took the time to answer!
Unfortunately I didn't find the problem but I think maybe I didn't give enough details so I'll rephrase and repost the question (I didn't want to delete this because someone else might find a helpful answer for themselves).
Hope that's okay...
Is your CSS in the same directory as your HTML file? If it's not you probably should do something like
<link rel="stylesheet" type="text/css" href="css/about.css">
Also make sure you did not make any typo's. If what you are describing is really true it should work.
Your markup is fine there seems to be no problem with it.The files are working perfectly on my computer.Try erasing the history of your browser and then reload it, or change the browser and see if it works.

Rules for <body> in external CSS not being applied

It seems that my external style sheet is not working for the body part. Here’s my code:
all.css:
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3 id="h3">
<a class="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div></a></br>
<a class="a" href="assign.php"><div class="div" style="left:210px"><center>Assign Employee</div></a></br>
<a class="a" href="accounts.php"><div class="div" style="left:400px"><center>Accounts</div></a>
</h3>
</div>
</body>
You have several flaws in your HTML code:
<style></style> - Empty style blocks, not really an issue
<center> tags don't seem to have a closing tag. This tag is deprecated, and you should consider using the CSS style text-align: center instead.
id="div" - Having multiple ID's with the same value is not recommended because it can have unexplained results. The purpose of these is make them unique.
</div> inside <a> tags - In HTML4, having block-level elements inside inline elements was not allowed. This has changed in HTML5, keep aware.
style="left:###px" - Having 'left' as a style property does nothing by itself. That element needs to have the associated position property set too, whether it's set to "relative", "absolute", "fixed", or even "static"
Fixing these issues are probably your top priority, because the structure of your page is messed up beyond repair that the browser doesn't render your (correct) CSS properly.
Also, make sure that your "texture1.jpg" is in the parent directory of all.css, which seems to be one directory above your home.php file. Try removing the "../", and you should be good if it's all in the same directory.
To be a little more elaborate, this is how your application sees your folder structure:
???
|--public_html <--- Root HTML directory
| |-- all.css <--- CSS File you provided
| |-- home.php <--- HTML file you provided
| |-- assign.php
| +-- accounts.php
+--picture1.jpg <--- Picture file? CSS/HTML file cannot access above public_html
If by your comment you say it's in the same as the HTML file, then inside all.css, change the line to just url('picture1.jpg').
As a rare favor, I'll see if I can fix everything from the information you've provided and all 3 files (CSS, HTML, JPG) are in the same directory. You don't seem to understand the concept of how classes and IDs work together.
home.php HTML (complete):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3>
<a class="active" href="home.php">Work Load</a><br />
Assign Employee<br />
Accounts
</h3>
</div>
</body>
</html>
all.css CSS (with added styles, some sample):
body {
background: url('texture1.jpg');
background-size: 600px 500px;
background-repeat: repeat;
}
#main {
background-color: lightpink;
}
.active {
color: green;
}
h3 {
text-align: center;
}
I've created a working JSFiddle with this info and I hope you can use it as a learning lesson to see how selectors work in CSS and how it correlates to your HTML structure.
just add
{}
before body, it worked for me
Change lke this
<head>
<style>
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
<!--html page-->
</style>
<link rel="stylesheet" type="text/css" href="all.css"><style>
</head>
<body>
<div id="main">
<h3 id="h3">
<a id="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div> </a></br>
<a id="a" href="assign.php"><div id="div" style="left:210px"><center>Assign Employee</div></a></br>
<a id="a" href="accounts.php"><div id="div" style="left:400px"><center>Accounts</div></a></h3>
</div>
</body>