CSS Tips and Techniques

CSS Tips

Using Cascading Styles Sheets (CSS) with EditMe is relatively easy. The first step is to log in to your EditMe account with Administrator rights and then select Site Settings. Once you get to the Settings page, select the last item in the Settings dropdown list - Styles. The Styles page that displays will allow you to select from a number of different "canned" styles or you can insert the CSS source for your own styles. This page is dedicated to designing your own styles.

If you're new to CSS, review the list of resources towards the bottom of this page. If you can afford it, definitely pick up a copy of Style Master 3 to help you create style sheets. Style Master costs about $50.00 US and is downloadable. The thing about style sheets is that every browser interprets the CSS code you write in a different way - most browsers support some features - but no browser supports everything. Style Master 3 tells you right there in the editor how well supported the CSS code you're working on. There's advices for various versions of Netscape (Mozilla), Microsoft IE and Opera.

EditMe and CSS

The EditMe Layout

Call up any typical EditMe page, then right click on it and select View Source - this will display the raw HTML code for the page. If the page isn't too complicated, you should be able to pick out how the page is organized. The default EditMe template divides a page into four <TABLE> columns. The menu for the site is contained in the first column or <TD>, followed by a spacer <TD> element. The main content for the page - the text you enter into the page's editor - is loaded into the third <TD>. The fourth <TD> is reserved for the EditMe tools.

Keep in mind that EditMe allows you to position the site's menu in a number of different areas on the page, so if you're aren't using the default, you'll have to look at the table in detail to see how the page layout is arranged.

Styling The EditMe Tools

If you're still looking at the HTML source, scroll down and take a look at the last <TD> element. It will look like this:

<td valign="top" width="100">

followed directly by an anchor tag "<a href="blah blah bla". This last <TD> element contains the entire right hand side of the EditMe Page. So, to style the EditMe tools, you'll need to tell CSS to "select" them. You can do this in any number of ways, but all of the tools (except for the Hide/Show Tools) are contained in a <DIV> element that has a class attribute that's always set to the value "menubox". So, we can use a CSS "class selector" to style just those things that are in the "menubox" <DIV> element. For instance, to make the tools smaller, you could simply do the following CSS:

Pixel Units and Accessibility

The other measurement unit in common use on the web is px units. This measurement is based on the size of a font in pixels. Pixel units disable the ability of your users' browser to change the size of text on the page. Readers with impaired vision use their browsers' text size setting to enlarge fonts to make them more readable. Specifying pixel units in your styles effectively keeps them from being able to do this. The article Elastic Design details many of the issues related to creating flexible, re-sizeable web pages.

div.menubox {font-size:.8em;}

The "div.menubox" is like saying "apply the following styles for each of the items in all div elements that have the menubox class".

In the example, the font-size property is set to ".8em". em units are used for specifying font sizes. Different browsers deal with the size of a font in a variety of different ways. Using em for the specification of measurement units works well for most browsers. Using em units also make your pages re-sizeable (in Microsoft IE, select the View Menu and then select a Text Size).

Fonts and their family names and their sizes and other metrics is almost an art in itself. If you're new to web design, you are strongly encouraged to study fonts in detail. The best place to find out about fonts is to review the articles at A List Apart.

Horizontal Rules

In looking at the source of a typical EditMe page, you might notice that EditMe places horizontal lines here and there to break up the text. If you want to remove them, you might find it difficult because there realy isn't an option to do this. However a little CSS makes getting rid of them a snap:

hr {display:none;}

Inline Styles

Using a site wide style sheet is easy, just follow the simple instructions at the beginnig of this article. But sometimes you may just want a particular style for just one thing and you don't want to use the site style sheet or maybe you're just not ready for that (it does take a while to learn the full blown approach). You can style specific items on a specific page by opening up the EditMe Editor and then click the Toggel HTML Source ("<>") tool.

Locate the tag that contains the item you're interested in and add the following attribute to the tag:

style="(enter your CSS properties here)"

So for example, to float an image to the right (make text flow around the left of an image), switch to HTML view and then locate the <IMG> tag and add the following attribut to the end of the tag:

<img src="http://mysite.editme.com/files/somepage/someimage.1.png" style="float:right;">

