asp.net 4.0

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

How to display a list horizontally with CSS

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″ />

Learn more

How to remove the indented left margin from a list with CSS

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 …

Learn more

How to use an image for a list item with CSS

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: …

Learn more

How to indent text with CSS

Sometimes you need to indent text in your web page. In this case you can apply a rule to the container that sets a  padding-left value. You can follow this CSS ASP.NET tutorial and to use the next two files to test this:

 

File test.css

.indent {

padding-left: 40px;

}

 

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” …

Learn more

How to specify horizontal rule style with CSS

When your web site includes horizontal rules you can use CSS code to change their color, height and width. In this case for example the CSS code is the following:

File test.css

hr {

border: none;

background-color: #E6E6E6;

color: #000000;

height: 2px;

width: 70%;

}

You can use the next file to test:

 

File test.html

 

<!DOCTYPE html …

Learn more

How to change bullets on list items with CSS

You can use the CSS list-style-type property when you need to specify the style of bullets used in your lists. In the next test file one of the possible options is used.

File test.css

ul {

list-style-type: circle;

}

Note: You can use also one of the following values:

– disc

– decimal

– decimal-leading-zero

– square

Learn more

How to change text to all-capitals with CSS

You can use the CSS text-transform property when you need to change text to all-capitals.

File test.css

.uppercase

{

text-transform: uppercase;

}

You can use the next file to test:

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 change text to all-capitals with CSS</title>

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

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

Learn more

How to justify text with CSS

When you want to justify text you have to alter the spacing between the words so that both the right and left margins are straight. You can use CSS to create this effect.

File test.css

p {

text-align: justify;

font: 14px Arial, Helvetica,Geneva ,Verdana, sans-serif;

line-height: 1.5;

}

Other values for text-align are:

– right – aligns …

Learn more