I'm a total newbie to coding, just trying to create a circle for a course, but it's not working. Can someone help and suggest what I'm doing wrong?
<!doctype html>
<html>
<head>
<title>JavaScript Lesson</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle = {width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}
</style>
</head>
<body>
<div id="circle"> </div>
</body>
</html>
Everything is fine, except that = in <style> tags. Just remove that.
#circle {width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}
Related
I'm a total beginner at coding and my first problem I can't figure out is that when I use CSS sheet as a change of h1 and h3 color it basically doesn't change.
I tried to set a <h1> text color in CSS sheet and it didn't change.
body {
background-color: #EEEEEE;
}
h1 {
color: blue;
}
h3 {
color: blue;
}
hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
<h1>H1</h1>
<hr/>
<h3>H3</h3>
That's my HTML code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kacper's Personal Site 💲</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<table>
for background color it works properly.
If you have created a separate file of CSS then link your CSS file to an HTML file like <head><link rel="stylesheet" href="style.css"></head>,see here https://www.freecodecamp.org/news/how-to-link-css-to-html/
When you use a separate CSS file, you need to link that CSS file to the html document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>H1</h1>
<hr/>
<h3>H3</h3>
</body>
</html>
I am using Telerik to generate a textbox. Now I would like to equip this with an animation.
The problem is that Telerik wraps a span around the input, so I don't know how to change the hr element when the input is focused.
My Code:
span.inputanimation {
width: 100%;
}
// Here is what i dont know how to do !
span.inputanimation > .input > input:focus hr.underline {
width: 100%;
}
hr.underline {
width: 0%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr class="underline">
</span>
</body>
</html>
I removed some of the CSS classes and HTML Properties so it is better to look at.
My Telerik Code:
<span class="inputanimation">
<TelerikTextBox #bind-Value="Value"
Id="#Id"
PlaceHolder="#Label"
Class="input">
</TelerikTextBox>
<hr class="underline" >
</span>
Looking at various posts on hover and focus, it seems that the two elements have to be related, such as child or sibling. Which would be easy if you weren't using Telerik.
One solution is to use javascript. I am using ids to show the concept.
let search = document.getElementById('Vorname');
let ruler = document.getElementById('Ruler');
search.onfocus = function(){ ruler.style.width = '100%'; }
span.inputanimation {
width: 100%;
}
hr.underline {
width: 0%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr id="Ruler" class="underline">
</span>
</body>
</html>
Another solution is to use focus-within
span.inputanimation {
width: 100%;
}
span.inputanimation:focus-within hr.underline {
width: 100%;;
}
hr.underline {
width: 10%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr id='Ruler' class="underline">
</span>
</body>
</html>
I'm trying to create a square whereas if the square gets clicked the background color of body element gets changed. But the code doesn't seem to work.
Here are the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}
You will need to use JavaScript to do this in the following way:
let sq = document.querySelector('.square');
sq.addEventListener('focus', ()=>{
document.body.style.backgroundColor = 'yellow';
});
.square {
width: 100px;
height: 100px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>
HERE WE GO!
use this in script:
function myFunction() {
document.body.style.backgroundColor= "yellow";
It will change pre-decided color to yellow
do not forget to call this fuction via button or link
customize button/link as you want
Check sample code below ---- Run snippet code
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>
As #AHaworth pointed out it's not possible to go up in the hierarchy to select the parent element.
Probably the best solution is to use JavaScript as answered by Master Yushi.
However, there's sort of a CSS-only solution if you change a layout a bit. Using the general sibling combinator it's possible to select a sibling element if it comes somewhere after the .square in HTML. So you can add a new div to wrap the entire page inside it. And make .square position: absolute; and position it wherever you need it. It might or might not work for you depending on the page layout you need.
Here's a demo:
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>
Also, one way of doing it is through JQuery. Firstly add JQuery plugin to your HTML code and then add this code to your script.
$(".square").click(function(){
$("body").css("background-color", "yellow")
});
Is this something you wanted? I have added [onclick="document.body.style.backgroundColor ='yellow'] after the body tag. I hope it works for you!
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>
I have the below HTML. For some reason the page is being rendered with the head as text like:
Document
* { display: block; width: 300px; } textarea { height: 300px; }
My Form
I've been searching for an explanation and think it could be because there is an error in the code in the head tag, so the never gets called and it is treated as part of the body, but I can't see any problem with it and VSCode doesn't show any errors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
You can't use display, width and some more properties in "* (universal selector)". Replace * with body selector, it will work :)
I run your code on my system and the header is coming out bold just like it should... maybe you have to clear your browser cookies or try to open the code on an incognito window
.......
then for the
Document
{ display: block; width: 300px; } textarea { height: 300px; }
that is showing, i guess its an error so i removed the "*" and everything works fine... the working code is below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
{
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
I have the following code below however am confused as to why the div element rightnav appears below the div element leftnav if I apply a width property to it. What am I doing wrong or have I misunderstood the use of floats?
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>DIV example</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: Arial, Verdana, sans-serif;
font-size: 100%;
}
#content {
width: 700px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#leftnav {
float: left;
width: 200px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
#rightnav {
border-width: 1px;
border-color: #000000;
border-style: solid;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="leftnav">left nav</div>
<div id="rightnav">right nav</div>
</div>
</div>
</body>
</html>
Output
Now if I amend the code as follows by applying the property width to the declaration rightnav, the element appears below leftnav. I thought that it may have to do with the width of the div element content however there is sufficient width with the combination of both div elements i.e. 200px + 200px < 700px
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>DIV example</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: Arial, Verdana, sans-serif;
font-size: 100%;
}
#content {
width: 700px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#leftnav {
float: left;
width: 200px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
#rightnav {
width: 200px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="leftnav">left nav</div>
<div id="rightnav">right nav</div>
</div>
</div>
</body>
</html>
OUTPUT
In your first example, #rightnav is not floating, but it stays at the right because it hasn't a clear:left; rule. See here: http://jsfiddle.net/5sHdg/
In your second example, when you specify a width for #rightnav, the browser has a explicit rule about the div's size, so it renders it as a block element should. But it doesn't float next to #leftnav because it lacks a float:left; rule. See here: http://jsfiddle.net/Br4Lm/
So rememeber:
Use float in every div that needs to be positioned besides another one, thus overriding it's block element appearance.
If you expect to have a div element below divs that re floating, be sure to include clear:both; (left, right, or both);
Adding overflow: hidden to #rightnav will solve your problem. http://jsfiddle.net/Wexcode/gCVaz/
An explanation of why this works can be found here: http://colinaarts.com/articles/the-magic-of-overflow-hidden