IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Styles and Their Attributes (part 1) - Type options, Background options

5/2/2013 9:28:22 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

After you've selected a type and name for a new style or chosen to edit an existing style, the CSS Rule Definition dialog box opens. A Category list from which you select a style category (just as you select a category of preferences in Dreamweaver's Preferences dialog box) is located on the left side of this dialog box.

Dreamweaver offers you eight categories of CSS styles to help you define your style sheet:

  • Type

  • Background

  • Block

  • Box

  • Border

  • List

  • Positioning

  • Extensions

You can define styles from one or all categories. The following sections describe each style category and its available settings.

NOTE

Although CSS rendering has been vastly improved in Dreamweaver CS5, particularly in Live view, not all possible CSS attributes are viewable in the Design view, most notably those in the Extensions category.

1. Type options

The Type category specifies the appearance and layout of the typeface for the page in the browser window. The Type category, shown in Figure 1, is one of the most widely used and supported categories — it can be rendered in all current browser versions as well as way back to Internet Explorer 3.0 and Navigator 4.0.

Figure 1. The Type category includes some of the most frequently used CSS attributes.

Table 1 explains the settings available in this category.

Table 1. CSS Type Attributes
Type SettingDescription
FontSpecifies the font or a collection of fonts, known as a font family. You can edit the font list by selecting Edit Font List from the drop-down list.
SizeSelects a size for the selected font. If you enter a value, you can then select the measurement system in the adjacent text box (the default is pixels). The relative sizes, such as small, medium, and large, are set relative to the parent element. Values can be selected from the drop-down list or entered by hand.
StyleSpecifies a normal, oblique, or italic attribute for the font. An oblique font may have been generated in the browser by electronically slanting a normal font.
Line HeightSets the line height of the line (known as leading in traditional layout). Typically, line height is a point or two more than the font size, although you can set the line height to be the same as or smaller than the font size for an overlapping effect.
DecorationChanges the decoration for text. Options include underline, overline, line-through, blink, and none. The blink decoration is displayed only in Netscape 4.x and earlier browsers.
WeightSets the boldness of the text. You can use the relative settings (light, bold, bolder, and boldest) or apply a numeric value. Normal is around 400; bold is 700.
VariantSwitches between normal and small caps. Small caps is a font style that displays text as uppercase, but the capital letters are a slightly larger size.
CaseForces a browser to render the text as uppercase, lowercase, or capitalized.
ColorSets a color for the selected font. Enter a color name or select the color swatch to choose a browser-safe color from the color picker.

2. Background options

Since Netscape Navigator 2.0, Web designers have been able to use background images and color. Thanks to CSS Background attributes, designers can now use background images and color with increased control. Whereas traditional HTML background images are restricted to a single image for the entire browser window, CSS backgrounds can be specified for a single paragraph or any other CSS selector. (To set a background for the entire page, apply the style to the <body> tag.) Moreover, instead of an image automatically tiling to fill the browser window, CSS backgrounds can be made to tile horizontally, vertically, or not at all (see Figure 2). You can even position the image relative to the selected element.

Figure 2. You can achieve a number of different tiling effects by using the Repeat attribute of the CSS Background category.

The current versions of browsers support the CSS Background attributes shown in Figure 3 and described in Table 2.

Figure 3. The CSS Background options give you a much wider range of control over background images and color.

Table 2. CSS Background Attributes
Background SettingDescription
Background ColorSets the background color for a particular style. Note that this setting enables you to set background colors for individual paragraphs or other elements.
Background ImageSpecifies a background image.
RepeatDetermines the tiling options for a graphic:
  • no repeat displays the image in the upper-left corner of the applied style.

  • repeat tiles the background image horizontally and vertically across the applied style.

  • repeat-x tiles the background image horizontally across the applied style.

  • repeat-y tiles the background image vertically down the applied style.

AttachmentDetermines whether the background image remains fixed in its original position or scrolls with the page. This setting is useful for positioned elements. If you use the overflow attribute, you often want the background image to scroll in order to maintain layout control.
Horizontal PositionControls the positioning of the background image in relation to the style sheet elements (text or graphics) along the horizontal axis.
Vertical PositionControls the positioning of the background image in relation to the style sheet elements (text or graphics) along the vertical axis.
 
Others
 
- Adobe Photoshop CS5 : Working with Automate Commands - Using the Fit Image Command
- Adobe Photoshop CS5 : Working with Automate Commands - Processing Multiple Image Files
- Adobe Flash Catalyst CS5 : Optimizing artwork
- Adobe Flash Catalyst CS5 : Importing artwork
- Adobe Flash Catalyst CS5 : Preparing a design document
- Adobe After Effects CS5 : Animating Text - Animating imported Photoshop text
- Adobe After Effects CS5 : Animating Text - Animating using parenting
- Adobe After Effects CS5 : Animating Text - Animating with scale keyframes
- Adobe Fireworks CS5 : Working with Vector Graphics - Scaling vector objects, Adding text to your design
- Adobe Fireworks CS5 : Working with Vector Graphics - Changing the appearance of basic vector shapes
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS