I'm learning CSS/HTML and am trying to import a simple css class into the html document, but something appears to have gone awry. Here is Logo.css:
.logo{
color:rgb(255,232,57);
background-color:rgb(0,0,75);
font:ChopinScript;
font-size:96pt;
}
and my html document:
<head>
<link rel="stylesheet" href="Logo.css" type="text/css">
</head>
<div class="logo">
<p class="logo">This text should look like my logo!</p>
</div>
<img src="404-tumblebeast.jpeg" align=center valign=center />
The image shows up fine in Safari, but the text is just generic text. Does the link tag not import as I thought? How would I do the equivalent of #import or #include, if isn't taking care of that?
end the link tag (see below: the /> instead of >).
<link rel="stylesheet" href="Logo.css" type="text/css"/>
Verify that the Logo.css is in the same directory as the html file or use the correct path to the Logo.css file. Just in case you are doing this, you can't put the css under the WEB-INF directory.
You only need the class on the div element or on the p element, not both.
Edit:
I was poking around and found some info about embedding fonts in a page: http://jonrohan.me/guide/css/font-face/
Related
So I've got down my basic html framework down and some basic CSS to make it look centered and adjust the background color, but I've tried a couple different adjustments and none seem to work properly when linking my CSS.
I've attempted to adjust the path to my CSS, tried to change the encoding between utf-8 and a few other random Windows 'save as' ones, and tried adjusting spacing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<body>
<link rel=stylesheet type=text/css href=/Computer/C:/Users/JohnDoe/Downloads/Test.css>
</body>
</html>
And in the .css file:
body {
text-align: center;
background: powderblue;
}
Whenever I run my program it just comes out looking like a normal black and white page that is off centered.
So it would probably be good to read up on building a website. But in the meantime, here are some things you need to fix:
link elements go in the <head>
link href should be an absolute server link (starting with https://...) or a relative path
quote attribute values
remove stray css at the end of the doc and put in css file
Relative path means it's the path relative to the file being served (for example, "index.html"). So if your index.html file is in /Computer/C:/Users/JohnDoe and your css file is in /Computer/C:/Users/JohnDoe/css/ then the relative file path is css/Test.css
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test.css">
</head>
<body>
<p>This text appears in the browser</p>
</body>
</html>
You got a few things going on here:
First, for externally linked style sheets, the link goes in the <head>...</head> tags, rather than the <body> tags.
Here's a quick reference:
https://www.dummies.com/web-design-development/html5-and-css3/how-to-use-an-external-style-sheet-for-html5-and-css3-programming/
Note the quote:
The <link> tag only occurs in the header. Unlike the <a> tag, the <link> tag can occur only in the header.
you're asking to link to an external style sheet, but also including some inline CSS (the body stuff you have a t the bottom. Also note that when including inline CSS you need to wrap it in <style> tags.
Lastly, that href path looks odd to me ...
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I tried connecting a wikipage with a .css-file which is included on the page as an attachment. The html-code on the page was this one:
<link rel="stylesheet" type="text/css" href="css_ein_ausklappen.css"/>
It didn't work out because the html-code disappeared and only the code <link/> is left.
I already tried connecting the wikipage with a css-file in a Sharepoint(database) but that also didn't work out even though the href command was still there after I saved the wikipage.
The html-code which was left looked kind of like this:
<link href="https://wiki/ksldsld.css" type="text/css"/>
It would be great if someone knows a good solution.
#Ralph I tried adding the .css in the html-code like this:
<h1 dir="ltr">HELLO WORLD</h1>
<style type="text/css">
h1 {color: blue}
</style>
but the title "HELLO WORLD" is still black after I save the wikipage and the code inside the style tag disappears and only this code is left in the wikipage:
<h1 dir="ltr">HELLO WORLD</h1>
<style type="text/css">
</style>
I really don't know how I can add a stylesheet to a wikipage and alter the appearance of the page if the code disappears even if I put the code inside a <style> tag...
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
I am using YSlow to measure overall page performance. However, CSS are declared in Head section of the document still YSlow finds css in the body of the document and suggests to put CSS at top. What may be the reason for the same?
I am not using CSS property in hard code or inline style, for inline style I am applying class to that div like <div class="header"></div>. Also in head tag there is external CSS attched like
<head>
<link rel="stylesheet" type="text/css" href="/css/menu.css" />
</head>
But YSlow finds css in body part rather than head section.
Your question is not clear, but I would guess you probably have in line CSS tags
Something like
<div style="float:left">asf asdf</div>
So, your document could be
<html>
<head>
<!--CSS declarations and title etc-->
</head>
<body>
<!--body code etc referencing the exteranl CSS sheets or the CSS declared in the header-->
<div style="color:#366;">These words are in this color</div>
</body>
</html>
I encountered this problem, and found that it was due to having an A tag before my css imports (for claiming Google Plus identity). I moved that tag to just before the closing HEAD tag, and YSlow no longer flags the issue.