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

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

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 – […]

How to change the line-height on my text with CSS

You can use the CSS line-height property when the default space between lines of text box looks a little narrow. The next CSS code shows this.

File test.css
p {

font: 16px Arial, Geneva, Helvetica, sans-serif;

line-height: 2.0;

}

Note: You can specify the line-height using standard CSS units of measurement, such as ems or pixels, […]

How to highlight text on the page without using font tags with CSS

You can create a class for the highlighting style and apply it by wrapping the highlighted text with <span> tags that apply the class:

1. You can create a CSS .hilite class.

File test.css

body {

font: 1em

Arial, Helvetica,Geneva, Verdana, sans-serif;

}

.hilite {

background-color: #FFFFCC;

color: #B24422;

}

2. You can apply the […]

How to remove all space between a heading and the paragraph that follows it with CSS

Browsers render a gap between heading and paragraph tag, by applying default top and bottom margins to these tags. If you want to remove all space between a heading and the paragraph that follows it, you have to remove the bottom margin from the heading and the top margin from the paragraph. The easiest […]

How to underline headings with CSS

There are two possible solutions:

1. You can use the text-decoration property. This method allows you to underline the text in same color as the text itself. In this case you can use the following code.

File Test.css

h2 {

How to add a background color to a heading with CSS

You can add a background color to any element, including a heading.  You can use the next CSS rule for all level two headings in a document:

File test.css

h2 {

background-color: #F4C90A;

color: #0C0C0D;

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

padding: 2px;

}

Note: You can use the padding to adjust the […]

How to display two different style of link on the same page with CSS

To demonstrate how to create multiple styles for links, you can take the code used in the article How to create a link that changes color on mouseover with CSS:

a:link, a:visited {

text-decoration: underline;

color: #6A5ACD;

background-color: transparent;

}

a:hover, a:active {

text-decoration: underline overline;

color: #191970;

background-color: #C9C3ED;

}

These style should be […]

How to create a link that changes color on mouseover with CSS

You can create this effect, by styling the :hover and :active pseudo-classes differently than the other pseudo-classes of the anchor tag. Your links will display in blue color #6A5ACD if the next style is applied:

 

a:link, a:visited, a:hover, a:active {

text-decoration: underline;

color: #6A5ACD;

background-color: transparent;

}

 

You can make out :hover and :active […]

Recommended ASP.NET Examples