I had everything working within style tags, but as soon as I cut and pasted what was in the style tags to a .css and linked it, the style stopped working. the only thing I can think of is that the file path is wrong. My html file and the style sheet are in the same directory.
Here is how I linked it (this doesn't work):
<head>
<title>Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
This does work though:
<head>
<style>
body {
background-color: rgb(255, 0, 255); /* this is the pink color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
</style>
</head>
that's the correct way to do it, however ensure that your file path matches. for your example above, the css file has to be in the same folder as the page you are working on and named correctly.
See that there are no HTML tags in your CSS file.
Check your console, are there any error regarding the css file? If yes, then try to use a full path for the css file
If no error in the console
check the Sources in console
navigate to external css link (<link rel="stylesheet" type="text/css" href="./mystyle.css">)
right click
open in new tab
Can the link be opened? If the link opened just fine without error and it display blank or not updated css file, then it's probably cached, try to change your link to <link rel="stylesheet" type="text/css" href="./mystyle.css?v=1.0"> (just add any query string that's never been used before to override the cached one)
Once you move your CSS to an external file, you need to remove the HTML tags. CSS has it's own formatting guide lines.
For example, for inline CSS (included in the HTML), you would do:
<html>
<head>
<title>Video Game Reviews</title>
<style>
body {
background-color: rgb(255, 0, 255);
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
</style>
</head>
<body...
But once you move the CSS to an external file, the HTML tags are removed. For example:
HTML file
<html>
<head>
<title>Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body...
CSS file called mystyle.css
body {
background-color: rgb(255, 0, 255);
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
}
There a few other things to check for.
If you are referencing mystyle.css like this ./mystyle.css, then the CSS file needs to be in the same folder or directory as the HTML file. That is what the ./ means.
If you store all your utility files (like CSS files) in a single location (something like /rc) you can use a full path like this:
<link rel="stylesheet" type="text/css" href="/rc/mystyle.css">
In this case, the / (no dot) means from the root directory of the website. But that is really a different question.
Your said , your html & css are in the same directory, but ./mystyle.css makes html search for a level up from the current directory.
Solution :-
Remove this(./)
Or
Move the css to a separate directory, say css.
So, now - css/mystyle.css
Related
So I'm trying to import a CSS stylesheet from JavaScript, and my HTML file is in JavaScript/JavaScript events, so I did this.
<Head>
<title>Javascript</title>
<link href="../styles.css" rel="stylesheet">
</Head>
<body>
../ is meant to go back and then to the styles.css file. But when I open a live server to see if the styles are working, they are not showing up.
Here is my CSS code:
body {
font-family: Arial, Helvetica, sans-serif;
color: rgb(119, 114, 114)
}
ul .done {
text-decoration: line-through;
}
Alwais use absolute path like: https://somedomain.com/style.css
or relative path beginnig slash like: /style.css
then browser will always find correct file path.
I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');
The worst part is that Playfiar Display is working fine, Archivo is not at all.
For reference, georgialee.design is the URL. (works on every browser except for internet explorer)
Thank you so much! I'm sure it'll be some silly mistake :)
In header section you import it
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
or
<style>
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>
In style.css file
body{
font-family: 'Archivo Black', sans-serif;
}
Copy this code into the < head > of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
In your CSS file, use the following rule to set the font-family:
// if you only want to change h1 fonts, use this selector
h1 {
font-family: 'Archivo Black', sans-serif;
}
For example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<style>
// default font for everything in the body
body {
font-family: 'Playfair Display', serif;
}
// make all h1 Archivo
// note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
body h1 {
font-family: 'Archivo Black', sans-serif;
}
</style>
</head>
<body>
<div>rest of your page...</div>
</body>
</html>
see more examples here
see here to find out more about css selectors
I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample
So I was having this trouble that my background image was not working at all...
I had the .css file correctly added with element in html. However I never got it to work. The only way it started to show me the background image was when I decided to create a NEW .css file which i called bodystyle.css and it finally did show me the background image.
The code used was the one below... I just pasted it to the new .css file and included the new file and it worked like a charm... why would this happen? Has anybody encounter this?
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333;
background: url('http://wilco/includes/img/body-bg.jpg');
padding-top: 0px;
}
a {
color: #4681da;
text-decoration: none;
}
This is modify version of your program
Directory Structure: in windows
D:\MYPROG\wilco\includes\img
in this folder your image body-bg.jpg exist
D:\MYPROG\styles
Your css file NEW .css exist
AND last
D:\MYPROG
your prog.html file exist
Code is as follow
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="styles/NEW .css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<p> This is my Background</p>
</div>
</body>
</html>
AND THIS IS YOUR CSS FILE
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333; width:970px;height:;background-position: center top;
margin:auto;
background-image: url("../wilco/includes/img/body-bg.jpg");
background-repeat: repeat;
padding-top: 10px;
}
a {
color: #4681da;
text-decoration: none;
}
I tried in my computer its working. you try with your image and tell me if any queries
bye
What I do to "fix" this, is F12 to open the developer console (in most modern browsers), navigate to the head element, then the link element, and open the link to the css file in a new window.
Once it is there, press Ctrl+F5 (or Cmd+R on OSX).
Then go back and refresh your page...
All your files (.html,.css and background image) should be in the same folder.
try checking that..
I'm planning to use Google web fonts on my site.
My site has lots of pages, but only a few CSS files.
-=> Is there any way to add this tag in the CSS file (because I don't want to edit all the HTML files)?
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
or do I need to add the above line in every HTML page's head section?
Yep, #import the google font in - jsfiddle example
Put this at the top of your CSS file
#import url('http://fonts.googleapis.com/css?family=Droid+Sans');
Then, reference it like normal
h1 { font-family: 'Droid Sans', arial, serif; font-size:24pt;}
Add the tags, how? Please explain yourself better.
In the HTML you can do this…
<style type="text/css" media="screen">
h1 { font-family: 'Droid Sans', arial, serif; }
</style>
If that's what you're asking?