Here is my html code :---------------------------------------------------
<!doctype html>
<html>
<head>
<title>My webpage </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1> My website </h1>
<ul>
<li> Home</li>
<li> page 2 </li>
<li> page 3 </li>
</ul>
<h2> This is my homepage</h2>
<p> All of my homepage content</p>
</body>
</html>
the background is suppose to go red but doesn't ?
css code from another file:
body{
background:#red;
}
When using a named colour you do not need to use a hash, hashes are only used for hexadecimal colours.
In order to change the background to red, use the following code:
background: red;
Or, you can do this (#ff0000 is the hexadecimal code for red):
background: #ff0000;
Named colors do not need hash sign:
body{
background:red;
}
Related
Im getting into my coding class and for for some reason my stylesheet wont connect to my HTML program. They are both in the same folder. Im using NotePad ++
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khira Kathleen Mcgregor</title>
</head>
<body>
<header>
<h1>Testing Header</h1>
<h2> Testing sub header</h2>
</header>
<nav>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
</ul>
</nav>
<footer>
Bazzom bazang... we do the bestest!
<br/>Designed by ©Icabad Enterprises
<br/>
<a href="http://validator.w3.org/check?uri=referer" style = "text-decoration: none">
<img src="images/validation_button_html-blue.png" alt="Validate HTML" />
</a>
<!-- you may need to change the name of your image link to match the one you
uploaded -->
<a href="http://jigsaw.w3.org/css-validator/check/referer" style = "text-decoration: none">
<img src="images/validation_button_css-blue.png" alt="Validate CSS" />
</a>
</footer>
</body>
</html>
And my stylesheet:
body
{
/* you better change this stuff */
margin: 300px;
font-family: papyrus;
color: red;
background-color: green;
font-size:600;
}
Mistake is in a 4th row in your html file, you need to end quotes in href.
<link rel="stylesheet" type="text/css" href="styles/default.css">
If your HTML and CSS file are in the same folder, then the problem lies in your <link>.
The first thing I see is that you missed a quotation mark.
href="styles/default.css/">
This href is also pointing to a folder called "styles" that would contain default.css. Since they are in the same folder, your <link> should look like this:
<link rel="stylesheet" type="text/css" href="default.css">
The mistake is in the 4th line . If you using Both in the same folder then you should write it this way :
`<link rel="stylesheet" type="text/css" href="./default.css" />`
If in case you have a different folder structure then
`<link rel="stylesheet" type="text/css" href="./foldername/default.css" />`
I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.
Please don't be too mean i am just trying to understand. Okay, so I am proficient in C++, Java, and C# for applications. I have recently been trying to understand web development. Right now i am going over basic HTML coding. Looking at http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html and and trying to recreate https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works. But it is not working as intended.
<!DOCTYPE html>
<html>
<head>
<style type ="text/css"> <!-- You need this in order to have CSS, it has -->
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
So when i type this code into Codepen it works as intended, With every paragraph displaying blue text. However, when i code it in notepad ++ as a HTML file it does not add the CSS style, format, background color, etc. Upon looking into it i found out if i add the style directly in the paragraph bracket it works (as shown below)
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue;}
</style>
</head>
<body>
<p style="text-decoration: underline;">This is my body green</p>
<p style = "color: blue;">this text should be blue!</p>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
Adding declamation blocks like <meta charset="utf-8>and <link rel="stylesheet" href="style.css"> has not helped either.
My question is why does this code work some places and not others? Is there a web browser setting that could be interfering? I have tried IE, FF, and Chrome but not of them will display the CSS style unless i specifically declare it with in the brackets not in the header. If it is a logical error please post/comment article to read.
In the first example the comment <!-- You need this in order to have CSS, it has --> is misplaced into a CSS declaration, so don't put HTML comments in a CSS declaration .
Declaring p {color: blue; font-family:arial;} only affects to <P></P> tags.
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
If you need to add specific formatting to specific tags you can use the class attribute (class="blue"), and declare a class in CSS appending a point at the beginning of the class name (.blue).
<!DOCTYPE html>
<html>
<head>
<style type ="text/css">
p {color: blue;}
.underlined { text-decoration: underline }
.blue { color: blue }
</style>
</head>
<body>
<p class="underlined">This is my body green</p>
<p class="blue" >this text should be blue!</p>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
You do not need to declare a style type, as the only type is for CSS.
<!DOCTYPE html>
<html>
<head>
<style>
p {color: blue; font-family:arial;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
<ul>
<li>This is</li>
<li>a list</li>
</ul>
</body>
</html>
I'm having some trouble connecting my CSS file to my HTML file. This is my code for the HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class =“links”>
<ul>
<li><a href=“#”>ABOUT</a></li>
<li><a href=“#”>PROJECTS</a></li>
<li><a href=“#”>CONTACT</a></li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
and this is my CSS file so far:
.links li{
display:inline;
}
I'm just trying to get the lists (about, projects, contact) to be presented in a straight line on the top of my page. However, even after applying the css code, the format doesn't change on my webpage and is instead presented on three separate lines. I was wondering if someone could help me figure out what I'm doing wrong?
BTW my CSS file is called styles.css
You're not using the quotes for the href.
<link rel="stylesheet" href=“styles.css">
<!-- ^ -->
This is the reason the CSS file is not loaded.
Use normal double quote.
<link rel="stylesheet" href="styles.css">
The same thing is done in complete code. Change this in all the occurrences.
.links li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>BLAH BLAH | Portfolio</title>
</head>
<body>
<div class="links">
<ul>
<li>ABOUT
</li>
<li>PROJECTS
</li>
<li>CONTACT
</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
I'd recommend you to validate your HTML from W3
<link rel="stylesheet" href=“styles.css"> assuming that the file name of your stylesheet is styles.css AND that file is located in the same file as your HTML page you are referencing this correctly.
Additionally you can try adding the type to your link tag (example below)
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
just change the “ with "
because of this syntax error: browser generates the following error:
GET file:///C:/Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net::ERR_FILE_NOT_FOUND
the following snippet will work fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class ="links">
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>