Join the forum discussion on this post

In this reference we will look at how to control text appearance using style sheets. CSS gives you precise control over typography in your Web pages, allowing you to set parameters such as the spacing between lines, words and even letters, and the alignment and indenting of text.

We’ll look at the different text properties that can be used with CSS, and explain each property with some real-world examples. Each example is displayed as it would render in your browser.

There are eight properties that can be used to control text appearance - word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent and line-height. Let’s look at each of these properties in turn.

word-spacing

This property controls the amount of space added to the default spacing between each word. The allowable values are:

Value	Example
normal	{ word-spacing: normal; }
length	{ word-spacing: 5mm; }

normal will select the default word spacing.

length will add the specified value to the default word spacing. length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these.

Examples:

  p { word-spacing: 1em; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

letter-spacing

This property is similar to word-spacing, but controls the spacing added between each individual letter. Possible values are:

Value	Example
normal	{ letter-spacing: normal; }
length	{ letter-spacing: 0.1mm; }

normal will select the default letter spacing.

length will add the specified value to the default letter spacing. length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these.

Examples:

  p { letter-spacing: 0.1em; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

  p { letter-spacing: 0.1cm; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

text-decoration

The text-decoration property allows you to control decorations that can be added to the text, such as strike-throughs, underlining, and (heaven forbid!) blinking. Possible values are:

Value	Example
none	{ text-decoration: none; }
underline	{ text-decoration: underline; }
overline	{ text-decoration: overline; }
line-through	{ text-decoration: line-through; }
blink	{ text-decoration: blink; }

Examples:

  p { text-decoration: underline; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

  p { text-decoration: line-through; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

vertical-align

This property controls the vertical placement of the text. It’s similar to the valign attribute in HTML. The allowable values are:

Value	Example
baseline	{ vertical-align: baseline; }
sub	{ vertical-align: sub; }
super	{ vertical-align: super; }
top	{ vertical-align: top; }
text-top	{ vertical-align: text-top; }
middle	{ vertical-align: middle; }
bottom	{ vertical-align: bottom; }
text-bottom	{ vertical-align: text-bottom; }
percentage	{ vertical-align: 25%; }

The following 6 values are relative to the parent element:

baseline aligns the baseline with the parent’s baseline. This is the default.

middle aligns the vertical midpoint of the element (e.g. an image) with the baseline plus half the x-height of the parent. The x-height is the height of the letter ‘x’ in the context of this line of text..

sub displays the element as subscript text.

super displays the element as superscript text.

text-top aligns the top of the element with the top of the font used for the parent element.

text-bottom aligns the bottom of the element with the bottom of the font used for the parent element.

The next two values are relative to the line that the element is in, as opposed to the parent element:

top causes the top of the element to be aligned vertically with the tallest element on the line.

bottom causes the bottom of the element to be aligned vertically with the lowest element on the line.

The final value, percentage, specifies a percentage of the element’s line height (see the line-height property below). It raises or lowers the baseline by a percentage of the line-height above the baseline of the parent. For example, a value of 50% will raise the baseline to halfway between the parent’s baseline and the baseline of the line above. A value of -100% will lower the baseline to the same height as the baseline of the line below.

Examples:

  span { vertical-align: super; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

  span { vertical-align: sub; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

  span { vertical-align: 100%; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

text-transform

text-transform controls the case of the text. You can transform all the text into capitals or lowercase, or just capitalize the first letter of each word. The options are:

Value	Example
capitalize	{ text-transform: capitalize; }
uppercase	{ text-transform: uppercase; }
lowercase	{ text-transform: lowercase; }
none	{ text-transform: none; }

capitalize uppercases the first character of each word, while uppercase and lowercase transform the whole text into all upper-case or lower-case characters respectively. none removes all transformations from the text and displays it as-is.

Examples:

  p { text-transform: uppercase; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

  p { text-transform: capitalize; }  

`Take some more tea,’ the March Hare said to Alice, very earnestly.

text-align

This property is similar to the align attribute in HTML. Options are:

Value	Example
left	{ text-align: left; }
right	{ text-align: right; }
center	{ text-align: center; }
justify	{ text-align: justify; }

left, right and center perform the same actions as their HTML counterparts. justify creates columns of text that are aligned along their left and right edges, like the text in a book.

Examples:

  p { text-align: center; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

  p { text-align: justify; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

text-indent

This property allows you to indent the first line of text in a paragraph. The options are:

Value	Example
length	{ text-indent: 3cm; }
percentage	{ text-indent: 5% }

A length is specified using the CSS length units such as em, px, cm and pt. For a full description of these.

percentage is a percentage of the parent element’s width.

Examples:

  p { text-indent: 5em; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

line-height

The final text property, line-height, controls the distance between lines of text. Possible values are:

Value	Example
normal	{ line-height: normal; }
number	{ line-height: 1.5; }
length	{ line-height: 0.5cm; }
percentage	{ line-height: 125%; }

normal sets the line height to the default or inherited value, while specifying a number results in a line height of the default value multiplied by that number.

A length is specified using the CSS length units such as em, px, cm and pt. For a full description of these.

percentage is a percentage of the element’s font size.

Examples:

  p { line-height: normal; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

  p { line-height: 2; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

  p { line-height: 150%; }  

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

Credit for this and for original copy please see http://www.elated.com/articles/css-text-properties/

Join the forum discussion on this post

We have just started a new customer support page that has video tutorials to help you with the common tasks and questions for your websites

To veiw the tutorials please click here

The importance of the actual design of a website is sadly misunderstood, Its is in-fact important that a site is easily navigated for the visitor, easy for a child to navigate around to find pages and products you may have.

The actual design and layout must also be relevant to the audience you are trying to attract, We have many other articles on our site explaining this in more detail, please check them out and give them a read to get a good successful website and website design.

Post a reply with your opinions

Purpose

It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.

Audience

Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website - the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:

• Audience Characteristics
• Information Preferences
• Computer Specifications
• Web Experience

Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.

Content

Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience’s needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site’s content ensures that the wants/needs of the target audience and the purpose of the site will be fulfilled.

Compatibility and restrictions

Because of the market share of modern browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024×768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox and Opera) users allow for more W3C compliance and thus a greater range of options for a web designer.

Another restriction on webpage design is the use of different Image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG’s advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.

Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.

Planning documentation

Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website - a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.

First, the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a site map. This creates a visual of how the web pages will be interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of diagramming the website structure:

• Linear Website Diagrams will allow the users to move in a predetermined sequence;
• Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination;
• Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.

In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.

Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning.

To be accessible, web pages and sites must conform to certain accessibility principles. These can be grouped into the following main areas:

• use semantic markup that provides a meaningful structure to the document (i.e. web page)
• Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
• use a valid markup language that conforms to a published DTD or Schema
• provide text equivalents for any non-text components (e.g. images, multimedia)
• use hyperlinks that make sense when read out of context. (e.g. avoid “Click Here.”)
• don’t use frames
• use CSS rather than HTML Tables for layout.
• author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)

However, W3C permits an exception where tables for layout either make sense when linearized or an alternate version (perhaps linearized) is made available.

Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with high-speed internet and the use of vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.

orks

After the browser wars subsided, and the dominant browsers such as Internet Explorer became more W3C compliant, designers started turning toward CSS as an alternate means of laying out their pages. CSS proponents say that tables should be used only for tabular data, not for layout. Using CSS instead of tables also returns HTML to a semantic markup, which helps bots and search engines understand what’s going on in a web page. All modern Web browsers support CSS with different degrees of limitations.

However, one of the main points against CSS is that by relying on it exclusively, control is essentially relinquished as each browser has its own quirks which result in a slightly different page display. This is especially a problem as not every browser supports the same subset of CSS rules. For designers who are used to table-based layouts, developing Web sites in CSS often becomes a matter of trying to replicate what can be done with tables, leading some to find CSS design rather cumbersome due to lack of familiarity. For example, at one time it was rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions. With the abundance of CSS resources available online today, though, designing with reasonable adherence to standards involves little more than applying CSS 2.1 or CSS 3 to properly structured markup.

These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, some people continue to use old browsers, and designers need to keep this in mind, and allow for graceful degrading of pages in older browsers. Most notable among these old browsers are Internet Explorer 5 and 5.5, which, according to some web designers, are becoming the new Netscape Navigator 4 - a block that holds the World Wide Web back from converting to CSS design. However, the W3 Consortium has made CSS in combination with XHTML the standard for web design.

Flash is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet. Flash is much more restrictive than the open HTML format, though, requiring a proprietary plugin to be seen, and it does not integrate with most web browser UI features like the “Back” button.

According to a study,[2] 98% of US Web users have the Flash Player installed,[3] with 45%-56% (depending on region) having the latest version.[4] Numbers vary depending on the detection scheme and research demographics.[5]

Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally “jazzed up”. Some application designers enjoy Flash because it lets them create applications that do not have to be refreshed or go to a new web page every time an action occurs. Flash can use embedded fonts instead of the standard fonts installed on most computers. There are many sites which forgo HTML entirely for Flash. Other sites may use Flash content combined with HTML as conservatively as gifs or jpegs would be used, but with smaller vector file sizes and the option of faster loading animations. Flash may also be used to protect content from unauthorized duplication or searching. Alternatively, small, dynamic Flash objects may be used to replace standard HTML elements (such as headers or menu links) with advanced typography not possible via regular HTML/CSS (see Scalable Inman Flash Replacement).

Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. This is because many search engine crawlers rely on text to index websites. It is possible to specify alternate content to be displayed for browsers that do not support Flash. Using alternate content also helps search engines to understand the page, and can result in much better visibility for the page. However, the vast majority of Flash websites are not disability accessible (for screen readers, for example) or Section 508 compliant. An additional issue is that sites which commonly use alternate content for search engines to their human visitors are usually judged to be spamming search engines and are automatically banned.

The most recent incarnation of Flash’s scripting language (called “ActionScript”, which is an ECMA language similar to JavaScript) incorporates long-awaited usability features, such as respecting the browser’s font size and allowing blind users to use screen readers. Actionscript 2.0 is an Object-Oriented language, allowing the use of CSS, XML, and the design of class-based web applications.

Some designers choose to control the appearance of the elements on the screen by using specific width designations. This control may be achieved through the use of a HTML table-based design or a more semantic div-based design through the use of CSS. Whenever the text, images, and layout of a design do not change as the browser changes, this is referred to as a fixed width design. Proponents of fixed width design prefer precise control over the layout of a site and the precision placement of objects on the page. Other designers choose a liquid design. A liquid design is one, like Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. Proponents of liquid design prefer greater compatibility and using the screen space available. Liquid design can be achieved through the use of CSS, by avoiding styling the page altogether, or by using HTML tables (or more semantic divs) set to a percentage of the page. Both liquid and fixed design developers must make decisions about how the design should degrade on higher and lower screen resolutions. Sometimes the pragmatic choice is made to flow the design between a minimum and a maximum width. This allows the designer to avoid coding for the browser choices making up The Long Tail, while still using all available screen space. Depending on the purpose of the content, a web designer may decide to use either fixed or liquid layouts on a case-by-case basis.

Similar to liquid layout is the optional fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the content of the page without changing the arrangement or text wrapping when the browser is resized.

In the early stages of the web, there wasn’t as much collaboration between web designs and larger advertising campaigns, customer transactions, social networking, intranets and extranets as there is now. Web pages were mainly static online brochures disconnected from the larger projects.

Many web pages are still disconnected from larger projects. Special design considerations are necessary for use within these larger projects. These design considerations are often overlooked, especially in cases where there is a lack of leadership, lack of understanding of why and technical knowledge of how to integrate, or lack of concern for the larger project in order to facilitate collaboration. This often results in unhealthy competition or compromise between departments, and less than optimal use of web pages.