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'.
Related
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.
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
}
I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>
So I'm trying to use Bootstrap to make a site, and I saw that there was a capability to make a dropdown menu, which I was planning on doing anyways, so I jumped on it.
I haven't been able to get it to work at all. I've searched around, re-arranged my jQuery link to be before Bootstrap's, double and triple checked that my code had the same base as w3schools' example, but I haven't gotten any action to come out of clicking the button. I even got to the point where I commented out my code and replaced it with their example, but even that didn't work.
In my css file (and I'll include a copy below), I have overridden the background and border properties of all div objects to none, or with a set border of "1px solid black" so I can see the bodies and where they're landing. I also overrode the top and bottom margins of the row class, since I was trying to have items bordered up against each other. I have deleted that part of the css file and reloaded the page to see if that was the issue, but it didn't change the issue.
Stripping my entire css file (and an empty script file I'm writing later) out doesn't fix the issue.
Stripping the extra bootstrap link that allows me to make all columns on the same row the same height doesn't work.
Stripping the integrity and crossorigin out of the main link doesn't work (I found the link like that, I figured I'd leave it at the maker's recommendation).
Stripping all three out at the same time doesn't work. And that's stripping it out with the example from w3schools, even. I got suspicious of a bad link, and used the CDN that w3schools suggested for 'minified css'. No improvement.
So I'm a little at wit's end and fairly out of my depth. I'm going to put up just the necessary html code (I've commented everything else out by now trying to test the thing anyways), and I'm going to include my css code for the title bar that it's in just for completeness, although, again, I did tear the whole file from the html document at some point. So I'd be very surprised if the issue was even css related outside of the CDN link.
html code (my dropdown menu code is commented out, the active code is from w3school's example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do Weekly List</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
<link href="format.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
</head>
<body>
<!-- <div class="dropdown" id="option-div">
<button id="option-btn" class="btn btn-primary dropdown-toggle" type="button"></button>
<ul class="dropdown-menu">
<li id="pswd-change"><p>Change your password</p></li>
<li id="end-user"><p>Delete your account</p></li>
<li class="divider"></li>
<li id="help"><p>Help</p></li>
</ul>
</div> -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</body>
</html>
css code:
/*all div's, negating some of bootstrap's formatting*/
div {
position: relative;
background: none !important;
border: 1px solid black !important;
}
/*bootstrap's row class*/
.row{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*the button is within this title bar*/
#title-bar{
background: #b3ffb3 !important;
border: 2px solid grey !important;
}
/*This is the direct css for the button that's commented out*/
button#option-btn{
background: url(https://cdn1.iconfinder.com/data/icons/seo-13/512/settings-128.png);
height: 3rem;
width: 3rem;
background-size: 100%;
position: absolute;
bottom: 1rem;
left: 2rem;
}
/*the div item that held my button (commented out) and had class="dropdown"*/
#option-div{
height: 6rem !important;
width: 6rem !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
}
/*just for the header in the title bar
#header{
font-size: 4rem;
padding: .50rem;
}
If anyone can see what's going on here, I'd really appreciate it. I'm hoping I've just been looking at this for far too long, and I'm missing something really small.
Alright. As luck would have it, I found the problem right after I posted this.
I hadn't seen anywhere that I needed both the css and the javascript links. Or at least, having just the css link didn't help inside the html code, only when I also added the javascript code link was I able to make the dropdown menus work from my previous code and from w3school.
Call me green, but this is the first time I've encountered Bootstrap.
I am trying to learn how to use Cascadding Style Sheets. I have a little test html page as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<INPUT TYPE=text NAME="userID" id="userID" Size=20 >
</body>
And the external css file looks like this:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
This all works fine. But when I look at style sheets created by other members of my team, they have style tags bracketing the content. So it makes me think that the CSS file really should look like this:
<style type="text/css">
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
</style>
However, when I put the style tag in disables the CSS. What am I doing wrong?
Thank you for your help.
Ellliott
The <style> HTML tag is for when your CSS is in your HTML file.
If it's an external CSS file, you do not use them, as it's not an HTML file.
The <style> tag is an HTML tag that you can use to include CSS directly in the page. An external CSS file should just contain the CSS declarations, and not be wrapped in HTML.
For example (taking your HTML):
<html>
<head>
<style type="text/css"> <!-- style is an HTML element -->
body { background-color: gray; }
</style>
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<INPUT TYPE=text NAME="userID" id="userID" Size=20 >
</body>
According to the HTML spec, your method is best:
To specify style information for more than one element, authors should
use the STYLE element. For optimal flexibility, authors should define
styles in external style sheets.