CSS Font Order

When designing web pages, using the appropriate font for your design does wonder to the overall look, feel and layout of your page. Unfortunately, web designers are quite limited to the fonts they can use. Most web designers stick to the tried and true “web safe” fonts.

If you take all considerations including operating systems: Windows, Mac OS X, Linux, Unix, and browsers: IE, Firefox, Safari, Opera, etc, then you are really stuck with just 3 of the safest fonts on the web. They are: Arial/Helvetica, Times New Roman/Times, and Courier New/Courier.

Other fonts that work across platforms are: Palatino, Garamond, Bookman, and Avant Garde.

Fonts that work in Windows and Mac OS, but not in Unix+X are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, and Impact.

If you like to consider all OS platforms in your design, then the order of your fonts in CSS is important. I recommend this sequence.

Establish a Baseline

At the very least, you need to establish your baseline font. Choose whether you want “Serif or Sans-Serif” font. The CSS would look something similar to this:

html { font-family: Serif}
html { font-family: Sans-Serif }

Choose a Web Safe Font

Next, choose a “web safe” font. Your choice comes down to either taking Arial/Helvetica, Times New Roman/Times, and Courier New/Courier. Most people don’t use the monotype Courier font except when displaying code. So, you are essentially down to four fonts, Arial/Helvetica or Times New Roman/Times. Helvetica is very popular. Arial is not far behind. New Times Roman is better than Times. In our example, will now look like this:

html { font-family: Times New Roman, Serif }
html { font-family: Arial, Sans-Serif }

Choose a Cross-Platform Font

If you must, you can choose a “cross platform font.” Again, our choices are: Palatino Linotype, Garamond, Bookman, and Avant Garde. The first 3 are Serif fonts. Avant Garde is the only Sans-Serif font.

html { font-family: Palatino Linotype, Times New Roman, Serif }
html { font-family: Avant Garde, Arial, Sans-Serif }

Add Other Fonts

If you must, you can choose other fonts, although they do not work in Unix+ systems. They are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black and Impact.

html { font-family: Georgia, Palatino, Times New Roman, Serif }
html { font-family: Verdana, Avant Garde, Arial, Sans-Serif }

There you have it. A safe way to implement CSS Fonts across all OS platforms.

Black-Letterhead 1.6

Black-Letterhead 1.6 featured with a sample header image.


Black-Letterhead 1.6 is now available. The latest version now supports WordPress 2.7 which comes with several enhancements. The bulk of the WordPress 2.7 enhancements is in the redesign of the administration page – the Dashboard. It sports a new vertical menu bar on the left side with lots of new features too numerous to mention here.

Download.

The new Black-Letterhead 1.6 theme have these new features:

Threaded Comments

Black-Letterhead 1.6 takes advantage of one of the latest enhancements of WordPress 2.7, particularly in the area of threaded comments. Threaded comments are replies within a reply. Replies are placed directly underneath a reply instead of at the end of the list. Threaded replies are also indented to display a thread discussion.

Threaded comments will need to be enabled in the `Settings – Discussion` for the threaded comments to show up on the screen. Once enabled, you will see `Reply` links on every comment. Clicking on the `Reply` makes the comment form jump to that particular comment. `Click here to cancel Reply` will restore the comments form to the bottom.

In addition, Black-Letterhead 1.6 was coded to be downward compatible, meaning it will work with older versions of WordPress, not just WordPress 2.7. The theme contains a code that detects if a new function in WordPress 2.7 called wp_list_comments() is available. If it is, the script will load `comments.php.`

If your blog is running an older version of WordPress, then the theme will run the `legacy.comments.php` file. This is where the old comments.php code is stored. The code here is essential to keeping the Black-Letterhead downward compatible to older versions of WordPress.

Colors and Page Widths

I’ve added a several new features to Black-Letterhead 1.6.  The use of alternate stylesheets and a tiny Javascript allows for the theme to be styled with various colors and page widths. The change is instantaneous with just a click of mouse. The color options available are: the original orange color, red, blue, green, yellow, purple and teal. The two page widths are `default` and `wide` set at 760 and 960 pixels wide respectively.

To change colors or page widths, just click on `Preferences` located at the bottom of the Sidebar. The script sets a cookie in the user’s browser for a period of 365 days. If the cookie gets deleted, it will revert back to theme’s default setting. Cookies allow for browsers to remember the user’s preference for a period of 365 days.

Rotating Header Images

Another feature in 1.6 is the support of multiple and rotating header images. To add a header image(s), just place a 960x200px header image or images in the `images` folder. The script automatically detects an image and will display it. If more than one image is present, the script will randomly display the headers. If there are no images, the theme displays in normal mode.

Black-Letterhead 1.6 comes with a sample header image in the `images` folder. Just delete the image if you don’t want it. If you want rotating headers, just place 2 or more images in the same folder. The rotating script will randomly display the header images. If you use the Firefox browser, you may have to press Ctrl-F5 to refresh the screen.

As always, for support questions, please visit the Support Forum.

Download.

Display None In CSS

One of the coolest tricks in CSS is to suppress the display of certain elements in your web page using the “display:none” property. This trick is extremely helpful for two reasons. One, there are times you don’t want to remove code essential for Search Engine Optimization such as the H1 header for example, but you don’t want it showing up on your browser.

Deleting the HTML code will completely eliminate it from a seach engine perhaps losing valuable points. Suppressing the display may be your best option since search engines are still able to read your H1 header. It’s just not displayed on the screen. To suppress the display of H1 in this example, we need to add this CSS code to our stylesheet.

h1 {display:none;}

