Set The Background Color of A Page

Set the background color of a page
<html>
<head>
<style type="text/css">
body
{
background-color:"PINK";
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Set an image as the background of a page
<html>
<head>
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
How to position a background image
<html>
<head>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<p>W3Schools background no-repeat, set postion example.</p>
<p>Now the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the
text.</p>
</body>
</html>
How to repeat a background image only horizontally
<html>
<head>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body><h1>Hello World!</h1>
</body>
</html>
fixed background image (this image will not scroll with the rest of the page)
<html>
<head>
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try
</body>
</html>
to
to
to
to
to
to
to
to
to
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
down
down
down
down
down
down
down
down
down
the
the
the
the
the
the
the
the
the
page.</p>
page.</p>
page.</p>
page.</p>
page.</p>
page.</p>
page.</p>
page.</p>
page.</p>
All the background properties in one declaration

<html>
<head>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<p>Now the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the
text.</p>
</body></html>
Set the text color of different elements
<html>
<head>
body {color:red;font-size:20px}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in
the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
Align the text

<html>
<head>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning
over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the
people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Try to resize the browser window to see how justify works.</p>
</body>
</html>
Remove the line under links

<html>
<head>
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.w3schools.com">W3Schools.com</a></p>
</body>
</html>
Decorate the text

<html>
<head>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
Control the letters in a text

<html>
<head>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
specify the space between characters

<html>
<head>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind
ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this
world haven't had the advantages that you've had.'</p>
</body>
</html>
Specify the space between lines

<html>
<head>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
</body>
</html>
Increase the white space between words

<html>
<head>
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>
Set the font of a text

<html>
<head>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Set the size of the font

<html>
<head>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>
</head>
<body>
</body>
</html>
Set the size of the font in px

<html>
<head>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>

<p>Specifying the font-size in px allows Firefox, Chrome, and Safari to resize the text, but not Internet
Explorer.</p>
</body>
</html>
Set the size of the font in em

<html>
<head>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>

<p>Specifying the font-size in em allows Internet Explorer, Firefox, Chrome, and Safari to resize the text.
Unfortunately, there is still a problem with IE. When resizing the text, it becomes larger/smaller than it
should.
</p>
</body>
</html>
Set the style of the font

<html>
<head>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>
Set the boldness of the font

<html>
<head>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
All the font properties in one declaration

<html>
<head>
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>
<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>
</html>
COLOR LINK
<html>
<head>
a:link {color:#FF0000;}
/* unvisited link */
a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;}
/* mouse over link */
a:active {color:#0000FF;}
/* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

Set The Background Color of A Page

Uploaded by

Copyright:

Available Formats

Set The Background Color of A Page

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Set The Background Color of A Page

Uploaded by

Copyright:

Available Formats

Set the background color of a page

All the background properties in one declaration

Align the text

Remove the line under links

Decorate the text

Control the letters in a text

specify the space between characters

Specify the space between lines

Increase the white space between words

Set the font of a text

Set the size of the font

Set the size of the font in px

<h1>This is heading 1</h1>

Set the size of the font in em

<h1>This is heading 1</h1>

Set the style of the font

Set the boldness of the font

All the font properties in one declaration

a:visited {color:#00FF00;} /* visited link */

/* mouse over link */

You might also like