• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 37. Using Cascading Style Sheets... > Using Advanced CSS Features

Using Advanced CSS Features

You may have noticed the Advanced section of the CSS Editor in Figure 37.20. If you can't see the Advanced options, click in the empty space on the left side of the CSS Editor and then click the triangle next to the word Advanced to display the options. These Advanced features enable you to link to one external style sheet from another, apply specific styles for print, and apply specific styles, depending on the type of media device:

  • Create @import: Reference an external style sheet from another external style sheet, as shown in Figure 37.21. Click and hold the button to display a list of existing external style sheets to select from, or click the button and click the New button to create a new external style sheet. If the external style sheet is designed for certain media, choose it from the Media pop-up menu.

    Figure 37.21. Link to an external style sheet from an external style sheet.

    Click Edit to edit the external style sheet. Click In & Out Links to display the In & Out Links palette, as shown in Figure 37.22.

    Figure 37.22. The In & Out Links palette displays all of the web pages using the external CSS file on the left, and which styles are in use on those pages.

  • Create @media: Define styles for specific types of media, such as Braille, Print, and Aural (spoken word). Click the Create @Media button to display the @media rule in the left column of the CSS Editor and then select a media type from the Media pop-up menu, as shown in Figure 37.23. Create CSS styles as usual and then drag them onto the @media rule to add them, as shown in Figure 37.24.

    Figure 37.23. Select a media type.

    Figure 37.24. Add CSS styles to the @media rule.

  • Create @font-face: Download fonts on the fly for your web pages. This feature doesn't work with all browsers and you must be using OpenType fonts at this point. Click the Create @font-face button to display the Font Styling options, as shown in Figure 37.25. Select a font or font family from the Font-Family pop-up menu and indicate the settings for the font, including specific sizes in the Size field. Click the Font Source tab and then click the Create New Item button to specify the URL for the font, or indicate whether the font is available locally.

    Figure 37.25. Font Styling options for the @font-face rule.

  • Create @page: Set the dimensions, orientation, and margins of a page box for printing. In the Selector section, leave the field empty (unchanged) to apply to all pages. Choose :first to apply to the first page, or choose :left to apply to pages left of the binding or :right to apply to pages right of the binding. Indicate page marks, margin values, and size values, as shown in Figure 37.26.

    Figure 37.26. The @page settings in the CSS Editor.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint