I have one problem: I have simple HTML code and CSS code, but the CSS doesn't work... Please, can you told me, when I have something wrong?:
<html>
<head>
<link rel="icon" type="image/ico" href="http://eslgfx.net/nodelogo/lol_small.ico"/>
<title> LOL (fake :D) </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body link="#CDA221" vlink="lime" alink="#CDA221">
<body background=http://i.imgur.com/0TugbQI.png">
<h1> My page </h1>
<form name="form" method="post" action="file:///C:/Documents%20and%20Settings/Filip/Desktop/formular.html">
<br> Please, enter your personal data:<br>
Name: <input type="text" name="meno" maxlength="20"><br>
Password: <input type="password" name="password" maxlength="20"><br>
<input type="submit" name="Send" value="Odoslať">
<style type="css">
input[type="submit"] {
background: url(data:image/jpeg;base64,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);
width: 200px;
height: 50px;
border: 0;
}
<style>
</form>
</body>
</html>
The out put is:
I want to change "submit" button appearance. Please help.
You can use:
<style type="text/css">
instead of:
<style type="css">
Also, you just need one <body> tag and you're missing open " for background value:
<body background="http://i.imgur.com/0TugbQI.png"link="#CDA221" vlink="lime" alink="#CDA221">
<!-- ------------^ Missing " here -->
as well as closing your <style> tag using </style>
<style type="css"> is inconsistent across browsers!!
do it this way
<style media="screen" type="text/css">
/* css styles*/
</style>
or simply :
<style>
/* css styles*/
</style>
you haven't closed your <style> tag too!! :)
Merge the two tags to one
<body link="#CDA221" vlink="lime" alink="#CDA221" background=http://i.imgur.com/0TugbQI.png">
Use "text/css" instead of "css"
Put the <style> tag into the <head> tag.
Related
I want to change my textbox size using HTML, for now I only have this as my
<!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>
body {
background-color: grey;
}
</style>
</head>
<body>
<label>Enter your question:</label><br>
<input type="text" id="myquestion" placeholder="Your question here"><br>
<button type="button" id="mybutton">Submit</button>
<script src="script.js"></script>
</body>
</html>
First of all, how do I connect my css file with my HTML file? my css file name is style.css
Second, how do I change <input type="text" id="myquestion" placeholder="Your question here"><br> size using css? I kinda wanna at least use css because for now I know nothing about css. It'll be really good if you guys can help me. Thanks!
You can load your CSS file in your HTML page by adding the following line within the <head> tag:
<link rel="stylesheet" href="style.css">
When you say you want to change the size of the input, I assume you mean you want to change its width. You can do this using:
#myquestion {
width: 400px;
}
To learn about HTML and CSS, I highly recommend going through W3Schools.
This is not working in google chrome. Any idea why?
<html>
<head>
<style type="css/text">
#wrapper{display:none}
</style>
</head>
<body>
<div id="wrapper" >
This is a test this is a test
</div>
</body>
</html>
css/text should be text/css.
<style type="text/css">
In HTML5, however, a style element's type will default to "text/css" if it isn't specified, so depending on which browsers you're supporting you could drop it altogether.
Style tag should be:
<style type="text/css">
Or even better, remove it!
<style>
you should change
<style type="css/text"> to <style type="text/css">
it's text/css not the other way around. :P
remove this attribute:
type="css/text"
Following code will work.
<style type="text/css">
#wrapper{display:none}
</style>
</head>
<body>
<div id="wrapper" >
This is a test this is a test
</div>
</body>
For some odd reason when I try styling this html page with a backround in css nothing appears.
Any Ideas on how to fix
-Thanks
<html>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
<style>
body {background-color:#b0c4de;}
</style>
</body>
</html>
It should look something like this (notice I moved the style tag within the head tag):
<head>
<style>
body{
background-color:#color;
}
</style>
<head>
Why is your style tag in your <body> tag? It should be in the <head> tag:
<html>
<head>
<style type="text/css">body { background-color: red; }</style>
</head>
<body>
</body>
</html>
Or even better, put your css in a separate .css file.
First of all that's not how css works or how html works. You should put your style tags in html head section. And you should determine html element where you want to set background-color.
<html>
<head>
<style>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<title>Test</title>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
</html>
Usually the syntax is like so:
<html>
<head>
<style>
body { background: #121212; }
</style>
</head>
</html>
With the style tag in the head tag.
You will want to move your <style> tag inside of your <head> tag.
Try this code:
CODE
<style>
body {
background-color:#b0c4de;
}
</style>
<body>
<b><font color="#F91212"><center>Test</center></font></b>
<br><b><center><font color="#FF0000">Have Fun!</font></center></b></br>
<br><b><font color="#FF0000"><center>Join now for free by clicking here </center></font></b></br>
<br><center><img src="test.jpg"></img></center></br>
</body>
SAMPLE
http://jsfiddle.net/Uy2Zb/
Chrome seems to not like having an overflow on certain input fields, it causes some very strange results. Use the following code to replicate. I don't understand why there is an offset.
<!doctype>
<html>
<head>
<title>Test</title>
<style type="text/css">
input {
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" />
<select><option>Hello</option></select>
<input type="submit" value="Ok..." />
</body>
</html>
I am a php programmer.
I am not able to decrease the size of a few text boxes in my html form, they are in the same .
Read these examples - http://www.w3schools.com/css/css_reference.asp#dimension
<html>
<head>
<style type="text/css">
input {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" />
</body>
In this case all html "input types" would have height 100x and width 200px. Instead if you use a "class" you style only those elements which are assigned that specific class.
<html>
<head>
<style type="text/css">
.tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" class="tb"/>
<br />
<input type="text" />
</body>
You can also use an "id" for that specific html element. Ids should be unique in an html page
<html>
<head>
<style type="text/css">
#tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" id="tb"/>
<br />
<input type="text" />
</body>
If you are using CSS, a simple width and height property work just fine.
textarea {height:100px; width:100px; }
You also can write this way,
<html>
<head>
<style type="text/css">
input[type=text] {height:50px;width:200px;}
</style>
</head>
<body>
<input type="text" />
</body>
You can also specify the rows and cols attributes of the textareas to control their size. Rows are the horizontal lines and cols is the number of characters wide you want the texarea to be
<textarea name="myText" rows="10" cols="80">Enter some text</textarea>
Provides a fairly short and wide textarea.