I can't get my style sheet to work in Visual Studio. I have tried quite a few things. Here is my code as it currently is.
Index File (Home Page)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<link href="indexStyleSheet.css" rel="stylesheet" />
</head>
<body>
<h2>red</h2>
</body>
</html>
CSS (The file type is .css)
h2 { color: red;}
Screen shot of file hierarchy
As your css file is in the same directory as your index.html, you don't need to specify a path starting from the root of your project.
This should do it.
<link href="indexStyleSheet.css" rel="stylesheet" />
Edit:
Also, I didn't catch that immediately, what is most likely the cause of all your problems is that your h2 isn't inside the body tag !
Related
Trying to learn how to link my css into the Home index file. Cant believe I'm not getting this to work. Hope you can help me. So, I've created a standard mvc core project, in the views and homefolder, I'm creating a new stylesheet, with same name as index, Index.cshtml.css, its not getting nested as I saw on some tutorial. But its there,
Rest of the code is like this:
This is the css file
.helloWorld {
font-family: Arial;
font-size: 60px;
font-weight: bold;
color: blue;
}
Here is the head in the Layout file
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VueDemoApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/VueDemoApp.styles.css" />
</head>
All I have added is the the VueDemoApp styles, where am I doing wrong here?
Oh, also the Index.cshtml file:
<div>
<h1 class="helloWorld">Hello World!</h1>
</div>
As you can see, nothing special with this project just trying to understand how to get the css to work, I don't have a problem with css, only linking the freakin thing :'D
To be nested, try to name it Index.css instead of Index.cshtml.css.
I moved the css file into root/css and then linked it and now it works!
Unable to add image.
I am unable to upload the image in browser using the code as show below
When i try to run the code, image is not displaying, in console it showing the error has below:
a1.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
\\\
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myproject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div>
<img src="assests/a1.jpg" height="20" width="40">
</div>
<div>
<app-root></app-root>
</div>
</body>
</html>
There is a spelling error in assets. Spell it assets and not assests and try again
I have a solution made up of the above technologies. I am using knockout components made up of .html and .ts files. When trying a simple <script> tag on the .html file, nothing happens.
The component is payment-details.html and the code is as simple as follows:
<h1>Payment details</h1>
<script type="text/javascript">
alert("test");
</script>
The underlying payment-details.ts is:
import * as ko from 'knockout';
class PaymentDetailsViewModel {
constructor() {
}
}
export default { viewModel: PaymentDetailsViewModel, template: require('./payment-details.html')};
and the _Layout.cshtml file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] Contactless Check In</title>
<base href="~/" />
<environment exclude="Development">
<link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
</environment>
</head>
<body>
#RenderBody()
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#RenderSection("scripts", required: false)
</body>
</html>
I'm not sure what the issue is or where to start looking. There's something in the solution somewhere that is stopping script execution. Nor does it render in the html.
Thank you!
I'm new to web development but have some experience with C#, so I'm trying my luck with ASP.NET.
I was able to create the base app and so on, however now I want to use my own CSS stylesheet.
I tried using the exact syntax that the base app uses:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SmtteProject</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>
<link rel="stylesheet" href="~/css/test.css"/>
<link rel="stylesheet" href="~/css/site.css" />
</head>
Where the test.css is the stylesheet I want to use. It is in the exact same directory as site.css, however I get this error in the console on the page:
GET http://localhost:5000/css/test.css net::ERR_ABORTED 404 (Not Found)
I tried using runat="server" in both the head and in the link, as I saw quite a few answers online with this solution. However, that did not do the trick either.
I tried displaying an image that was in an images directory in the exact same way, but encountered the same issue.
Any help welcome.
It's Cascading Style Sheets, or CSS. Not CCS. I think that this naming confusion is the root of your problem.
Your file is named test.ccs. It should be named test.css, per the HTML snippet you provided.
// Navigate to Account Managemnt window
Thread.Sleep(10000);
chrome_driver.FindElement(By.XPath("//*[#id='module-menu']/div/button")).Click();
Thread.Sleep(10000);
chrome_driver.FindElement(By.XPath("//*[#id='module-menu']/div/div/button[2]")).Click();
//*[#id="module-menu"]/div/div/button[2]
Thread.Sleep(20000);
IWebElement body = chrome_driver.FindElement(By.TagName("body"));
var result = chrome_driver.FindElement(By.TagName("body")).Text;
Console.WriteLine(result);
IWebElement Single_Acc_Add = chrome_driver.FindElement(By.XPath("//*[#id='single-add-button']/button/span"));
//chrome_driver.FindElement(By.LinkText("+ Add")).Click();
action.MoveToElement(Single_Acc_Add).Build().Perform();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>PCR Universe</title>
<link href="/static/css/main.ed365ca1.css" rel="stylesheet">
</head>
<body>
<div
id="GLOBAL_INFO"
data-envvar="-siteminder"
data-clientname="universal-dashboard"
data-clientid="3027d708-26a2-4b63-a131-d672617f46f4"
data-domain="azurewebsites.net"
data-apienvvar="-siteminder"
data-apiname="universalwidgetservice"
data-apidomain="azurewebsites.net"
data-LOGINURL="https://universal-dashboard-siteminder.azurewebsites.net/authorize"
data-LOGOUTURL= './Logout.html'
data-ERRORPAGE= './LoginError.html'
data-ENCODEDCOOKIE= 'false'
data-USETOKENAUTH= 'false'
>
</div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.84c386bd.js"></script>
</body>
</html>
I am working with selenium and came across a website which is not created with java script but react elements, how can i detect IWebElement when there are no html tags. Not able to detect them with link Text as well.