Change background and text color in HTML

Change background and text color in HTML - html

how do I change my background and text color? as you can see, I already put the background color black but it didn't change the color. I want to make a dark mode version. thanks. also, don't worry about the content, it's for demonstration only.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
background-color:black
}
</style>
</head>
<body>
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
Link to page 2
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
use light mode
</div>
</body>

You are adding the properties to the wrong elements, if you aim to have a total dark mode, you should target the most outer element: the body
<!DOCTYPE html>
<html>
<head>
<style>
body.darkmode{
background-color:black;
color: white;
}
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
background-color:black
}
</style>
</head>
<body class="darkmode">
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
Link to page 2
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
use light mode
</div>
</body>

You have applied background-color:black in .left class which is not mentioned anywhere in the HTML. You need to apply background-color as black to the body to have darker theme
body{
display: block;
margin-left: auto;
margin-right: auto;
background-color:black
}

Please check this:
$(document).ready(function(){
$('#dark-mood').click(function(){
$('body').css("background-color","#000");
$('body').css("color","#fff");
});
});
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
background-color:black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Click here to see dark mood
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
Link to page 2
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
use light mode
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->

body {
background-color : black;
}

Related

HTML text allignment issues

Why does my text looks like it's combined together when you run it? is there something wrong with the code? the part with the div. I'm trying to separate them. I changed the "fixed" to " bottom", it's working but it just gonna make the text going up. I'm trying to make like a watermark in the left bottom and give you an opinion where you can change the light mode into dark mode. please help me with this project. don't worry about the content, it just for demonstration.
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020</div>
<div class="footer">use dark mode</div>
</body>

You need to wrap all elements and make them fixed.
I added the .footer>* to align the children of the footer left to right. Otherwise they would be on top of each other, because div tags are filling out the hole width.
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
.footer>* {
display: inline-block;
}
<body div class="footer">
<div>Made by rama 4/6/2020</div>
<div>use dark mode</div>
</div>

You have to apply .footer class to the first div only, delete the second div because you don't need it. Here's an example.
.footer {
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</body>
</html>
</head>
<body>
<div class="footer">Made by rama 4/6/2020 use dark mode</div>
</body>
If you want to move "use dark mode" one line down, all you need to do is add an html <br> tag. Like this...
.footer {
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</body>
</html>
</head>
<body>
<div class="footer">Made by rama 4/6/2020 <br>use dark mode</div>
</body>

Wrap both of your <div> with <div class="footer">
</body>
</html>
<style type="text/css">
.footer {
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">
<div>Made by rama 4/6/2020</div>
<div>use dark mode</div>
</div>
</body>

I have done changes in his code only not added extra styling and design.
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
use dark mode
</div>
</body>

how to keep the footer down

this is the footer
#footer {
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
bottom: 0px;
top: 99%;
}
#copyright {
float: left;
font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin {
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}
<div id="footer">
<div id="copyright">
© 2016 copmpany
</div>
<div id="linkedin">
Follow us on
<a href="https://www.linkedin.com/">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
This how it looks like. This how it should look like. I don't want to use position:absolute and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.
I have tried everything, including using .container{ max-height:140%;} and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.

This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.
This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR
<!doctype html>
<html>
<head>
<!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
<!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>
Your page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Services</title>
</head>
<body>
<div class="index_wrapper">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<!------CONTENT------>
</body>
</html>
<div class="container">
<div class="service_title">
</div>
<table>
<!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
</body>
</html></div>
</body>
</html>

You can change position:absolute; to position:fixed;
Check the code in this link: https://jsfiddle.net/4qyojap2/
#footer{
background: #F3F5F6;
position: fixed;
width: 100%;
height: 30px;
padding:20px;
bottom: 0px;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}

Your css says :
bottom: 0px;
top:99%;
This is not needed as your div already is at the bottom of your HTML.
The footer will position correctly if you suppress these two lines.
New CSS here :
#footer{
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}

Have you tried this
#main-body{height:100vh;}
<header role="header">
<nav role="navigation">
Home
</nav>
</header>
<div id="main-body">
this is the main body
</div>
<footer role="footer">
this is the footer
</footer>
or you can use jQuery on it like,
//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');
Hope this help. Cheers!