As a matter of fact, in order to make this article's side bar called "Pixel Units and Accessibility" to float correctly on this page, an adjustment to the style attribute was needed. This side bar was created as a normal two row table. Then, the Table Properties tool was used to style the table. The Float feature in the Table Properties dialog incorrectly specifies cssFloat for the attribute. So, after specifying all of the properties including the Float property, HTML view was used to change the attribute to float:right; If you edit this page and switch to HTML view you can see the change.

Page Titles

Iconico makes a neat little product called WebTools Pro that you can use to dissect any web page. If you use the Page X-Ray feature of that tool (or view the page source) on any given EditMe page, you might notice how an EditMe page title is laid out. With the 3rd TD of page layout, you'll see another table. This table consists of a single TD cell and in that cell is a small form called "subMenuForm". That form consists only of a single level 1 header H1.

To alter the style of your page's title, you'll need to work with the H1. If you use more than one H1 in the body of your page, you'll need to distinguish between them in your CSS by using a descendent selector:

form h1{background-color=#f7ffff;}

The descendent selector instructs the browser to locate a Form tag element and applies the style to any H1 tag within that element. Because we are qualifying our rule so that the H1 has to be in a form, we can ensure that only the page heading will be altered and not your user's H1 entries (of which you may have no control over at all).

Note Because of the way EditMe works with page titles, you won't be able to use an inline style. This is because when you view the HTML source in the EditMe editor, you only see the source for the entries that you actually write in the editor. So to work with your page's title, you'll need to modify the style sheet listed under Site Settings.

Side Bars

You may have noticed that this page has little text boxes that hug the right margin. These "side bars" can really give your page a professional look and they are styled after what you might find in a magazine. One type of side bar is mentioned ealier in this article and deals with resetting the "float" of a table. Using tables for side bars is fairly clummsy and the EditMe editor almost gets it right without having to look at code.  But for now, we still have to look at the HTML.

So rather than using tables, you create a side bar by wrapping a section of the text you type in within a DIV element and then use an inline style to position the DIV (and subsequently all of the text inside it).

The first step is to write up the text. Type your text into the EditMe as simple paragraphs and headers just as you normally would. This is the single most difficult step for new designers to grapple with. It is counter-intuitive to first type the text in and then format. After some practice and some trial and error, you'll discover that it's so much easier to concentrate on what you want to say first and then style it.

After you've got your text, click the Toggle HTML Source button and locate your text.  Then wrap all of it within a DIV element:

Save your work so you can see what it does. Psyche! It doesn't do anything, now does it? Well, actually it does, it's just that an unstyled DIV looks invisible. Semantically, a DIV merely specifies that its contents form a section (or DIVision) of a document. So, let's give our div a little style:

<div style="position:relative;float:right;"><p>Many developers reserve a level 1 header for the display of the page title and the convential wisdom is to not use an H1 for anything else. There's nothing wrong with using H1 in...</p></div>

[Got called away, will finish real soon]

Resources

CSS Links

Link	Description	Submitted By	Active
Style Master	Excellent CSS Editor and Tutorials/Courses	Scott L Holmes	Yes
Web Style Guide	Excellent book on designing professional looking web sites. Written by Patrick Lynch and Sarah Horton.	Scott L Holmes	No
W3C CSS	The definitive source for all things related to CSS	Scott L Holmes	Yes
W3Schools CSS	Extensive tutorials on CSS - some good some not so good. Great place for beginners but once you learn the basics, go back to w3c.org	Scott L Holmes	No
A List Apart	An excellent source of detailed high quality information on a wide variety of web design. Most of the contributors are interested in doing things the "Right Way". The problem is there's more than one right way!	Scott L Holmes	Yes
CSS-Style	FORUM: Fairly active users forum. Informal place for beginners and advanced users to compare notes and ask for help.	Scott L Holmes	Yes
css-discuss	FORUM: Very active CSS users forum. The link takes you to the archive. Beginners may feel a bit intimidated. Visit the css-discuss Wiki to learn CSS in a big way.	Scott L Holmes	Yes
The CSS Saga	Brief history of CSS, Chapter 20 from the book Cascading Style Sheets, designing for the Web written by Håkon Wium Lie and Bert Bos.	Scott L Holmes	No
Iconico	Shareware tools, makers of WebTools Pro, Screen Calipers and ColorPic.	Scott L Holmes	Yes
The Giant List	Literally hundreds of high quality links to articles about designing with web standards	Scott L Holmes	Yes

Comments