I have the following code in the project's MasterPage.master file :
<%= ConfigurationManager.AppSettings("System").ToString() %>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="Stylesheet" href="/App_Data/Styles/Site.css" type="text/css" />
</asp:ContentPlaceHolder>
<%
If (ConfigurationManager.AppSettings("Mode").ToString() = "TEST") Then
%>
<style type="text/css">
body {
background: #99cccc;
}
</style>
<%
End If
%>
I do not want to do this:
<%--<div style="text-align:center">--%>
rather I want to be able to do this:
<div class="masterpagediv">
The CSS file contains:
.masterpagediv {
text-align: center;
}
I am not sure if the location of the CSS us being correctly identified in the href which could be the reason that the rule is not being applied to the tag.
The project did not use CSS before I started working with it. Am I supposed to enable something to be able to use the CSS?
Thanks.
Does your other styling work?
Try setting the background color on the class to make sure it's being applied to what you want.
From the markup you posted, there's no div with that class applied. You may want to double check that you're applying the style in the tag.
One more thing that just got me the other day - I had to set the CSS MIME type up in IIS. There's no error when this happens, you just won't get styling. Otherwise IIS doesn't know how to serve the file. (Strange, I know, but true)
Related
So i have this weird problem that any css i write doesn't work. I tried to create multiple pages and link css but it simply doesn't apply.
If i download a template of the internet if i run the page, their html works.
Here is an example of the most basic code i've written that doesn't work, even though i've run it through validators. It doesn't matter what element im trying to apply styling to it doesn't work.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Test Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Sup! </h1>
</body>
</html>
CSS
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
}
I have tried numerous solutions i've found online, but none of them work.
Can you check your network tab that your style.css is fetched from server and there is no 404 not found.
I would say try "/styles.css"
1. Check your Devtool, see if any error in network, make sure that style.css successfully loaded.
2. Try - Importing External Style Sheets
Write in html head tag:
<style>
#import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
This could be because of the folder structure. So maybe try and make sure your html file and css file are on the same level.
Or you could try "../styles.css" - Again this depends on where your files are in your dir
Everyone has given almost everything that I know. Sometimes its the silly things that we missed out that gives us tough time. Do try and follow this:
make sure both the html and css are under the same folder, in my case the folder is named "ROUGH"
Check for any white spaces before and after the file name. Example: "style " has one white space after the name, it should just be "style"
Using "/" inside the href. Example below href = "/style.css"
So, finnaly figured it out. The encoding was set to utf-16 and everything rendered as chinese kanji. This is the problem solution. Stylesheet taken-over/replaced by Chinese characters
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 ...
Assuming i have a css file called inline.css which contains some css,
how can i inline this css into the markup ?
I want it to be inlined to the markup, NOT included as an external css resourcs .
so assuming my slim markup is:
<html><head>
<!-- code to make the style inlined here ... -->
</head>
<body>hello</body></html>
and assuming my inline.css is:
body { background-color: green; }
i want the final output markup to be:
<html><head>
<style>
body { background-color: green; }
</style>
<body>
hello
</body>
I don't know why you are trying, but it is possible if you are using server side rendering. Read CSS file and render it:
<html>
<head>
<style>
<%= Data from css file here %>
</style>
</head>
<body>
...
</body>
</html>
but remember, including CSS into your HTML increases file size. Also you can't cache stylesheets if you are using inline styles. Please reconsider what you are trying to do.
I have a master page which has an exteral css page in the header. Includes the height of the pages, however only one page needs to be longer. So I figured inline css would be the best option over creating a whole other master page or creating a new css page that only has one line different.
I looked through this site for an answer but ive only found how to change the external css link to one page, but like i said i dont want to add a whole new different page, I only need the hight property of the pages to be changed so is there a way to just override it by something similar to inline css? or is a new css page the only option?
If you are trying to add in the HTML page (seattle.html) then use the below code
<!--MS:
<style type="text/css">-->
#contentBox{ margin-left: 0; margin-right:0; width:100%; min-width:0; } #contentRow{padding-top:0;}
<!--ME: </style>-->
If you want a certain page to have just one difference, you don't need to copy and paste the whole stylesheet over to a different stylesheet. As long as it is included after (i think) the first stylesheet being included, all you need to put is the changes you want.
If you want to put a small bit of CSS on a HTML page without having a stylesheet, simply put it in
<style type="text/css">
css code here
</style>
I hope this works,
-Ben
First of all, you're talking about master pages, which are part of asp.net, not classic asp, so I'm retagging your question accordingly.
asp.net allows you to give the style tag the runat = server property. In header of am aspx page you could add
<style type="text/css" id="sitestyle" runat="server"></style>
In the codebehind you can then populate this as follows
sitestyle.InnerHtml = (your server generates css styles here);
Edit - master page with two content placeholders
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" %>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
If You want to use the Inline css then you can use that inside the <style> tag.
But Inline and Internal css is not the good option.
Because being as a good developer It is always a good practice that you use External css.
It will really help you to reuse your css.
&
Biggest Advantage is it will make your code more maintainable.
I hope this will help you.
I have a jsp file that holds html elements, it has a table in it with a specific id. When I add the border: 1px; styling internally then it works, but when I want to use a css file that specifies styling, then it doesn't, there's no border at all as a result.
the relevant part of the jsp file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Airline Database</title>
<link rel="stylesheet" type="text/css" href="styles/PassengerStyle.css"/>
</head>
<body>
<table id="main" width="1300px">
...
</table>
</body>
</html>
the PassengerStyle.css file:
#main {
border: 1px solid black;
}
the css file is in the styles folder that is in the same folder as the jsp file.
What did I miss?
It probably can't find the stylesheet, i.e. the url is wrong. Have you tried navigating to where the code in 'view source' thinks the file is located? That's probably different then where it is.
You can also try adding body { background-color: red; } to see if any styles from that stylesheet apply.
I would try to see if any other styles from the stylesheet apply (or do a test), if they do, then I would wonder is the table dynamically generated? If other styles do work, I would try giving the table to be styled a class in the tag versus using the id reference in the style sheet and see if that works. If nothing applies, probably a broken style sheet link.
I would also recommend putting the 'width=1300px' in the css style sheet along with the other css styles.
You can use Firebug or Chrome developer tools to see if your CSS is being overridden by different rule, and you can use the network tab of those tools to see if there were any errors loading the external stylesheet.
Adding !important to your css style can help in debugging, although I don't recommend it for production use.
Also try clearing your cache to see if a previous version of the stylesheet is being used.
Try this:
#main {
border: 1px solid black !important;
}