CSS file not loading in basic HTML - 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
}

Related

CSS is not being applied to the html

I have a form in HTML as follows:
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
And I have applied simple CSS to the textarea from an external file as follows:
textarea.input-width {
width:800px;
height:200px;
}
I have included the style sheet in the html as:
<link rel="stylesheet" type="text/css" href="styles.css"/>
still the width and height are not being applied to the HTML. I am not a front-end developer, so I am pretty dumb when it comes to HTML and CSS, so please any help is appreciated.
It seems to have an effect when I do that example in local files.
With CSS:
Without CSS:
So I think perhaps your code is fine, and it's just that your website is still cached by your browser. Try reloading with CtrlShiftR or if it works in a different browser.
(This answer should be comment, but I needed a code snippet)
Your CSS and HTML seem correct, if you run the code snippet below you'll see that the styling is actually being applied.
This lets me believe that your stylesheet is not being loaded properly. Can you verify in your devtools that the <link /> tag exists and the styles load properly? You can do this by right clicking on the textarea element and clicking inspect element. You should now see several columns or rows depending on your devtools window orientation which show the HTML and CSS for the selected element. Your CSS code should be visible over there.
textarea.input-width {
width:800px;
height:200px;
}
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>

why the html code doesnt linked with the css code?

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.

CSS Elements working on actual page but not pulling from stylesheet

I am having some issues with some css stylings on my site and hoping you guys can help.
Heres my code:
<style>
.loginform {
text-align: center;
width: 300px;
margin: 0 auto;
color: black;
}
.memberslogin {
color: #404040;
text-align: center;
margin-bottom: 25px;
}
.btn.btn-primary.loginbutton {
margin-bottom: 80px;
}
</style>
<body style="background: none;">
<?php include('header.php') ?>
<div class="container">
<h4 class="memberslogin">Members Login:</h4>
<form class="loginform" action="login_create.php" method="post">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" name="username" class="form-control" placeholder="Username..">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="Password..">
</div>
<input class=" btn btn-primary loginbutton" type="submit" name="submit" value="Login">
</form>
</div>
The styling works fine when styled within the page. However I have these exact same classes and styling within my style.css but when I remove the on page styling none of the effects take place.
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet">
<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="richmondcss.css">
As you can see I have linked my style sheet last which should override any bootstrap elements if I am not mistaken?
Any help is appreciated
Thanks
Try adding a class on the body tag which will represent your app.
e.g.
<body class="the-login-app">...
and then prefix all of your custom css with this class...
.the-login-app .btn.btn-primary.loginbutton{
margin-bottom: 80px;
}
This is called namespacing. It will not only work but help you with debugging as your project gets bigger. For example if you see an element in debugger hit by a class which starts with "the-login-app" you are confident that css code is yours :)
In the end, try to research and familiarize with the priority of the selectors... All things equal, in-file one will precede. If you want to override bootstrap you need to define more precise selector than bootstrap one, as explained above(which I don't recommend to start with)...
Try to learn bootstrap more. I am sure you will discover that you didn't need your intervention at all...

Manipulating HTML forms with CSS

I've been working on some forms, and I'm not sure how to customize them.
This solution seems to work, but in my case the properties are simply applied to the area around the form rather than the form itself.
CSS:
.Forms{
position:relative;
top:100px;
background-color:#666;
font-family:'Unica One';
font-weight:500;
}
HTML:
<form action="" method="post" class="Forms" id="Form1">
<input type="submit" value="Email Zoltan (Financial Manager, Director)" />
<input type="hidden" name="button_pressed" value="1" />
</form>
The CSS code sets properties on the form element. Apparently you want to apply some of them to the input button instead, so you need to break the rule into two rules:
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Unica+One'
rel='stylesheet'>
<style>
.Forms {
position: relative;
top: 100px;
}
.Forms input[type=submit] {
background-color: #666;
font-family: 'Unica One';
}
</style>
<form action="" method="post" class="Forms" id="Form1">
<input type="submit" value="Email Zoltan (Financial Manager, Director)" />
<input type="hidden" name="button_pressed" value="1" />
</form>
I presume Unica One is meant to refer to a Google font with that name. In that case, do not set font-weight, since that font exists as normal (400) typeface only. If you try to set the weight to 500, most browsers ignore it but some may apply algorithmic bolding, which produces questionable results.
Note that setting the background color changes the basic rendering too: the default button, usually with rounded corners in modern browsers, turns to a rectangular box with a bit odd border. You can change this by setting various border properties (including border-radius) on the input element. The point is that buttons have built-in rendering in browsers, but if you set certain crucial CSS properties, this rendering changes to something different, and you should consider setting different other properties as well, when relevant.
P.S. The button becomes almost illegible, due to insufficient color contrast mostly, and Unica One isn’t really suitable for use like this.
try this give css to the form input submit button as said by scott
form.Forms input[type="submit"]{
position:relative;
top:100px;
background-color:#666;
font-family:'Unica One';
font-weight:500;
}

Need assistance with external CSS reference

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.