The second use for “display:none” in CSS is for printing purposes. Often times, many web designers will make a separate stylesheet just for printing. Items such as graphics, menus, certain divs that are not necessary can be suppressed making for a very simplified print output. You can do something similar to your web page using the code below.

img, #menu, #widget {display:none;}

Display:none. Give it a try.

Firefox Web Developer Extension

The Web Developer Extension is a plugin extension for the Firefox browser. It’s a great tool for web designers or for anyone who owns and manages their own website. Here are some of the Web Developer’s features:

Features

  • It has a Disable function to turn on and off cache, Java and Javascript, disable page colors, pop-up blockers, minimum font-size and referrals.
  • It has a Cookie function which allows you to clear, delete or view a cookie. It’s great for troubleshooting authentication. You can also clear session cookies, delete domain cookies and delete domain paths.
  • The CSS section allows you to edit CSS on the fly without uploading styles to the server. If there are multiple CSS regardless of type whether they be inline, print or embedded. You can enable or disable one type or several types or any other combination. You can also enable the CSS box model.
  • The Forms section has a feature which allows you to manipulate form elements, remove maximum lengths, view passwords, enable form fields, auto complete, clear radio buttons, populate form fields, etc.
  • The Images section allows you to disable images, display alt attributes, image dimensions, file sizes, image paths and find broken images. In addition you can also hide images, background images, make it full size, invisibile or replace images with Alt attributes.
  • The Information section allows you to display abbreviations, access keys, anchors, block sizes, div orders, element information, id and class details, link details and a whole bunch more. You can also display table depth and table information, title attributes, topographic information and a lot more.
  • The Outline section will display frames, headings, links, tables, block size elements, deprecated elements, positioned elements as well as outline current elements and custom elements. It can display element names when outlining.
  • The Resize section allows you to display different window sizes, e.g. 800×600, 1024×768, 1280×1024 or any custom size you want. You can display windows size or windows size in the title. In addition, it also has a zoom in and a zoom out feature.
  • The Tools section allows you to validate CSS, feed, HTML, links, section 108 and WAI. It has a DOM inspector, an error console and a Java console. It can display page validation, validate local HTML or CSS.
  • View Source allows you to display HTML source code, view a frame or from a generated source.
  • Finally, Options allows persist features.

Download

If you are running Firefox, you can download the Web Developer extension from Firefox’s website. Double click on the downloaded item and the Firefox browser will automatically add the extension for you. A restart of your Firefox browser is necessary for the extension to work. You can validate the extension is working by clicking Tools – Add-Ons form your Firefox menu. Check the Web Developer Toolbar on your Firefox browser.

Playing With CSS

The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. There is no need to upload your new CSS code to the server every time you want to try something new. The Web Developer tool saves you time when playing around with CSS.

gPHPEdit

Gnome is a desktop environment for GNU/Linux or UNIX computers. Gnome comes standard with a handy text editor called Gedit. The Gedit text editor is simple and easy to use, but it lacks the features essential to be a programming editor. Introducing gPHPEdit, a PHP, CSS and HTML development editor. It comes with syntax highlighting, coding assistance, syntax checking, code navigation and integrated help.

gPHPEdit will recognize PHP and HTML files and will color highlight the file during editing. It recognizes all PHP functions up to and including PHP 4.3.0. gPHPEdit will also recognize CSS files and will color highlight the file during editing. It highlights valid CSS classes and descriptors. gPHPEdit also recognizes SQL files and will color highlight the file during editing.

You can learn more about the features of gPHPEdit from its website.

To install gPHPEdit, simply run this command from the terminal:

# sudo apt-get install gphpedit

The only thing I found annoying at the outset was the right hand edge guide, but I was able to remove it by editing Preferences. I also activated WordWrap as a matter of preference since I don’t like using horizontal scroll bars.

CSS Class vs ID

When I first learned CSS, the biggest challenge for me was learning the difference between “ID” and “CLASS” selectors. I struggled with the concept until I learned that “ID” selectors are unique and can only be used once in a page layout. On the other hand, “CLASS” selectors can occur multiple times in a single page layout. A good example of using the “CLASS” selector is using it for posts or articles which can occur many times in a single page. See some examples below.

ID Selectors

ID selectors are unique. They occur only once in a page layout. A good use for an ID selector are headers, footers, menus, sidebars, etc. Remember, it’s must be unique and can NOT be repeated in a page.

<div id="header">
header info here
</div>

Apply CSS to ID selectors by using the # pound sign. I associate “ID” selectors to an ID Card or a Drivers License which contains a unique number. Therefore IDs have unique numbers and uses the # pound sign.

#header {
padding: 10px;
margin: 2px;
}
#footer {
color: #555;
font-size: 12px;
}

CLASS selectors

CLASS selectors on the other hand, occur multiple times in a page such as divs for posts, articles, etc.

<div class="content">
content here....
</div>
<div class="content">
content here....
</div>

Apply CSS to CLASS selectors by using the . period sign. I associate CLASS selectors to a “class period” like in a school enviroment — a class period. The CSS code under .post in this case will apply to every instance of the CLASS selector.

.post {
padding: 10px;
margin: 2px;
}

I hope this short article clears up some of the confusion between ID and CLASSES for first time CSS coders. I hope it gives you a much clearer picture as to which selectors to use when designing your next page layout.

New Color Scheme

I have a new color scheme inspired by the Daily Color Scheme website. It is called Mountain Dawn. I recently added the WordPress Theme Toolkit to my theme. The toolkit is a script for making WordPress themes customizations. New color schemes can be applied via the Admin Dashboard without ever touching the CSS stylesheet. It allow users to change color schemes on the fly with just a few clicks. If you like to see it in action, you can download the latest Black-Letterhead 1.3 theme which comes equipped with the WordPress Theme Toolkit.