I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.
Related
Currently having an issue using a .css file in combination with an html script. Currently my index.html looks like the following:
<!DOCTYPE html>
<html>
<head>
<title>Bellamy Terminal</title>
<link rel = "stylesheet" type = "text/css" href = "../CSS/style.css">
</head>
<body class="css-theme">
<h1><strong>Bellamy Terminal</strong></h1>
</body>
</html>
To follow that up, in another directory/folder I have labeled CSS the following css script follows:
/* Theme of Site */
.css-theme {
color: lime;
background-color: black;
font-family: Lucida Sans Typewriter;
}
/* Theme of Site End */
h1 {
text-align: center;
}
The main issue is that my h1 element will not center which is a "wonderful" start for the beginning of my site lol. Would appreciate some help! Im using firefox
There is no float: center; - use text-align: center instead. And use h1 in the selector, not .h1 - that's not a class. So your complete rule is:
h1 {
text-align: center;
}
And another note: You don't have a class called css-theme anywhere in your HTML code, so you can't expect that rule to be applied anywhere.
ADDITIONS:
1.) There might additionally be a filepath issue (in the link to the stylesheet), but without knowing your file structure it's impossible to give you exact instructions for that. You might try href = ../CSS/style.css (note the two dots before the first slash), but that's just a guess.
2.) Your <style> and <title> tags should be wrapped in a <head> tag (which usually contains more than that), and the <link> tag should not be inside a <style> tag to make that valid HTML code.
First, the doctype should have the bang (!) before the word doctype.
Next, the link element does belong in the head, but not inside of style.
Also, while it's ok to add class to the body element, you can achieve the same result by setting up a CSS selector for body and eliminate the class from the HTML, which is generally preferred so that the HTML is less cluttered.
Additionally, strong is meant to convey importance semantically and usually causes the element it's used with to appear bolded. If all you are after is the bolding, strong isn't needed here because all heading elements will be bolded by default.
And, if you preface a relative URL with /, it will always look for the that resource at the root of your site, which may or may not be what you want. If the CSS folder is a child of the current page, don't preface the URL with /, just say the name of your folder as in: CSS/style.css.
/* Theme of Site */
/* If you make a tag selector, you don't have to add a class to the element */
body {
color: lime;
background-color: black;
font-family: Lucida Sans Typewriter;
}
/* Theme of Site End */
h1 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Bellamy Terminal</title>
<link rel = "stylesheet" type = "text/css" href = "/CSS/style.css">
</head>
<body>
<h1>Bellamy Terminal</h1>
</body>
</html>
I'm very new to HTML, CSS, and JS.
I've just watched a youtube lecture for making the "Rock Paper Scissors" game website.
At the very early stage, I'm stuck when I make a CSS file.
Like this.
#import url('https://fonts.googleapis.com/css2?family=Asap:wght#600&display=swap');
*{
margin: 0;
padding : 0;
box-sizing: border-box;
}
header{
background : white;
padding: 20px;
}
header > h1{
color : #25272E;
text-align: center;
font-family: Asap, sans-serif;
}
body{
background-color: #25272E;
}
.score-board{
margin : 20px auto;
border : 3px solid white;
border-radius: 4px;
width : 200px;
text-align: center;
color : white;
font-size: 40px;
padding : 15px 20px; /*top-bottom left-right */
font-family: Asap, sans-serif;
position : relative;
}
.badge{
background : #E2584D;
color: white;
font-size: 14px;
padding : 2px 10px;
font-family: Asap, sans-serif;
}
#user-label{
position : absolute;
top: 0px;
left : 0px;
}
And in my HTML file, I just add it to the header.
Like the way, I've learned.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Sissors Game</title>
<link rel="stylesheet" type="text/css" href="css/page_styles.css">
</head>
<body>
<header>
<h1>Rock Paper Sissors</h1>
</header>
<div class="score-board">
<div id = "user-label" class="badge">user</div>
<div id = "computer-label"class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Paper covers Rock. You Win!</p>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="images/hand_rock.png" alt="">
</div>
<div class="choice" id="p">
<img src="images/hand_paper.png" alt="">
</div>
<div class="choice" id="s">
<img src="images/hand_sissors.png" alt="">
</div>
</div>
<p id="action-message">Make your move</p>
</body>
</html>
I've double-checked the file's location and there is no problem at all.
But whenever I launched the HTML file, my page style doesn't change at all.
For the first time, I checked the sources of HTML through the inspecting function in Chrome.
It was like this.
But as soon I reload my page the CSS source file changed to like this.
I really don't know why my CSS file not working in Chrome browser.
Coz in Microsoft's Edge the problem doesn't appear.
My Html CSS image :
My chrome screen :
When I push F4(Reload Page) :
It seems like my CSS file has gone.
Ok first your CSS file is fine and it is not gone at all. To find the CSS file and check it out go to your editor and navigate to the CSS link:
<link rel="stylesheet" href="assets/css/style.css">
hover over the href and alt + click you will find your file, another way to locate your CSS file in the editor and reveal in Explorer.
If you were able to find your CSS file make sure you are adding the accurate path in your link tag.
In case you still can't find the file please use the search in your PC it will show up for sure.
Also based on the images you posted every single change you were making is only restricted to the copy on the browser. Since you were using the page option as I have seen from the images you showed us, try to use a hard reload by clicking ctrl + shift + R maybe that will solve the Chinese letters thing. or close the page and try to reopen it after the hard reload.
Also if you added body { background-color-:red; } at the top of your page it will be overridden by your CSS code Since order matters.
body {
background-color: #25272E;
}
another thing since you are using the developer tools to make changes to your files, here is a tip for you do please use this feature to make the changes apply to your local copy too.
1- navigate to Sources > overrides > selete folder to override (your project folder)
2- make sure the local override is checked.
3- choose the file you want to edit after that save your changes and reload the changes will happen and your local copy has been changed as well.
I'm not sure if this what you are trying to say. But anyway I hope this was helpful.
So I am having an issue with setting up my styles.css file and attaching it to my index.html file.
For some reason the body in the css file is overriding the h1 css.
Here's the code, and sorry if there's any glaring mistakes. I am brand new to this stuff.
h1 {
font-style: Georgia;
font-size: 48px;
color: red:
}
body {
font-style: Georgia;
font-size: 14px;
}
and my html index
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<head>
<title>rdhamill's personal github page. </title>
</head>
<h1> Github.io page for Rdhamill </h1>
<body>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
Edit: thanks for the help and sorry for the obvious issues!
Firstly, your h1 tag is outside the body, put that inside.
And in addition to that put the link tag inside the head tag.
And in addition to that remove : from the end of the color attribute in h1 style.
All your elements need to be inside the head or body tags. See the snippet below to see where your elements belong. The text inside the p tag is just to clean it up a bit.
edit: as per Dude Coder's above comment, fixed the CSS declaration. Make sure they always end in semi-colons, instead of colons.
Also changed font-style to font-family, which only needs to be set on the body (in this case, as all descendants will inherit it until it's changed elsewhere).
h1 {
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
<p>This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.</p>
</body>
</html>
Your HTML is too complex for an old browser to understand and render correctly. <h1> should be placed inside <body>. <link> should be placed inside <head>. Your CSS also has a typographical error. Either drop the final colon in color: red or type a semicolon; a colon won't work.
Back to the main subject:
The browser (a modern one) automatically places <h1> inside <body> and <link> inside <head>. And according to W3C, when you define the same style for an element and its child, the style defined for the child has priority over that defined for the parent element. Therefore, your body rule is not overriding h1. The problem is typographical: you typed a : instead of a ;
h1 {
font-family: Georgia;
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
One a side note: I replaced font-style with font-family. To specify the font, use font-family. font-style is used for enhancements (italic, underline, etc...).
index.html file contains this
<link href="style.css" type="text/css" rel="stylesheet"> <link>
<nav class="header">
<img src="/Users/DeMarcus/Desktop/DevProjects/Websites/CodeCademy/p.4 Datsomo/Resources/images/pattern.jpg" alt="">
<h1>Dasmoto's Arts & Crafts</h1>
i Have this link which I'm using to connect my html file to my css file. Its just that when i load my page it appears without any css.
I know I've written my css correctly and used classes to identify my div containers. Can anyone help me with what I'm doing wrong here?
css file contains this
header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;`.
}
try this :
<link href="./style.css" type="text/css" rel="stylesheet">
By adding ./ before style.css, you are explicitly telling the browser that your file is in the same folder.
Also, check the case of the css file. I can see that in the img src you have used capital characters and spaces. Try to avoid spaces and capitals in file names as servers are usually case sensitive.
First check if the css is getting loaded.
To check this right click on the page -> view page source. Click the link in the href attribute to see if you get your css file.
If you can see your css file you probably have a syntax error in your css file.
If you can't see your css file, you need to change the link to your css file.
To link to your css file use this syntax:
<link rel="stylesheet" type="text/css" href="style.css">
It also seems you need to change the code in your css file to something like this:
.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Note I added a . before the header, since it is a class.
Another note: you should close your <nav> tag.
I want to use an external .CSS file.
When I load a page in chrome I see only the Html part. The CSS part seems to be ignored.
So I go to inspect element and look at the sources tab an there are 2 files. When I open the html and CSS file it looks nice. But the page is still not rendered the way it should be.
Only when a edit something in the CSS file,the page gets re-rendered and everything looks fine.
When I save the html and css file together in a local folder and open the html in a browser everything looks fine too.
this is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>server</title>
<link href="server.css" rel="Stylesheet" type="text/css">
</head>
<body>
<ul class="navbar">
<li class="navbar">Assignment</li>
<li class="navbar">Solution</li>
<li class="navbar">Logout</li>
</ul>
<H1>server</H1>
</body>
</html>
And this is server.css file:
body {background-color: #efefef;}
ul.navbar {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
ul.navbar li.navbar {
display: inline;
}
ul.navbar li.navbar a.navbar {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
ul.navbar li.navbar a:hover {
color: #000;
background-color: #fff;
}
I tried searching for tornado CSS external files and found tips on using a static directory but while both files do show up as source in the element inspection I do not think anything is wrong with the tornado script.
Edit -- I set aside my stubbornness and tried the "static" approach. This works fine. So I guess that writing out a .css file is different from delivering a static .css file. There seems to be some HTML interpretation going on but I would still like to here what goes wrong and why. -- tidE
These are the handlers I use:
class CSSHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.write(file("html/server.css").read())
class MainHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.render('html/assignment.html', title="server")
But again this part works. I can GET /assignment and I can GET /server.css. When I include the css part in a style tag inside the header of the html file everything works fine too. But this is not what I want to do. I want to provide some basic css stuff in one file for several html pages.
You need to set an appropriate content-type header for all non-html pages. self.set_header('Content-Type', 'text/css').
Also consider using StaticFileHandler (just set the static_path keyword argument to the Application constructor) instead of serving static js/css files yourself. It will take care of the content-type and other headers for you and improve cacheability.