CSS Font Text Styles

Heading Tags Info

You can use settings in a CSS Style Sheet to change the way your text looks by setting the Font name and size, Underline and Bold instead of using inline font tags all the time.

The standard bold and underline are pretty basic and do not do a lot within a customised layout. How would it look if you could change the colours, weight and the appearance of an underline, or even the strikethrough.

Here is an example of above ideas. You can change underline to look like this by using a CSS Style Sheet notice how the underline is now dashed and coloured red. You can also do a similar thing with the bold style, your text will stand out more if you could change the colour again to Bold using CSS in blue, the options are endless.

 

 

Underline and Bold Code

Below is the code, change the colours and font size to your own choice, just use the normal tags when adding to your pages.


<style type="text/css">
u {
font-size: 12px;
text-decoration: none;
border-bottom:1px dashed #CC0000;
}
b {
font-size: 12px;
font-weight: bold;
color: #006600;
}
</style>

This shows CSS Text Style in bold.
You can also go a little further by combinig both the bold and underline for your text.


How do I make CSS Double Underline

There are a few ways of doing this and here is the most common one.

 

<style type="text/css">
.double {
border-bottom: #800080 3px double;
}
</style>

 

Here is the code to place around the text you wish to underline:-

 

<span class="double">Double Underline</span>

 

Here is the Double Underline example.