HTML in 10 Steps or Less- P18 ppsx

Defining CSS Font Properties T he HTML Tools Palette provides a means of editing Cascading Style Sheet code, whether the code is inline, embedded, or in an external style sheet doc- ument. To modify CSS <font> tag properties, follow these steps. 1. Place the cursor in the current document at the point you want to insert the style definition. Click the CSS button and choose Font from the submenu to open the Font dialog box (see Figure 146-1). Figure 146-1: The Font dialog box 2. Enter a selector of your choice in the Selector field. 3. To specify a color property, click the color picker and select a color from the color palette. 4. To define a font-size property, click the pop-up menu beside the Size field to select a unit of measure and then enter a value in the field. 5. To define a l ine-height property, click the pop-up menu beside the Line Height field to select a unit of measure and enter a value in the field. 6. To define a font-family property, enter a value in the Font Family field. note • If you initially place the cursor within an existing style declaration, the corresponding selector appears in the Selector field and the properties you define are added to the existing declaration. 316 Part 13 Task 146 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • The best unit of measure for cross-platform usage is pixels. • Define font family property just as you would the face attribute of the <font> tag — for example, in a comma-delimited list of three or more font names, like “Arial, Helvetica, sans-serif” . 7. To define a font-style property, choose Italic, Oblique, or Normal from the Style pop-up menu. The Default value leaves the property undefined. 8. To define a font-weight property, choose a value from the Weight pop-up menu. The Default value leaves the property undefined. 9. To define a font-variant property, choose Small-Caps or Normal from the Variant pop-up menu. The Default value leaves the prop- erty undefined. 10. When you’ve completed you choices, click the Apply button to insert the style declaration (see Figure 146-2). Figure 146-2: A completed style definition in the document window Working with BBEdit 317 Task 146 cross-reference • To learn more about Cascading Style Sheets, go to the book’s Web site at www.wiley .com/compbooks/ 10simplestepsorless. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Defining CSS Text Properties B BEdit’s CSS editing tools allow you to adjust text properties in CSS, which affect the physical characteristics of the text itself — spacing of characters, words, and lines as well as alignment and indentation. Defining these properties in BBEdit is simply a matter of accessing the appropriate dialog box and entering your chosen values. 1. Place the cursor in the current document at the point you want to insert the style definition. Click the CSS button and choose Text from the submenu to open the Text dialog box (see Figure 147-1). Figure 147-1: The Text dialog box 2. Enter a selector of your choice in the Selector field. 3. To define a text-indent property, click the pop-up menu beside the Text Indent field to select a unit of measure, and then enter a value in the field. 4. To define a text-align property, choose a value from the Alignment pop-up menu. 5. To define a vertical-align property, choose a value from the cor- responding pop-up menu, or select a percentage from the menu and enter a numeric value in the field. notes • If you initially place the cursor within an existing style declaration, the corre- sponding selector appears in the Selector field and the properties you define are added to the existing declaration. • For some reason, BBEdit duplicates the line- height property in both the Font and Text dialog boxes. To define it here, select a unit of measure- ment and enter a value in the Line Height field. 318 Part 13 Task 147 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • The best unit of measure for cross-platform usage is pixels. 6. To define a text-transform property, choose a value from the transformation pop-up menu. 7. To define word-spacing and letter-spacing properties, select a unit of measure from their respective pop-up menus and enter a value in their fields. 8. To define a white-space property, choose a value from the White Space pop-up menu. 9. To define a text-decoration property, select each of the check boxes you want to include from those listed at the bottom of the dialog box. 10. Click Apply to close the dialog box and insert the definition in the current document (see Figure 147-2). Figure 147-2: Text properties added to a style definition Working with BBEdit 319 Task 147 cross-reference • To learn more about Cascading Style Sheets, see Part 9. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Defining CSS Background Properties I n HTML you can assign a background color or image to several areas of the document, including various parts of a table (cells, rows, or the entire table) and layered content. In CSS, by comparison, you can determine the background of any element in the document including individual words, paragraphs, headings — anything. If there’s a tag for it, you can modify its background. 1. Place the cursor in the current document at the point you want to insert the style definition. Click the CSS button and choose Background from the submenu to open the Background dialog box (see Figure 148-1). Figure 148-1: The Background dialog box 2. Enter a selector of your choice in the Selector field. 3. To define a background-image property, click the File button to browse your hard drive for an image file you want to use. 4. To define a background-color property, click the dialog box’s color picker and choose a color from the palette. note • If you initially place the cursor within an existing style declaration, the corre- sponding selector appears in the Selector field and the properties you define are added to the existing declaration. 320 Part 13 Task 148 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Any image you intend to use in a Web site should be copied into the local site’s root directory. 5. To control how a background image tiles, define a background- repeat property by selecting a value from the Repeat pop-up menu. 6. To specify the location of a background image, define a background- position property by entering Left and Top coordinates in the fields provided and specifying the unit of measure with the corre- sponding pop-up menus. 7. To specify whether the background image is fixed or scrolls with the browser window, define a background-attachment property using the Attach pop-up menu. 8. To insert the new definitions, click the Apply button. The code is written to the document (see Figure 148-2). Figure 148-2: Background definitions in the document window Working with BBEdit 321 Task 148 cross-reference • To learn more about Cascading Style Sheets and the background properties, see Part 9. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Defining CSS Padding and Margin Properties B BEdit makes it easy to define padding and margin properties in CSS. You do it all in the same dialog box. 1. To define padding properties, place the cursor in the current docu- ment at the point you want to insert the style definition. Click the CSS button on the HTML Tools Palette and choose Padding from the submenu to open the Padding dialog box (see Figure 149-1). Figure 149-1: The Padding dialog box 2. Enter the selector you’re defining the property for in the Selector field. notes • If you initially place the cur- sor within an existing style declaration, the corre- sponding selector appears in the Selector field and the properties you define are added to the existing declaration. • BBEdit does not support the properties padding- top , padding-right, padding-bottom,or padding-left. Instead, it uses the single padding property, which accepts four values to represent these separate properties, respectively (padding: top right bottom left ). If you don’t want to assign a padding value to a particular side, you must enter 0 in the corre- sponding field. 322 Part 13 Task 149 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 3. To supply an identical value for each of the four possible sides, type a value in the first field and choose a unit of measure from the accom- panying pop-up menu. 4. To define a value for any combination of sides, enter individual values in each of the subsequent fields — top, right, bottom, or left — as indicated by the field’s icon on the left. 5. To define margin properties, place the cursor in the current docu- ment at the point you want to insert the style definition. Click the CSS button on the HTML Tools Palette and choose Padding from the submenu to open the Padding dialog box (see Figure 149-2). Figure 149-2: The Margins dialog box 6. As described just previously for the Padding dialog box, enter the selec- tor in the Selector field and type margin values in the fields provided. Working with BBEdit 323 Task 149 cross-reference • To learn more about Cascading Style Sheet properties, see Part 9. For a discussion of CSS syntax, see the book’s Web site at www.wiley .com/compbooks/ 10simplestepsorless. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Defining CSS Border Properties B efore CSS came into style, so to speak, the only HTML elements that could possess borders were tables and images. Now any element can possess a bor- der. You can determine the width of an element’s border, the border color, and the border style using BBEdit’s CSS border tools. The properties defined for the selector are border-width, border-color, and border-style, respectively. 1. Place the cursor in the current document at the point you want to insert the style definition. 2. Click the CSS button on the HTML Tools Palette and choose Border from the submenu to open the Border dialog box (see Figure 150-1). Figure 150-1: The Border dialog box 3. Enter the selector you’re defining the property for in the Selector field. note • If you initially place the cursor within an existing style declaration, the corre- sponding selector will appear in the Selector field and the properties you define are added to the existing declaration. 324 Part 13 Task 150 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • To define values for all sides concurrently, use the first row of interface ele- ments. To define values for any combination of sides, enter individual values in each of the subsequent fields — top, right, bottom, or left, as indicated by the field’s icon on the left. 4. Use the fields on the left side of the dialog box to enter border-width values, specifying units of measure with the pop-up menus directly to their right. 5. To specify border-color values, click the color pickers and make selections from the color palette. To select one of the 16 predefined color names, use the pop-up menus to the right of the color pickers. 6. To specify border-style values, make selections from the pop-up menus on the extreme right side of the dialog box. 7. To insert the values and close the dialog box, click the Apply button. The generated code is entered into the document (see Figure 150-2). Figure 150-2: Border property style definitions applied to a page Working with BBEdit 325 Task 150 cross-reference • BBEdit’s color picker defaults to the Web-safe palette when first installed. To learn how to change the color picker preferences, see Task 158. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... BBEdit finds any errors, the HTML Syntax Errors panel (see Figure 152-1) appears Figure 152-1: When BBEdit encounters errors, it displays the HTML Syntax Errors panel in the code window 2 Click the warning or error in the upper portion of the dialog box to see the corresponding line of code displayed in the lower portion Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working... • • If you initially place the cursor within an existing style declaration, the corresponding selector appears in the Selector field and the properties you define are added to the existing declaration If the element you assign a width or height to requires more space than the values allow, the element will override your settings Part 13 Defining CSS Box Properties T he box model of Cascading Style Sheets... Definition dialog box, which provides a single interface for defining all style properties To learn more, see Part 15 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 328 Task 152 note • In BBEdit, a warning indicates when the displayed code won’t necessarily cause a browser error but is not syntactically correct An error indicates when code will produce a real browser error... checks, BBEdit checks links in the document, folder, and site Run these checks from the Check button submenu They operate identically to the syntaxchecking discussed in these steps If a hyperlink, image reference, or other attribute that accepts a pathname value comes up unresolved (because there’s no corresponding file or the pathname is incorrect), BBEdit opens the HTML Link Errors dialog box (identical... textbased HTML editor For more information, see Part 14 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 332 Task 154 Part 13 Using Find and Replace Y our marketing department is sure to change their minds seven times today about some magic phrase they had you place in 200 locations on the company Web site before you finally crawled home to bed Now you have to change it one more... appear in the file group window with “disclosure triangles,” just as they do in the Finder Click the triangle to display the files and folders inside Part 13 Working with File Groups F or those situations where you find yourself working with a large number of related Web pages, consider using a file group Creating a file group generates a small BBEdit file that references the files and directories comprising... Part 13 Validating HTML B BEdit has a feature that debugs your HTML syntax and link references This prevents you from creating code with errors or broken links that will affect the look of your page when you publish it to the Web You can validate HTML on an individual document or on an entire folder or site 1 To validate the current document’s code, click the Check Syntax button on the HTML Tools Palette... an HTML document You can also wrap content within comments and change the case of text 1 To convert plain text to HTML, select the text in the document window, click the Utilities button on the HTML Tools Palette, and choose Translate from the submenu to open the Translate dialog box (see Figure 153-1) Figure 153-1: Converting plain text to HTML using the Translate dialog box Any comment tags used in. .. a kind of rectangular “bull’s-eye,” with four zones radiating out from a central area that holds the element itself — text, image, table, or whatever This central area is known as the content area The next zone out from this is the padding area (governed by padding properties covered in Task 149), followed by the border area (Task 150), and then the margin area (Task 149 again) Instead of bundling... www.verypdf.com to remove this watermark Working with BBEdit 3 To make corrections to the code, double-click the error or warning to jump to the document containing the document The line is highlighted in the document window 329 Task 152 4 To check the syntax of all documents in a given folder, click the Check button on the HTML Tools Palette and choose Folder Syntax from the submenu to display the . determine the width of an element’s border, the border color, and the border style using BBEdit’s CSS border tools. The properties defined for the selector are border-width, border-color, and border-style,. The Padding dialog box 2. Enter the selector you’re defining the property for in the Selector field. notes • If you initially place the cur- sor within an existing style declaration, the corre- sponding. The Border dialog box 3. Enter the selector you’re defining the property for in the Selector field. note • If you initially place the cursor within an existing style declaration, the corre- sponding