CSS changing background color website - css

ive been watching a tutorial that has told me to change the background color of a webpage by using:
body {background-color:red;}
however when i try and load the page in google chrome the background remains white?
This is my full code:
<!doctype html>
<html> <!--Document START-->
<head> <!--Head START-->
<title>Page Title</title>
<style type="text/css"> <!--CSS START-->
body { background-color:red }
</style>
</head>
<body> <!--Body START-->
<h1>Page Title</h1>
</body>
</html>


The problem is you have an html comment within your css.
<style type="text/css"> <!--CSS START-->
Remove the <!--CSS START--> and it will work fine.
If you want to add comments within css then you can use /* */, e.g:
<style type="text/css">
/* CSS START */


This works for you.
body {
background:red;
}


Ahhh yes, the problem is you have a html comment in the css, so it will not work after: –


Should be:
body { background-color:red; }
(You forgot the ; after "red")

Related

How can I use code point of Bootstrap Icons?

Summary of the problem
The following image is a description of bootstrap icon.
I don't know how to use "Code point".
Unicode: U+F120
CSS: \F120
JS: \uF120
HTML: &#xF120

For Using HTML code point, All you need is just set the the font-family of your element(or your body) to 'Bootstrap-icons' and then everything will work.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.test
{
font-family:'Bootstrap-icons';
}
</style>
<body>
<div class="test">
&#xF120
</div>
</body>
</html>

I managed to find how to use CSS of "code point".
Add following html into the head element of document.
Set font-family to be Bootstrap-icons.
And you can use css code point \F120 to fill the value of content property.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<style>
h3::before {
font-family:'Bootstrap-icons';
content:'\F120';
}
</style>
The otheres (Unicode, JS, HTML) are still ununderstood.
Thank you for reading my broken English! :)

CSS background image struggles

I'm trying to add an image in background but I want to use internal CSS and I can't find what's wrong. The font is ok but the background doesn't appear.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body:{font-family: Arial}
body:{background:url("C:\Users\Sonik379\Downloads\backPortfolio.jpg");}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>

Try this:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: Arial;
background:url("C:\Users\Sonik379\Downloads\backPortfolio.jpg");
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>

There is an issue with the path, you can try this:
<style>body{background:url(file:///C:/Users/Sonik379/Downloads/backPortfolio.jpg);}</style>

can i attach css to email newsletter HTML file

I am trying to make an html news letter (email template). Can I attach a CSS file to this template? Will it work properly?

No you can add only on inline css like
<div style="color:#000">Hello</div>

look like this sample
<html>
<head>
<title>
<!--mohammad reza ashouri :megacoder999#gmail.com -->
</title>
<style>
<!--
p { color:#009900;
font-family:"comic sans ms",sans-serif; }
h1 { color:#660000; font-size:12pt; }
-->
</style>
</head>
<body>
<h1> email template </h1>
<p>I am a very basic emaol template.</p>
......
</body>
</html>

css property not found in browser when i inspect my html page?

Below i mentioned the html and css. but when i open it in browser,css property of background color and other properties not showing anything expect image.
HTML code
<html>
<head>
<title>Home Page One </title>
<meta http-equiv="Content-Type" content="type/html" charset="utf-8" />
<link href="home1.css" type="text/css" />
</head>
<body>
<header class="headerpart">
<img src="images.jpg"/>
</header>
</body>
</html>
CSS Property
body
{
background:#CCCCCC;
color:#000000;
font-size:12px;
font-family:"Times New Roman", Times, serif;
font-style:normal;
margin:0px auto;
}
.headerPart
{
background:#00CCFF;
margin:0px auto;
width:1120px;
height:30px;
}
when i run this html in browser, it shows only the image expect the css propety of background and everthing. when i inspect the html, browser showing the css property not found..
am looking solution for this problem..

CSS Classes are case sensitive. You have class="headerpart" in your html but your CSS says .headerPart with a capitol P. Change one or the other, and you should see the behaviour you want.

Add rel="stylesheet" to your link tag, like following:
<link rel="stylesheet" href="home1.css" type="text/css" />

background-image:url not showing up image for background using css

I am trying to set background image using background-image:url but its not working.
<!doctype html>
<html>
<head>
<title>MyTitle</title>
<style type="text/css">
body{
<!-- background-color:green; -->
background-image:url("background.jpg");
<!-- color:white; -->
}
</style>
</head>
<body>
</body>
</html>
Pls Help!!

<!-- comment -->
is not valid comment syntax within a CSS block. That is probably breaking your CSS rule.
Try
/* comment */

The tag doesn't nest into the tag.
Try
<!doctype html>
<html>
<style type="text/css">
body{
/* background-color:green; */
background-image:url("background.jpg");
/* color:white; */
}
</style>
<head>
<title>MyTitle</title>
</head>
<body>
</body>
</html>
And comments in CSS are defined like...
/*this is a comment*/

Resources