CSS Properties rules are not working in HTML file - html

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>

Related

Why does external and internal CSS not work within HTML for me?

I am using the following HTML/CSS code on our company's Intranet webpage
<div class="hello">hello</div>
<style>
.hello {
color: blue
}
</style>
After loading the HTML I get the following result in the inspector:
After inspecting the HTML code I notice that my CSS code suddenly vanishes and I have no idea why. I tried other methods e.g. importing it via stylesheet but every CSS related code vanishes.
Except for inline CSS:
When I use
<h1 style="color: blue;">A heading
</h1>
<p>A paragraph.</p>
rhe Code works properly.
Put <style> inside <Head>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
<style></style> tag must be included inside the <head></head>. Refer the MDN doc
<html>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</body>
</html>
It's visible to me...
Look at following link
Stackoverflow
2
3

href doesn't appear as a clickable link

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>

Struggling to get my text to display inline

I'm trying to get my ul section to display my code on the same line yet it still presents it in a vertical list. I'm new to this and so can't figure out why it won't go on the same line. I've tried display:inline-block; and float:left; but that hasn't worked.
HTML:
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
CSS:
body nav ul li {
display: inline-block;
}
You have it right. Check that the css file is named correctly and that main2.css is in the same directory as your html file.
works as expected when put into a snippet - see below. Check the filepath for the stylesheet and typos...
body nav ul li{
display:inline-block;
}
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet">
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>

Why won't my css file link to my html file?

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;
}

How do I use css in html

I was learning html and css but when I got to this css code I was stuck. I couldn't make the paragraph text blue. Is there something wrong with my html?
This is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color;blue;}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Wrong syntax of writing color;blue;
<style type="text/css">
p {color:blue;}
</style>
<style type="text/css">
p {
color: blue;
}
</style>
Wrong syntax of writing color;blue;
correct way::
<style type="text/css">
p {color:blue;}
</style>
It's right way. Instead semicolon you must write colon.
<! DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color: blue;}
</style>
</head>
<body>
<p>This text is blue </p>
</body>
</html>
Read more about it.
example:
<html>
<head>
<style type="text/css">
p {
color: blue;
}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Or just simply - no style tag added
<p style="color:blue">This text is blue </p>
Easy error to find, just distraction.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
Ohh, so close. You've used a semicolon ; instead of a colon :. Changing it would fix your issue.
p { color: blue; }
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p { color: blue; }
</style>
</head>
<body>
<p>This text is blue</p>
</body>
</html>
However, if I may, I strongly suggest specifying a specific chain to your desired paragraphs. Making a global color change to all p tags isn't considered good practice.
.paragraphs p {
color: red;
}
<div class="paragraphs">
<p>This text is red</p>
<p>And so is this</p>
</div>
<p>This paragraph's color hasn't changed.</p>
On a side note. If desired, you could add a style attribute to your p tag to change the color of that specific paragraph.
<p style="color: orange;">This text is orange</p>
<p>This paragraph's color hasn't changed.</p>