Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I made this thing:
<!DOCTYPE html>
<html>
<head>
<title>My Experiment</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div></div>
</body>
</html>
Anyway I added
div{
width: 100px;
height: 50px;
border: 4px solid black;
}
In CSS. Why doesn't it show up?
PS I am using text textastic code editor for ios.
The only issue might be that the CSS isn't loaded to the DOM of your webpage!
Try to inspect the error in the Console, or press F12 and see whether the file was loaded or not!
Your code is working perfect!
http://jsfiddle.net/afzaal_ahmad_zeeshan/UHQ9F/ Here is the fiddle, you can see for yourself!
div {
width: 100px;
height: 50px;
border: 4px solid black;
}
So try this:
<link rel='stylesheet' type='text/css' href='/stylesheet.css'/>
Or this:
<link rel='stylesheet' type='text/css' href='foldername/stylesheet.css'/>
Where folder name would be the name of the folder in which the stylesheet is placed!
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am beginning to code in HTML and CSS, and am using the FreeCodeCamp tutorials to help me. Along with my learning I am creating a simple webpage of my own as a project to work on.
Having learnt how to use fonts from the Internet in my webpage, I tried to change the font, colour and size of my header, but when I run the code, this doesn't show up on my webpage.
If it helps, I am using PyCharm for this (I'm not really sure what IDE to use- and I already use PyCharm so I though I'd continue with that).
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel ="stylesheet" type="text/css">
<style> <!--Why doesn't this work?-->
h1 {
font-family: Lobster;
font-size: 50px:
color: red;
}
</style>
<body>
<h1> This is the h1 text which should be formatted.</h1>
your CSS comment is wrong /* CSS Comment */
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel ="stylesheet" type="text/css">
<style> /* Why doesn't this work? */
h1 {
font-family: Lobster;
font-size: 50px;
color: red;
}
</style>
<body>
<h1> This is the h1 text which should be formatted.</h1>
</body>
https://jsfiddle.net/lalji1051/x0odt5qk/2/
There is an error in your css at this line: font-size: 50px: should be ; instead of : at the end of line.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a JSFiddle. I'm probably missing something pretty obvious, but can anyone point out what that might be?
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<p>Random white text which should appear in a grey banner at the top of the page.</p>
</div>
</div>
</body>
CSS:
body {
width: 100%;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
.navbar {
width: 100%;
height: 200px;
background-color: #292929;
color: #ffffff;
text-align: center;
vertical-align: middle;
display: table-cell;
}
EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).
Make sure to link your css file to your html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to do something like this..
enter image description here
I need to do this vertical line and the bottom border for every input. anyone has an idea?
Here is a basic structure you can use. Now it is up to you to integrate this with the elements of your website...
However, please be aware that Stack Overflow is not an outsourcing website where you ask people to code for you. Try to find a solution yourself and come here if you need help.
#wrapper {
display: flex;
justify-content: center;
}
#wrapper > div > div {
height: 30px;
margin: 10px;
border-bottom: solid 1px gray;
}
#separator {
height: 90px;
border-left: solid 1px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<div>
<div>1: plcHolder</div>
<div>3: plcHolder</div>
</div>
<div id="separator"></div>
<div>
<div>2: plcHolder</div>
<div>4: plcHolder</div>
</div>
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have just started learning html and css.
While reading a tutorial from a book I saw how to change the styles
I wrote the same code but there is no effect on the page in the browser.
It appears just the same as without the <style> tag.
Here's the code:
<title> Starbuzz Coffee </title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Change <style type=”text/css”> to <style type="text/css">.
The key problem here is with your quote. I've just tested using ” which didn't work in my local project.
Your quotation marks are the issue, you need to use " instead of ”
Like this:
<style type="text/css">
Also, lets go to the next level too. Adding styles in the HTML head is ok, but you will find it a lot easier to maintain your HTML and CSS code in the future if you link to a separate stylesheet. To do that, just add the following to your HTML head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
In this case your stylesheet is called 'mystyle.css' and is located in the same folder as your HTML page...
You can now add all of your CSS goodness into the 'mystyle.css' file like this:
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
Read more about this on W3 Schools.
You can try couple of thing to test
Open a debugger window by pressing F12 and find body tag to see what has overwritten it.
Try inline style on a body tag and see does that make a difference
Change the order of a CSS on your page.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
.green {
color: green;
font-size: 2em;
}
</head>
This is my entire head, the
.green {
color: green;
font-size: 2em;
}
Is showing up at the top of the webpage.
I have Googled this but cannot find a fix, apparently only things in the body should show up on the page.
Anyone know how to fix?
If you wish to place styling within your HTML document, you need to wrap it within a style element:
<head>
...
<style type="text/css">
.green {
color: green;
font-size: 2em;
}
</style>
</head>
Depending on what you're trying to do, however, you could just add this to your existing css.css file which your link element includes on your page.
you linked yourpage to a css.css file
you either add your css code into that file, or you add the <style></style> to wrap your code so that it would be processed as style
Add style tag to it
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<style>
.green
{
color: green;
font-size: 2em;
}
</style>
</head>