I was trying to add css in my blogger's blog but for some reason blogger theme designer is not working so i decided to add css directly in the code using tags, but I can't find the tag in the html file. It is my first time when I am unable to understand where is. Anyone know where tag is in this file to add css?
I did not Code it completely! And the person who did is no longer in contact with me!
Click Here to see Code
To use an external style sheet, add a link to it in the section of the HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Search for this ]]></b:skin> and place your CSS code before it without using <style>
Or if you want to use a style tag, place it after </b:skin>
The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
Your program should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
you should add the head tag yourself to the top of the document if you do not have one already. for the href change that to the name of your css file.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>
<!--[if ie]><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/> <![endif]-->
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://justpaste.it/redirect/3qnyk/http://www.blogger.com/openid-server.g' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
</head>
Related
I have a simple HTML page with some <sub> elements in it. For some reason, Google Translate offers to translate the subscripts from Arabic to English (despite being English to begin with), only moving them down a little when translated. The HTML page language is set to en-US. Is this just my computer being weird, or is there a code-related reason?
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--<meta name="google" content="notranslate"> (this successfully gets rid of the translate popup, commented out for testing purposes)-->
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<title>test</title>
<link rel="icon" href="favicon.svg" type="image/svg"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="functions.js"></script>
<script src="main.js" defer></script>
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
Added to #test by JS:
<div class="letter">A<sub>1</sub></div>
Website: https://test.edgeloop.repl.co
Screenshot: screenshot
Are you sure that this is the correct code? You seem to have a <html...>-tag inside your <head>-tag. Remove the duplicate html-tag inside your head, and instead add the lang="en"-attribute to your outer-most html-tag.
Your code should thus look as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>test</title>
....
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
If this does not immediately solve your problem, try clearing the google chrome cache as follows:
Press F12 to open the dev tools menu
Right-click your refreh-button
Select the option empty cache and hard refresh:
If your webpage uses HTML and XML interchangably, you might need to add the following to your opening <html>-tag (see this link):
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
...
</html>
If your Google Translate does still pop up, you have the following options:
add translate="no" to your root html-tag
add the class notranslate to your root html-tag
add <meta name="google" content="notranslate"> to your head-tag
Your code should look as follows:
<html lang="en" translate="no" class="notranslate">
<head>
<meta name="google" content="notranslate"/>
....
</head>
....
</html>
#Lawrence Cherone's comment about adding more text seems to fix the problem, as does #unknown6656's suggestion of adding <meta name="google" content="notranslate">. I still don't know why subscripts are considered Arabic text, but adding English text seems to fix the problem. Thanks for all the answers.
I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.
I have this simple HTML and CSS below. If I uncomment the style inside I get hotpink. When the link to the style sheet is used I do not get blue.
The test.html and test.css are in the same directory.
The browser error is:
test.html:9 GET file:///test.css net::ERR_FILE_NOT_FOUND - Crome on
Mac.
New to all this, but I have good understanding of what I should be doing I think.
.p {
background-color: blue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
<!-- <style>
p{background-color: hotpink}
</style> -->
</head>
<body>
<app-root></app-root>
<p>This is a test of color</p>
</body>
</html>
When trying to style ".p", you are referring to an object with class name "p". Just remove the dot before the p, and your problem will be solved!
Your problem can be solved by removing base tag from html document. In this case base tag messed things up and changed your link tag attribute "href" to "/" and that is why you get a reference error and the browser cannot find your test.css file.
I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.
This is the code(just a test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
and CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.
I'm using Linux and Aptana Studio.
I've searched a lot the last 2 hours and cannot find where the mistake is.
I invite you to read this article Absolute and Relative Paths
Then we pass to your code:
<link rel="stylesheets" type="text/css" href="/styles.css">
Should be :
<link rel="stylesheet" type="text/css" href="styles.css">
Your styles.css should be in the same folder as your html file.
To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).
An other way to make your css working is to integrate it inside your page without separation:
Example:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"
The rel attribute should just have stylesheet in it, singular not plural as well
I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.
http://rosebusch.net/jeff/miscellaneous/tree.html
That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.
Make sure style.css is in your root web directory since that is where you are calling it from
Don't put the / in front of styles.css and make sure they are in the same folder.
Try this instead:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
If all the above not working:
1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)
If your CSS file are in another folder then use
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link
<href=FILENAME.css rel=stylesheet type=text/css />
Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css
BUT make SURE it is under the main folder where your Index is!
just try tasking off the / in front of the style.css
Place your link in the head tag or body tag, it is best to put it in the head tag.
Google Chrome Audit tool says:
Put CSS in the document head (3) CSS in the document body adversely
impacts rendering performance. Link node bootstrap-extract.css should
be moved to the document head Link node style.css should be moved to
the document head Link node css should be moved to the document head
But the stylesheets are linked in the head. Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR" xml:lang="fr-FR">
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/resources/css/bootstrap-extract.css">
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
etc.
What am I missing?
Your code looks like it should be valid to me, however, the meta tag shouldn't be closed with />:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
This could cause the <head> tag to close, but that's very unlikely.
Have you looked at the HTML in Google Chrome to see how it is being displayed in comparison with what the code should look like?