It’s possible to edit source files directly within Chrome and save the result to a local file. Even better — changes can be applied immediately without refreshing the browser. Thanks chris, that’s not css tricks its css magic. Sadly creating new lines seems impossible (at least in ff 3.6 mac). But I suppose that it will not be very difficult to change that.
Good web design is often about good typography. Since so much of a web page's content is presented as text, being able to style that text to be both attractive and effective is an important skill to possess as a web designer. Unfortunately, we do not have the same level of typographic control online that we do in print. This means that we cannot always reliably style text on a website in the same way that we could do so in a printed piece.
One common paragraph style that you do see often in print (and which we can recreate online) is where the first line of that paragraph is indented one tab space. This allows readers to see where one paragraph begins and another ends.
How To Put A Css Tab For Text Edit In The Machine
You don't see this visual style as much in web pages because browsers, by default, display paragraphs with space underneath them as a way to show where one ends and another begins, but if you want to style a page to have that print-inspired indent style on paragraphs, you can do so with the text-indent style property.
The syntax for this property is simple. Here is how you would add a text-indent to all the paragraphs in a document.
Customizing the Indents
One way you can specify exactly the paragraphs to indent, you can add a class to the paragraphs you want indented, but that requires that you edit every paragraph to add a class to it. That is inefficient and does not follow HTML coding best practices.
Instead, you should consider when you indent paragraphs. You indent paragraphs that are directly following another paragraph. To do this, you can use the adjacent sibling selector. With this selector, you are selecting every paragraph that is immediately preceded by another paragraph.
Since you are indenting the first line, you should also make sure that your paragraphs don't have any extra space between them (which is the browser default). Stylistically, you should either have space between paragraphs or indent the first line, but not both.
Negative Indents
You can also use the text-indent property, along with a negative value, to cause the start of a line to go to the left as opposed to the right like a normal indent. You may do this if a line begins with a quotation mark so that the quote character appears in the slight margin to the left of the paragraph and the letters themselves still form a nice left alignment.
Say, for instance, that you have a paragraph that is a descendant of a blockquote and you want it to be negatively indented. You could write this CSS:
Kerning Tab For Text In Photoshop 5.5
This would give the start of the paragraph, which presumably includes the opening quote character, to be slightly moved to the left to create hanging punctuation.
Regarding Margins and Padding
Oftentimes in web design, you use margin or padding values to move elements and create white space. Those properties will not work to achieve the indented paragraph effect, however. If you apply either of these values to the paragraph, the entire text of that paragraph, including every line, will be spaced instead of just the first line.
Home > Articles > Web Development > Microsoft Expression Studio
␡- Formatting Text
This chapter is from the book
This chapter is from the book
Formatting Text
Adding text to a page in Expression Web is similar to creating a document in your favorite word processor. Many of the same tools are available.
I’m not going to go into the details of basic text formatting because I’m sure you already understand how to bold and italicize text. Instead, I explain how to work with HTML-specific formatting.
How Expression Web Formats Text
Before you start formatting text in your page, you should become familiar with how Expression Web applies formatting. Because Expression Web is designed to create standards-compliant sites, it often uses CSS to apply formatting. How it goes about doing so is based on the CSS Mode setting.
The current CSS Mode setting is displayed using an icon in the status bar when a page is open. To adjust the CSS Mode setting, click the CSS Mode icon on the status bar and select the desired mode, as shown in Figure 3.3.
Figure 3.3. The CSS Mode setting controls how styles are applied and can be adjusted via the status bar.
By default, the CSS Mode setting is set to Auto. In this mode, Expression Web applies formatting using CSS rules that are configured on the CSS tab of the Page Editor Options dialog.
- For more information on using the CSS tab in the Page Editor Options dialog, see Chapter 11, “Configuring Page Editor Options.”
When the CSS Mode setting is Manual, Expression Web automatically displays the Style Application toolbar shown in Figure 3.4. The Style Application toolbar allows you to specify how to apply styles when edits are made.
Figure 3.4. You can control how styles are applied by setting the CSS Mode to Manual and using the Style Application toolbar.
When the CSS Mode setting is set to Auto (the default), you are at the mercy of Expression Web when it comes to where CSS styles get defined. In many cases, that’s a suitable situation. However, you might want more granular control over where styles are created. For example, you might have a CSS file attached to the current page, and you may want to ensure that all newly created CSS styles are created inside that CSS file.
By setting the CSS Mode setting to Manual, you can use the Style Application toolbar to specify where new styles are created using the Target Rule drop-down shown in Figure 3.4. Based on what is currently selected, the following options are available in the Target Rule drop-down.
- An Existing CSS Element—If the selected page element already has a CSS class or ID applied to it, you can select the CSS ID or class from the Target Rule drop-down. If you then make modifications to the selected element, Expression Web modifies the CSS class or ID applied to it.
- Inline Style—If the selected element has an inline style applied to it, selecting Inline Style from the Target Rule drop-down causes the inline style to be modified when formatting is changed.
- New Inline Style—Formatting changes are reflected in a new inline style.
- New Auto Class—Causes Expression Web to create a new, auto-generated CSS class for any formatting changes that are applied. Expression Web creates the new CSS class in an embedded style sheet inside the current page.
- Apply New Style—Allows you to create a new style using the New Style dialog. The location for the new style can be specified in the New Style dialog.
- For more information on creating and editing CSS styles, see Chapter 17, “Creating Style Sheets.”
Font Families
In a word processing application, the font you apply to text will always be the font the viewer of the document sees. Web pages don’t work that way. For you to see text formatted in a particular font on a page, that font must be installed on your machine. If it’s not, the browser substitutes a font you have.
It’s a good idea to always specify a series of fonts to use and specify a generic font (such as sans-serif and monospace) as the last choice. By doing this, if a visitor to your site doesn’t have the first font listed, the browser attempts to use the next font in the list and so on. You can easily configure fonts in Expression Web by selecting Format, Font to display the Font dialog shown in Figure 3.5. Alternatively, you can use the Font drop-down on the main toolbar.
Figure 3.5. The Font dialog lets you easily choose a font family and otherwise modify the appearance of text.
- For information on customizing and configuring font families, see Chapter 11, “Configuring Page Editor Options.”
Font Sizes
Font size is one of those things many developers take for granted. Many Web designers say you should always use pixel dimensions (for example, 12 px) for font sizes. In fact, if you want your site to be as user-friendly and accessible as possible, you should use relative font sizes.
- For complete details on making your site compliant with accessibility standards, see Chapter 12, “Maintaining Compatibility and Accessibility.”
When you use the Font Size drop-down on the toolbar or adjust the font size using the Font dialog, Expression Web automatically uses relative font sizes. The following code shows a CSS style that defines a relative font size that equates to approximately 14-point type:
- For more information on CSS styles, see Chapter 17, “Creating Style Sheets.”
Using relative fonts is a good idea because it gives your site visitor control over the size of the text. When you change the text size in your browser, text that is sized with a relative font size resizes accordingly while text that is sized with an absolute size remains the same size.
Related Resources
- eBook (Watermarked) $28.79
- eBook (Adobe DRM) $9.99
- Book $31.99