Div containing a form isn't taking up the entire page

I have created a lightbox link which contains a Div. Inside the Div element there is a form, however the div isn't expanding to 100% of the page body. Does anyone know why?
Here's the code:
CSS:
<!DOCTYPE html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #C13E18;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
.form {
width: 100%;
float: left;
}
</style>
</head>
HTML:
<body>
<div id=bookingpage>
<div id="form"> <object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui</div>" style="overflow:auto;">
</object></div></div>
</body>
</html>

You're applying the style to a class called "form".
Your actual div doesn't have the class it has an ID of form. The hash tag is the ID selector.
Current
.form {
width: 100%;
float: left;
}
Should be
#form {
width: 100%;
float: left;
}
You might also have to specify 100% width for the object also:
#form, #form object{
width: 100%;
float: left;
}

#form {
width: 100%;
float: left;
}
On css, any item start with dot is class, start with # is id.

Your body script is incorrect.
<!DOCTYPE html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #C13E18;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
#form {
width: 100%;
float: left;
}
</style>
</head>
<body>
<div id=bookingpage>
<div id="form">
<object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui" style="overflow:auto;">
</object>
</div>
</div>
</body>
</html>
You placed closing div inside data url.

How to adjust the div to be beside each other even if we change the device

I am trying to adjust the divs in my application in a way that they remain beside each other in all condition, that is, Currently I am facing a problem that , when i decrease the width of the device the div start to come below the other div while with the device that have higher width have no issues. I have used viewport rendering but still there is no effect on the same .
Here id the code :
HTML:
<HTML>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Comment</title>
<link rel="stylesheet" type="text/css" href="Comment.css">
<script src="js/angular-1.0.7.js"></script>
<script src="js/Myangular.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="imageIcon"><img style="height:30px;width:30px;"src="images/male-shadow-circle-512.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
body
{
margin : 0px;
padding: 0px;
}
.main
{
margin-top:10px;
}
.imageIcon
{
display:inline-block;
float:left;
margin-left:18px;
background-color: green;
}
.contentDiv
{
display:inline-block;
float:left;
margin-left:12px;
margin-right:10px;
background-color: blue;
}
.nameAndId
{
background-color: aqua;
}
.commentDetails
{
margin-top:8px;
background-color: red;
}
.updateTime
{
float:right;
margin-top: 16px;
background:silver;
}
Fiddle link :
http://jsfiddle.net/tvaibhav/rta9LLfw/

You could use display: table on .main and display: table-cell on .imageIcon and .contentDiv to prevent that. Instead of margin, you could use border-spacing property on parent(.main).
Play Ground
#CHARSET"ISO-8859-1";
body {
margin: 0px;
padding: 0px;
}
.main {
display: table;
border-spacing: 10px;
}
.imageIcon {
display: table-cell;
vertical-align: top;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
background-color: blue;
}
.nameAndId {
background-color: aqua;
}
.commentDetails {
margin-top: 8px;
background-color: red;
}
.updateTime {
float: right;
margin-top: 16px;
background: silver;
}
<body>
<div class="main">
<div class="imageIcon">
<img style="height:30px;width:30px;" src="http://www.lorempixel.com/30/30" alt="UserMale" />
</div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>

You can simply use the display: flex; property with your main div:
.main {
margin-top:10px;
display: flex;
display: -webkit-flex;
}
Here's a Demo fiddle, that works fine with all widths.
Take a look at W3School Tutorial here and try it here.

centering an element using html-css

My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.

You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/

For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Change background and text color in HTML - html

You have applied background-color:black in .left class which is not mentioned anywhere in the HTML. You need to apply background-color as black to the body to have darker theme body{ display: block; margin-left: auto; margin-right: auto; background-color:black }

body { background-color : black; }

Related

HTML text allignment issues

how to keep the footer down

Div containing a form isn't taking up the entire page

How to adjust the div to be beside each other even if we change the device

centering an element using html-css

Categories

Resources