I am unable to link my CSS stylesheets:
Hierarchy:
index.html:
// index.html
<!DOCTYPE html>
<html>
<head>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="blue">Hello</p>
</body>
</html>
index.css:
// index.css
.blue {
font:blue;
font-size: 20px;
}
The "font" property isn't correct.
Try to replace this :
.blue {
font:blue;
font-size: 20px;
}
By this :
.blue {
color:blue;
font-size: 20px;
}
The css path seems correct, you can check on the network tab of your browser console, if you get a HTTP 200 the file is loaded, if 404 it's not found.
Try the w3 css validator: http://jigsaw.w3.org/css-validator/
I had a similar problem and it said there was a Chinese character in the css file but the file looked fine in notepad and elsewhere. Using BabelPad http://www.babelstone.co.uk/Software/BabelPad.html I found the encoding of that file was UTF16LE. I changed the encoding to UTF8 and it worked fine.
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 want to code a simple website just with HTML and CSS . I did it with notepad on my PC.
When I added a background photo to my #header element, it isn't working. I've tried to replace the name and used from online editors.
I can't find my error.
I have a folder with style.css and index.html and a folder for the photos on my website.
* {
margin: 0;
padding: 0;
}
#header {
height: 100vW;
background-image: url(images/Al-Hakawati.jpg);
background-position: center;
background-size: cover;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chehel Behesht</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
</section>
</body>
</html>
Your problem is the css file format. If you look at the image you showed, your css file format is TextDocument. Ideally, the css file format should be CSS-Document.
And this confirms the error you are getting:
Failed to load resource: net::ERR_FILE_NOT_FOUND style.css:1
To fix this error, open your style.css stylesheet in a notepad. Next, select File - Save As... And finally, specify the file extension .css. Like this picture.
I have an MVC form (with layout page _Layout.cshtml) using jQueryVal. When I submit with empty required fields the validation message displays properly BUT the style in Site.css is not being applied (overriding bootstrap.css). I suspect it is because jQueryVal is running client side. The only way I've found to make it work is to place the actual style on the _Layout page.
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/Site.css"));
Site.css
.field-validation-error {
color: red;
font-weight: bold;
}
_Layout.cshtml (This style block works but not when placed in Site.css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans" rel="stylesheet">
#Styles.Render("~/Content/css")
#*TODO site.css not overriding validation error text color*#
<style>
.field-validation-error {
color: red;
font-weight: bold;
}
</style>
Rendered Tags
I tried this page in IE and the style for red validation errors worked fine. Apparently, in Chrome, with a .cshtml utf-8 meta data header, it expects the .css file to be utf-8 as well. Who knew?? I opened a new document in Notepad++, making sure it was utf-8, pasted my .css content, saved it overwriting existing .css and LIKE MAGIC! IT WORKS! :)
In layout.cshtml you have used !important, but in site.css no - have you tried to use it in site.css? If yes, have you tried cascade css, e.g.
body .field-validation-error {
color: red !important;
font-weight: bold !important;
}
I'm a veteran to CSS and HTML, but never before have I seen this problem. I have the background image, CSS, and HTML files placed properly. I believe I have all the code right too since I checked it against a site I already made, but my image will not appear for anything.
CSS
body {
background-image: url(am-stage.png);
background-repeat: no-repeat;
background-color: black;
background-size: 100% 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> AM </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
</body>
</html>
EDIT: Chrome is giving an error saying that the CSS file can't be found. Not sure why though. The CSS is in the same directory as the HTML and the image.
I figured it out, Sublime wasn't saving the CSS as a CSS file. I told it to save as a CSS, but it wasn't adding the extension this time for some reason. I just chose CSS and manually put in the .css at the end and now it's working.
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