Page History

{scrollbar:no-css=true}
h1. Text Styles CSS

*{excerpt}This short tutorial provides numerous examples showing how to improve text styles...{excerpt}*

One of the key factors in making content look nicer, especially text-heavy content, is the subtle styles that can be applied to text. We've provided several common customisations that have been applied to numerous {builder}-themed sites...

h2. Font and Size

The most obvious customisation is the font and size of your body text, for example:

{noformat}
body, p, td, span.smalltext, li {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
}
{noformat}

This simple style, that sets the [font attributes|http://www.w3schools.com/css/css_font.asp|More info...] of all common text (including text in lists), instantly allows you to completely change the look of all your content.

h2. Line Spacing

Often overlooked, the spacing between lines makes a huge difference to the look of your content:

{noformat}
body, p, li {
 line-height:1.6em;
}

ul {
 line-height:1.6em;
}
{noformat}

By setting a slightly bigger [line-height|http://www.w3schools.com/css/pr_dim_line-height.asp|More info...], your content instantly looks less text-heavy. In addition, if you use emoticons or other icons in your content then the increased spacing between lines reduces the liklihood that lines will become unevenly spaced.

h2. Common Text Styles

Although {confluence} provides several additional text styles which can be used in your content, the default browser styles are normally used for them which might result in less than desirable output.

As shown in our tutorial on [AtlassianConfluence:Basic Text Formatting], some subtle enhancements can make all the difference:

{noformat}
cite:before { content: "\""; }
cite:after { content: "\""; }
cite, cite:before, cite:after {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
}

ins {
background-color: #DBFFDB;
}

del {
background-color: #FFE5E5;
}

i, em {
letter-spacing: 1px;
}
{noformat}

These styles customise ??citations??, +inserted+ and -deleted- text as well as _italic_ text which is obtained using the following wiki markup:

{noformat}
These styles customise ??citations??, +inserted+ and -deleted- text as well as _itlaicitalic_ text:
{noformat}

Note: As we've just spotted, something's changed in {confluence} 2.x and as a result the style for inserted text no longer works. Atlassian are aware of the issue and we'd greately appreicateappreciate your [vote on the corresponding issue ticket|http://jira.atlassian.com/browse/CONF-5437|Please vote...].