CSS Text Tips

Remove the underline from links

No Underline Text Link

CSS

.a {text-decoration:none}

HTML

<a href="index.html">Click Here</a>

Change colour on mouseover

Change Colour

CSS

a:link { color:#616165;}

a:hover {color:#6372CD;}

HTML

<a href="#.html">Change Colour</a>

Set an image as the list-item marker

CSS

ul {
list-style: square inside url('arrow.gif')
}

HTML Markup

<ul>
<li>Ladder</li>
<li>Paint</li>
<li>Brush</li>
</u>

Note:square inside above means if the user has image display disabled, the list uses square bullets.

HR Line

CSS

hr {
border: 0;
color: #747289;
background-color: #747289;
height: 1px;
width: 100%;
}

HTML Markup

<hr class="hr"/>

Include both the color and background-color attributes in the style sheet as not all browsers will understand them. Browsers that understand both, will draw a border around the element so it is important to use the height attribute to control this.

Background Colour

This has a background colour of #E9C9C9 This has no background colour.

CSS

span.highlighttext
{
background-color:#E9C9C9
}

HTML

<span class="highlighttext">This has a background colour of #E9C9C9</span>

Capitalized Text

This capitalizes first character of each word

CSS

p.capitalize {
text-transform: capitalize
}

HTML

<p class="capitalize">Text Here</p>

Indented Text

This text has been indented 50 pixels

CSS

.indent {
text-indent: 50px;
}

HTML

<div CLASS="indent">Text goes here</div>

Drop Caps

There are a few variations around for drop caps, this one has very little code and can be altered very quickly. Be careful when using certain letters like "A" and "L"

The CSS

.dropcap { float:left; color:#62629C; font-size:60px;
line-height:45px; padding-top:1px; padding-right:2px; font-family: verdana, arial;

The HTML

<span class="dropcap">T</span>rest of text continues here.

Another version From Manderin designs

Sed imperdiet auctor tortor. Etiam iaculis tortor id quam. Donec mauris quam, sollicitudin in, porta dapibus, mattis sed, enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus congue. Nunc mollis ante eget ante. Proin dignissim nulla non leo. Ut laoreet purus a quam porttitor malesuada Etiam iaculis tortor id quam. Donec mauris quam, sollicitudin in, porta dapibus, mattis sed, enim.

The CSS

.dropcapsmanderin
{
margin-right:6px;
margin-top:5px;
float:left;
color:#756D6D;
background:#E3E1E1;
border:1px solid #595959;
font-size:80px;
line-height:60px;
padding-top:2px;
padding-right:5px;
font-family:times;
}

The HTML

<span class="dropcapsmanderin">R</span>est of text
<div style="clear:both;"><br></div>

Using An Image

utem magna in suscipit accumsan consequat in nulla dolore, exerci iusto eum amet accumsan iusto nostrud dolore feugiat velit. Te odio nisl velit, erat, dolore qui. Praesent hendrerit, elit minim blandit suscipit facilisi vero nonummy dolore exerci, ea ullamcorper enim volutpat delenit, augue elit vulputate.

The text returns back under the graphic by adjusting the height in the css.

The CSS

.lettera {float:left; height:4.0em; margin-right:0.2em; margin-bottom:-0.4em; position:relative; top:-0.2em;}

The HTML

<span class="lettera"><img src="your image.gif" width="??" height="??" alt="letter? "border="0" /></span> text continues here
magpie-button (3K)You can now be the owner of this highly imaginative button? Just save the image and use this link http://www.cssmagpie.co.uk