CSS Tutorials

How to use accesskey hints with CSS

You may need to include access keys in your Web forms to allow users to jump quickly to a certain place by pressing a combination of Alt and another key. The operating system convention that indicates which letter of a key word is its access key is to underline the given letter.

You can use a similar technique on …

Learn more

How to group related things with CSS

You can group related things by using the <fieldset> and <legend> tags. The  tags are a great way to group related information in a form. These tags provide an easy means to group items visually, and are understood by screen readers and text-only devices, which can see that the tagged items are logically grouped together. The …

Learn more

How to lay out a two-column form with CSS

You can lay out your forms without table. In the markup used to create your form you should wrap each row in a <p> tag>.  The next test file shows this:

 

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 lay out a two-column form with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link …

Learn more

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;

Learn more

How to style form elements with CSS

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>

Learn more

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);

Learn more

How to scroll content over background image with CSS

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 …

Learn more

How to position a background image for a web page with CSS

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 {

Learn more

How to set a background image for a web page with CSS

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;

Learn more

How to add border to images with CSS

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 {

Learn more