Modifying type directly in the CSS Styles panel
Video: Modifying type directly in the CSS Styles panelAs you become more familiar with CSS rules, Dreamweaver offers a number of paths for changing CSS properties more quickly. The CSS STYLES panel provides a wealth of information about your CSS rules, as well as direct access to modify existing and add new CSS properties. Before we turn our attention to the CSS STYLES panel however, let's make sure that our preferences are all set as desired. So I'll go to Dreamweaver > Preferences on the Mac; on Windows, of course, you would choose Edit > Preferences.
- Next steps
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Modifying type directly in the CSS Styles panel
As you become more familiar with CSS rules, Dreamweaver offers a number of paths for changing CSS properties more quickly. The CSS STYLES panel provides a wealth of information about your CSS rules, as well as direct access to modify existing and add new CSS properties. Before we turn our attention to the CSS STYLES panel however, let's make sure that our preferences are all set as desired. So I'll go to Dreamweaver > Preferences on the Mac; on Windows, of course, you would choose Edit > Preferences.
And now let's go down to the CSS Styles category. And here, I'm going to go ahead and enable shorthand for all of the various options. Using shorthand with CSS really condenses your properties, and once you become familiar with it, it is actually a lot easier than working with the expanded code. Now I also want to make sure that I use shorthand according to the settings above, and then also open up CSS files when modified. Finally, this is a personal preference, but I like using the CSS dialog for editing.
So I'm going to keep that option, when double-clicking in the CSS panel. Alright! My preferences are set, I'll click OK, and now I'm going to open up the mission.htm file found in Chapter 1 > 01_04 folder. Now as an example, I'm going to use the footer on this page. Let's scroll all the way down, until you see the text Explore California, and let's select that. I'm going to go ahead and to select the h1 through the tag selector, just to make sure that I've got all of the tag.
And here in the Property Inspector, you can see that it does have a specific Targeted Rule for #footerBody, # footerRightCol (or Column), h1, and it's defined in main.css. Now in order to work with the CSS STYLES panel, I'm going to go ahead and open it up over here and double-click it. I'm going to close the FILES panel as well, just to get maximum room. If you're unfamiliar with the CSS STYLES panel, the first thing to notice is that there are two modes. There is an All mode, which shows you as you might expect, all of the CSS rules, and I can scroll down and see that there's a good many of them.
And there's even a second style sheet applied here. And each of these rules, when I select one, will show the various properties in the Properties pane below. Now there's also a Current mode, and this shows you just the properties and rules applied to the current selection. So since we have our h1 and the footer selected, that is what is showing up here. And here is the same rule in the Rules pane that we see in the Targeted Rule list.
And here are the various properties listed for it. You can see a summary of all of the properties applied in the very top pane, the Summary pane. Now you can see that some of the properties that you see up here, like margin 0 and padding 0 don't have a correlated property down in the Properties pane. That's because those properties are inherited. And as you scroll over them, you'll see a tooltip popup that shows exactly where that property is set, so you can find it if you need to.
One of the great things about the CSS STYLES panel and especially the Properties pane is the direct access that you have to changing properties values. So let's go ahead and make a couple of changes here. I'm going to go down to where it says letter-spacing, and notice that when I click into the 1 em value, it splits into the numbers and the measurement unit listing. So I'm going to change the letter- spacing to 0.2 ems, press Tab, and Tab again,, and then you can see Explore California expands a little bit.
Now let's also change the size of it, and this time I'm going to bring it down a little bit. From 1.6 ems, let's make that 1.4. Here you see an example of the shorthand that was set up when we changed Dreamweaver Preferences. Now this code was already here, so Dreamweaver just recognizes it and doesn't try to rewrite it. But the CSS STYLES panel does allow us to go in and change any of those elements, even though they're in shorthand. So I'm just going to go ahead and click into the properties there and let's change the 1.6 em to 1.4. And you can press either Return or Enter or Tab; I'm going to go ahead and hit Return.
And you'll notice that the size got a little bit smaller that time. Now you can use the Property pane in combination with other interfaces. So for example, let's say I wanted to change the font family, so I could go ahead, click into the font values and change all the fonts in the font family by hand, but that's a lot of work and trying to make sure that you get the font names right is often difficult. The better pathway is to deselect that and then go down to the Pencil icon and click Edit Rule, which will open up the CSS Rule Definition dialog box, and we can go to the Type category and then just choose a different one from the list.
I'm going to go ahead and choose Arial, Helvetica, sans-serif, click OK, and now our typeface has changed as well. You see how quickly you can modify properties and you can add them just as easily. I'll go to the Properties pane and here we see the Add Property link. If I click on that, the property field opens up and let's type in text-transform, and then I'll press Tab.
And now I could enter in the value manually or if I want to make sure I've got it right, go ahead and choose it from the list, and in this case, I'll choose uppercase. And there you can see Explore California became uppercase. Once you're just the slightest bit familiar with CSS, you'll find yourself returning to the CSS STYLES panel time and again, because of the immediate access it offers for adjusting your rules.
There are currently no FAQs about Typography with CSS in Dreamweaver.