Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling text

From: Dreamweaver CS4 Getting Started

Video: Styling text

Formatting text in Dreamweaver requires a slightly different approach than other programs that you might be used to. Unlike a page layout program like InDesign or a word processing program like Word, you don't just highlight the text and begin formatting. That's not to say you can't; just that the long-term results won't be what you are hoping for. Styling web pages is controlled through cascading style sheets. These styles can be stored within an external file linked to your web page, inside the web page itself, or a combination of these two techniques. Dreamweaver offers complete support for CSS, with the creation and management of your styles built into all formatting controls. Let's take a look at how Dreamweaver handles style creation when formatting text.

Styling text

Formatting text in Dreamweaver requires a slightly different approach than other programs that you might be used to. Unlike a page layout program like InDesign or a word processing program like Word, you don't just highlight the text and begin formatting. That's not to say you can't; just that the long-term results won't be what you are hoping for. Styling web pages is controlled through cascading style sheets. These styles can be stored within an external file linked to your web page, inside the web page itself, or a combination of these two techniques. Dreamweaver offers complete support for CSS, with the creation and management of your styles built into all formatting controls. Let's take a look at how Dreamweaver handles style creation when formatting text.

Here we have our index page open, and you can see that most of the page is styled, but in this section we still need to add a little bit of styling. Well, this is our main content section, and understanding the structure of your page is very important to controlling how it's styled. I am going to click inside my first heading here. I can see in this area called the tag selector; you will notice, it's right down here below our open document. It shows me the structure of the page in relation to where I am. I am inside a heading 1, which is inside of div named mainContent, which is inside another div called container, which is inside the body tag.

Now, understanding this structure means that we can create rules that are very specific for this heading and no other headings. We do that by writing what we call a contextual or descendant selector. Now, if that sounds complicated, don't worry. Dreamweaver help us along the rule creation process by writing these selector for us, which is really nice. So I can go down to my Properties inspector. Notice that it says, your targeted rule, if you started working right now, would be mainContent, but if I highlight some of the heading 1, notice that it would target a new CSS rule. So it responds to where you are focused and what you have highlighted.

I am going to click Edit Rule, and it's going to allow me to create a new one. Now I have to tell it which type of selector I want to use. In this case, I want a compound selector. This creates a descendant selector just like we were talking about. Notice that Dreamweaver goes ahead and resolves that for me. I could make it less specific or I could make it more specific, that's up to me. But here Dreamweaver gives me the option. I can also choose exactly where I want this rule placed and I am going to go ahead and place it in my existing external style sheet. Now, when I click OK, I get a series of formatting options that should be fairly familiar to you if you have ever worked with another program; what font do you want to use, what size do you want it. So here we get back into an area that most people are comfortable with.

Well, for the font-family, I am going to go to pulldown menu and I am going to choose Trebuchet. That's what I want my headings to be. For color, I can grab the color chip here and choose a color from the swatches, or if I happen to know the hexadecimal value of the color I want, I can type that in. So I will type in #1B9D95. I can see that's going to give me sort of an aqua color. Well, I am going to go ahead and click OK and you can see the heading changes to exactly what I want. Now at this point I can edit the selector as well. I didn't change the size, but I think that's a little too big. So I can come down into my Properties inspector and as I click inside of it, I can go ahead and change the size of this. So I can select the targeted rule and I can go ahead and click inside that and say, "No, I want that to be 1.6 ems," and as soon as I do that, the heading changes in size. Perfect.

Now, the Properties inspector is not the only place that Dreamweaver allows you to create style. In fact, most of the work that you do with your styles will be done through this panel, the CSS Styles panel. This panel is considered the central nervous system or hub for all of the style interaction in my document. So I have two tabs; the Current, which shows me what I am currently looking at on my page, and the All, which shows me all the styles. As a matter of fact, you can see the style that we just created. So now I want to create a style that controls the paragraphs and I can do that through the CSS Styles panel just as easily. I can go down here to the New CSS Rule, click, and I see a dialog box that looks very similar to what I saw before. I am just going to go ahead and edit this manually. If our last one controlled our heading 1's, I want this one to control our paragraph. So I'm just going to create a rule that says #mainContent p.

Again, Dreamweaver can sort of help me out with how this rule needs to be structured. I will define that in the external style sheet and I will just go ahead and click OK. Here I see the same exact dialog box I saw earlier. We will go ahead and choose Arial for the Font. We will size it at 0.9 em. Dreamweaver lets you know what units of measurement you have available to you. There's pixels, points, em. You have a lot of choices when deciding exactly which unit of measurement to use. I will also do some line-height; that will give us some line spacing. So, we'll do 1.4 em for that, little bigger. We will go ahead and make the color black, so #000.

Now, soon as I click OK, my paragraph restyles and reformats as well. Now, we have got one little last thing we want to do here. I noticed that the secondary heading hasn't styled either. The past two rules that we have created, we have created from scratch, but if you have got an existing rule, it's very similar to what you need. You don't really need to create it from scratch; you can just duplicate it and change it. So I am going to go to the mainContent rule over in my CSS Styles panel. I am going to right click it, that will be Ctrl+Click on the Mac, and I will just choose Duplicate. Now, when I do that, it says "Okay, well, what selector do you want to have these properties?" I will just choose the h2, which will be my subheadings, and click OK.

It creates a duplicate rule and my h2s now look exactly like my h1s. I can make a very quick edit by clicking on the rule, and then changing the size. Maybe I am going to change this one into 1.2 em. As soon as I do that, my secondary headings are a little smaller. So the mainContent is now formatted and matches the rest of our site stylistically. Well, Dreamweaver makes formatting our text very straightforward and efficient. I think that's easy to see than having a full understanding of CSS is important when planning out the look and feel of your web pages. If you are new to CSS, using Dreamweaver's starter pages and Style Creation dialog boxes can help speed up the learning process. Even better, as you learn more about writing and utilizing CSS, Dreamweaver actually becomes easier to use, since Dreamweaver is built around CSS based workflows.

Show transcript

This video is part of

Image for Dreamweaver CS4 Getting Started
Dreamweaver CS4 Getting Started

9 video lessons · 41979 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.