How to apply different styles to fields in a single form with CSS
The HTML<input> tag has many different types. In this case if you apply a style for <input> tag it will be the same for your text fields, checkboxes and buttons. The next test files and picture illustrate this:
File test.css
form {
border: 1px dotted #aaaaaa;
padding: 3px 6px 3px 6px;
}
input {
color: #00008B;
Form elements without style are displayed according to browser and operation system defaults. The form shown in the next picture is displayed according to Mozilla Firefox’s default style on Windows 7 operating system.
A Web form without style
The next test file is used for the form above:
File Test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
How to add more than one background image to Web page with CSS
You cannot add more than one background image to your Web page. It is possible to give the effect of multiple background images by applying a background to elements that are nested, such as the <html> tag and the <body> tag. This effect is achieved with the next CSS test file:
File test.css
html {
background-image: url(BMWLogo.gif);
You can use CSS code to fix the position of the background image while the content scrolls over it. This effect is achieved with the next CSS test file:
File test.css
body {
background-color: #FFFFFF;
background-image: url(psy.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;
background-attachment: fixed;
}
h1 {
text-align: center;
font: 24px Arial, Helvetica,Geneva …
When you add a single, not-repeating background image to your Web page, it appears, by default, in the top left corner of the viewpoint. You can set the image to be displayed anywhere else on the page, by using CSS property background-position. The next CSS test file centers the image on the page:
File test.css
body {
You can set a background image for a web page by using CSS properties. The next file shows rules you can use:
File test.css
body {
background-color: #ffffff;
background-image: url(psy.jpg);
background-repeat: no-repeat;
}
h1 {
text-align: center;
font: 24px Arial, Helvetica,Geneva ,Verdana, sans-serif;
}
p {
text-align: center;
font: 14px Arial, Helvetica,Geneva ,Verdana, sans-serif;
Your Web project may include pictures used to illustrate the text. In this case you may want to border these pictures. Adding a border to an image is a simple task using CSS. The next example shows two possible ways to do this:
File test.css
img {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
or
File test.css
img {
You can display the list items horizontally by changing the display property of the <li> tag to inline. You can use the following files to test this:
File test.css
ul.horiz li {
display: inline;
}
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to display a list horizontally with CSS</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
The article How to change bullets on list items with CSS describes possible values you can set when you want to manage style of bullets in your Web project. When you want to remove the indentation entirely so that the list will align left with any other content, you can use the setting from the next …
When you want to use an image for a bullet in your project, you can follow the next steps:
1. Create your image.
2. Use the list-style-image property which accepts a URL, which supports the path to your image file as a value.
You can use the next two files to test this:
File test.css
ul {
list-style-image: …