Here is my sample printable application form that that allow my user to fill in their information and print it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pritable Document</title>
<style>
p{
font-size: 20px;
}
.fillin {
border-bottom: 2px dotted #888;
font-weight: bold;
line-height: 12px;
}
</style>
</head>
<body>
<p>
Name:<span class="fillin">Jonh Nathon</span>
</p>
<p>
Gender:<span class="fillin">Male</span>
</p>
<p>
Date of Birth:<span class="fillin">10-July-1990</span>
</p>
</body>
</html>
The dotted point (...) as the fillable space looks fine on the browser, however when I print it out, it does not look the same as on browser. It something like a square and asterisk, instead.
How can I fix this problem in CSS as I use border-bottom style dotted already? Thanks.
try to use the predefined html way to do it!
<!DOCTYPE HTML>
<html>
<head>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
</style>
</head>
<body>
Name: <u class="dotted">John Nathon</u>
</body>
</html>
Related
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
In the index.html file I am able to do this an it works as designed:
<!DOCTYPE html>
<html>
<head>
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
My partner would like to keep the background-color in our css file user-interface.css. Which makes sense to me but it is not working as I would expect.
When I enter the background-color it doesn't show up and leaves my background-color as white.
What am I missing?
* Universal Settings */
.body{
background-color : AE8E4A0;
font-family: Arial;
}
/* Search bar */
.heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/`enter code here`
Thanks
Scott
You have a minor error on your code. You should not put the dot (.) in front of body as it is not a class name, it's an element. Same for the heading. So your code should be like:
/* Universal Settings */
body{
background-color : #AE8E4A0;
font-family: Arial;
}
/* Search bar */
heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/
<!DOCTYPE html>
<html>
<head>
<link href="cssfilename.css">
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
Also, you would need to link your CSS to your HTML file. Not that the "cssfilename.css" need to be replaced by the filename of your css file, and they need to be in the same directory.
added to CSS background-color: #A8E4A0; and verified the link in my htlm was correct
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My first Website!</title>
<style>
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
If you want the style in a seperate .css file, try this:
/* style.css */
/* Needs to be in the same folder/directory as the .html file is. */
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<title>My first Website!</title>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
New to HTML. During a book exercise, I was commenting some code using Notepad++ editor and I noticed that when I commented above a segment, that the rendering in the browser is changed (I thought HTML comments do not affect the rendering at all).
What I am attempting to do is simply change a block color to yellow within a black border using classes and the "div" element. When I comment, the block becomes white, instead of yellow (which it appears WITHOUT the comment). I again, restate that the ONLY thing I change is the comment to cause this discrepancy Can someone explain to me what is happening/what I am doing wrong? Thank you.
(This is the code that works: it changes my box to yellow)
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
.div-box-yellow{
background-color: yellow;
}
</style>
<body>
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
(This is the commented code that nullifies my yellow box color )
<DOCTYPE! html>
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
<!--comment-->
.div-box-yellow{
background-color: yellow;}
</style>
<body>
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
You are writing the comment in the CSS style tag which needs /* instead of <!-- for block comments. Using the <style> is basically like a css file rather than a html file.
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
/* how to block comment css comment */
.div-box-yellow{
background-color: yellow;}
</style>
<body>
<!-- how to block comment html comment -->
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
I am using auto growable div to display code. It shows a line of space above the code and a line of space below the code. I want to remove it. I tried my best but failed. Can you please help it. I thank you for your all support. Here is image of how it looks -
image of output
This is my code
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code" id="text">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
You can adjust the spacing in the html.
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
<div class="code" id="text">
<xmp> <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html></xmp>
</div>
give margin and padding 0px
element { margin: 0px; padding: 0px; }
Use this if your okay with it. Hope it helps you. Thank you.
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
xmp {
margin: 0px;
line-height: 1;}
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code" id="text">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
or you can use negetive margin like
xmp{margin:-15px;}
xmp {
margin-top: -15px;
margin-bottom: -15px;
}
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty