Science Library - free educational site

Style Sheet Basics

Emails can be styled using HTML. There are considerable incompatibilities between browsers and servers, making the process a little precarious. Here are some general guidelines for safer practice in creating custom email layouts.

External stylesheets are not supported. In a website, standard practice is to separate structure and styling, by means of an included .css file from another part of the site (a good place is a folder called 'css' in the root of the domain). In an email, the information is embedded into a frame of another website - either a mailbox on the server, on in a webserver, such as Outlook, on a client's computer at home.

However, images can be called from a remote domain.

<img style="border: 0; margin: 4px;" src="http://www.transalpine.ch/images/trans_logo_transalpine.png" alt="Transalpine logo" width="200" height="200" />

What does not work so easily are background images. Background colour may be added safely. However, it is best to avoid dark backgrounds, since if the styling is overridden by the mailserver, browser or client, the text may become illegible, since light font colours are used with dark backgrounds. Style so that a default white background still looks fine.

<tbody style="background: none repeat scroll 0 0 #fffded;">

...

//all the table except the table tags themselves

</tbody>

Font styling:

Use tables for multi-celled/column layout. Tables are more understandable by all the various systems attempting to interpret the email format, than the usual HTML column system, using div and float.

<table cellspacing="0" cellpadding="10" width="100%" border="0" style="width:100%;">

<tbody>

<tr>

<td>Image 1

</td>

<td width="246" valign="middle" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:14px">Text 1

</td>

</tr>

<tr>

<td width="560" valign="top" style="width: 560px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; color: #222222; border-collapse: collapse;">Text 2

</td>

<td>Text 3

</td>

</tr>

</tbody>

</table>

Link Tags

To remove the default dotted line around links, add outline: none; to the link styles.

Styling backgrounds

To have the colour of the background transition across the div element, add the folowing code to the div styling:

background: -webkit-linear-gradient(to right, transparent, red, blue, white); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(to right, transparent, red, blue, white); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(to right, transparent, red, blue, white); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, transparent, red, blue, white); /* Standard syntax (must be last) */

Specificity

Specificity in CSS cascade stylesheets refers to the degree to which a style is specifically assigned to elements on an HTML page. This is done via selectors:Mozilla Developer CSS Selector Reference

Span

The span element is a means of styling a short section of a page in a special way that is limited to the content between the span...span opening and closing tags.

This is normal (inherited) color, but this <span style="color:red">red text</span> is styled red.

This is normal (inherited) color, but this red text is styled red.

Span elements can also be styled by adding a class or id:

This is normal (inherited) font, but this <span class="large_letter">large text</span> is styled with large lettering in the css file.

This is normal (inherited) font, but this large text is styled with large lettering in the css file.

CSS can set the text to any font-face from a file provided:

@font-face {

font-family: morpheus;

src: url(http://fonts.zumguy.com/morpheus.ttf);

}

Content © Renewable.Media. All rights reserved. Created : October 7, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Trigonometry

View this item in the topic:

Vectors and Trigonometry

and many more articles in the subject:

Subject of the Week

Computing

Information Technology, Computer Science, website design, database management, robotics, new technology, internet and much more. JavaScript, PHP, HTML, CSS, Python, ... Have fun while learning to make your own websites with ScienceLibrary.info.

Computer Science

Great Scientists

Maurice Wilkins

1916 - 2004

Maurice Wilkins, 1916 - 2004, molecular biologist, was 'the third man of the double helix', as his biography title declares. Born in New Zealand, but did most of his professional work in England, Wilkins shared the Nobel Prize with Crick and Watson.

Maurice Wilkins
Vitruvian Boy

Quote of the day...

Bangladesh and the Maldives are facing a fate far worse than that caused by even the worst of wars. Forces beyond their control, set in motion by the polluting action of others - actions not intended to be harmful, but whose effects are global and destructive - threaten them with annihilation.

Renewable.Media Internet Promotions

IT information forum by Sean Bone