Working with CSS Stylesheets
Getting to style your content beautifully, consistently, and with tremendous flexibility is one of the great rewards of composing modern, well-structured HTML. Switching from one stylesheet to another can dramatically change the look and layout of an HTML page. Centralizing your styling description in one or a few shared stylesheet files allows you to restyle an entire site of pages without having to revise all of your HTML content.
TypeMetal’s stylesheet picker enables you to associate a CSS stylesheet file with an HTML file, or optionally embed a copy of a stylesheet in your HTML file. TypeMetal also provides a few bundled style sheets to help you get started styling your content.
When you’re working with a WordPress project, your WordPress site’s “theme”, and the HTML templates and CSS stylesheets that comprise it, determine how your content looks. You can also use TypeMetal’s “Clear View” mode to switch into a simplified, uncluttered view that helps you focus on writing and editing.
Read more about using your WordPress site’s theme with TypeMetal.
Picking a Style Sheet
When an HTML document window’s toolbar is shown, it usually includes a style sheet picker control, that looks like this:
The main part of the picker indicates the HTML file’s associated primary style sheet, if any.* If the HTML file has no associated style sheet, the picker shows “(Plain HTML)”.
* An HTML file can have more than one associated stylesheet. TypeMetal’s style sheet picker provides a simple and convenient way to see and modify a file’s primary style sheet association. Often a single style sheet association is all you need (especially given that a style sheet can @import other style sheets), but if you need to work with more complex, multi-style-sheet relationships, you’ll want to make those modifications using a plain-text editor.
The button on the right side of the picker provides a convenient way to open the selected style sheet for viewing and editing. It will open using the default application that’s configured to open .css files on your system.
Clicking on the main part of the picker shows a pop-up menu, that gives you the opportunity to choose one of the style sheets known to TypeMetal. When you choose a different style sheet, the rendered appearance of your page will change accordingly.
If the HTML file has an associated style sheet, it is indicated with a checkmark in the popup menu, as “ExampleSectionedPage.css” is in the above screenshot.
If you want to remove an HTML file’s primary style sheet association, choose the first menu item: None (Browser Default Styles). This causes the file’s content to be shown using the default styling that WebKit provides for unstyled HTML.
TypeMetal’s bundled style sheets are listed next in the menu. They provide a few different built-in looks you can choose from.
TypeMetal’s bundled style sheets provide general styling of HTML elements, without any dependency on knowing the particular structure of a page. When you choose one of these style sheets, TypeMetal points the HTML file to a copy of the style sheet that resides in TypeMetal’s app bundle.
The style sheet picker’s menu also gives you a way to choose another .css file that isn’t in the list (Choose Other Style Sheet…), and a way to embed a copy of the currently selected style sheet in your document (Embed Copy in Document). If the selected style sheet is one of TypeMetal’s bundled style sheets, you’ll also see an “Export Copy…” menu item, that enables you to save a copy of the style sheet to a .css file, and have your HTML file reference that exported copy instead. This can be useful when you want to publish your HTML file(s) for others to read. Just upload the .css file to your web server, in the same path relative to the HTML file(s) that reference it as on your computer.
Using the “Main Style Sheet” Submenu
The File menu’s Main Style Sheet item provides the same functionality as the style sheet picker, but is always available, even when an HTML window is set to hide its toolbar.
Bundled Style Sheets
TypeMetal provides a few bundled style sheets to help you get started styling your HTML. These are always listed first in the style sheet picker menu.
When an HTML file is using one of TypeMetal’s bundled style sheets, it references the bundled style sheet via an absolute path. If you want to publish your HTML file where others can see it, you can export a copy of the bundled style sheet and reference the exported copy instead, or embed a copy of the bundled style sheet in your document. (Exporting a copy is usually the preferred method, as it keeps your HTML files smaller and keeps them referencing a central .css file that can then be easily updated.)
TypeMetal’s bundled style sheets are designed to provide general styling of all HTML elements, that doesn’t depend on any foreknowledge of a how a document will be structured, or what sequences or nestings the document’s elements will commonly appear in. When you’re ready to get more advanced in your document styling, you may want to start working with modified copies of them that incorporate your own changes. Or, you’re always free to start over with other style sheets — from 3rd party style templates, or of your own design.