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

Type selectors

From: Dreamweaver CS3 Essential Training

Video: Type selectors

Okay, let's take a look at creating type selectors, which as I briefly expand the previous movie, are used to redefine existing XHTML tags. So to use this type of selector, you need to be a little bit familiar with basic XHTML, and basic tags. But if you're not, I'm going to be creating some pretty common examples of type selectors in this movie, so you should be able to get a fairly good understanding of how these work. Type selectors are probably the most efficient way to declare CSS formatting rules, because they redefine every single instance of that tag on your page. So, if I set a definition for the or paragraph tag, every single paragraph on your page will be affected.

Type selectors

Okay, let's take a look at creating type selectors, which as I briefly expand the previous movie, are used to redefine existing XHTML tags. So to use this type of selector, you need to be a little bit familiar with basic XHTML, and basic tags. But if you're not, I'm going to be creating some pretty common examples of type selectors in this movie, so you should be able to get a fairly good understanding of how these work. Type selectors are probably the most efficient way to declare CSS formatting rules, because they redefine every single instance of that tag on your page. So, if I set a definition for the or paragraph tag, every single paragraph on your page will be affected.

So one single type selector rule could potentially affect thousands of lines of code throughout your site, if that rule is on an external style sheet linked to all of your pages. As I mentioned in the previous movie, some of the rules we created earlier use type selectors. Let's look at our external style sheet for a moment here. Specifically, these two rules right here. We've got the body, td and th selectors here, and another body selector down here. Now, this first rule here redefines the body, td and th tags. The td and th tags are for table cells and table headers. But this rule also introduces you to the concept of grouping selectors. You can group as many selectors together as you like, by separating them with commas. So all three of the selectors share these rules.

So, body, td, and th all have the same font family, font size and font color. But there are also some rules we set up that are specific to just the body tag, which is why {italic}Dreamweaver{plain} wrote a separate rule with just the body tag as a selector. We have the background color, and all of our margin properties here. That's all there is to using type selectors. Just select the tag you want to change and add some rules. Let's see how we do this via the CSS Styles panel. Let's go back to the abouttea document. So far this formatting looks okay. It certainly looks much better than it did when we first started in the earlier exercises.

But we can still use a little bit more fine-tuning to make this visually appealing. So in the CSS Styles panel, I'm going to click the New CSS Rule button. Now the first thing we're going to do is change the default style information for paragraph text in the document. Specifically, the line height, meaning the space between the lines of text. I also might want to change the alignment of the text because it's sort of ragged on the right hand side here. Maybe I want to justify all the text. This New CSS Rule dialog box lets you create a new CSS rule, or redefine existing rules. In this case, we're going to redefine an existing tag, meaning we're going to use a tag selector, so I'm going to have tags selected. And because I want to change all the paragraphs, I'm going to select the

tag.

Now, let me cancel this for a minute. If I go to the Code view, that basically means that the

tag here, the

here, the

tag here, every single paragraph has

tags around it, meaning every single paragraph will be affected by the change that I make to the

tag. I'll come back in here. Now I'm going to click inside this paragraph. Click the new style button, and notice that automatically selects the

Tag for me. {italic}Dreamweaver {plain}just assumes that since my cursor was there, that's the tag I want to work on. Now we do have the options here of these different Selector Types, and really these three Selector Types are just here for convenience. The Class option adds a period to the beginning of anything you specify in the field down here. The Tag option lets you type or select only legitimate HTML tags. And the Advanced tag lets you type anything you want. So once you get more advanced, you might just want to keep the Advanced tag selected all the time. It really doesn't matter which one of these you've selected, as long as you have the proper Selector Type typed in here, you're fine. So I'm going to keep the Tag selected for this example. We're going to be working with a paragraph. Now we have the option of defining this style in an existing style sheet, in this case our styles.css file that we've been working with. Or we can add the style just to this document, and create an embedded style sheet. But I want this paragraph definition to apply to all the pages attached my style sheet. So I'm going to keep this radio{bold} {plain}button checked, and click on OK. So let's take care of the spacing between the lines of text first. We have this Line height field under the Type category. And for this one, I'm going type 1.7 and for the value we'll select ems. Now don't worry too much about font measurement at this point. In the next chapter, we're going to learn all about the different types of font measurements. But for now, it's going to be 1.7 ems, and then I'm going to go over to the Block category. This basically affects the attributes of my blocks of text.

And since I want my text to be lined up on both sides, I'm going to come in here to Text align and choose justify. Let's click on OK, and make sure you watch over here and see what happens. And sure enough, I now have some nice spacing between my lines of text. It makes it a little easier to read, looks a little bit nicer. And now the text is lined up on both the left and right side. Notice also that the

tag has been added to my Styles panel here. Also notice that no asterisks appeared next to my file name, meaning nothing has changed here. There is an asterisk next to styles.css, because nothing changed on this page in terms of content, but we just changed the way that the content is going to be displayed, here in my style sheet. And you can see it right down here.

There is the style rule we just created. And again, this is the true benefit of working with CSS. The presentation is separate from the content. Again, the content on this page did not change at all, we just changed the way that it's going to be presented, here in our style sheet. Next, let's make some changes to the headings used on this page. Now the h1 tag looks fine in this Georgia font that we selected previously, but sometimes smaller headings or smaller texts don't look so great in Serif fonts, like we see down here. Let's make a couple of changes. Over here, in the CSS Styles panel, I'm going to select the h1, h2, all the way through h6 rule. And you can see, this is where we applied the font-family to all heading styles. I'm going to delete that by right clicking on this and choosing Delete. Now look what happened, instantly, both headings reverted to the Verdana font. You can see they're no longer in the Georgia font. Because we deleted that heading rule, all of the headings are now styled with the font specified by the body tag This is another great example of how Cascading Style Sheets cascade. We were very specific that heading tags to be in the Georgia font, so those overrode the rule written for the body tag, which in this case, is that all fonts in the body of the page should be Verdana. But once we remove that rule about the Georgia font, the body tags rule took over, and now these two headings are in Verdana. Let's say I like that Georgia font for the h1 tag. So I'm going to click in here and I'm going to select the h1 rule, which currently has color and font size properties. And I'm going to choose to Edit that rule.

And all I'm going to do here is change this, and specify that I want that Georgia font set. Click on OK. And sure enough, you can see the property has been added here and more importantly, you can see that it's changed instantly right here on my page. And again no asterisk next to abouttea, all we're doing is changing the style sheet. Let's take a look at something else we can do. Over here in the links, notice that these images of little arrows have these borders around them. Browsers by default add borders around any image tag that's located inside an anchor tag, meaning that's been set up as a link. If I click in here, you can see that these have links set up. But I don't like those borders around my links. Now, I could select each one of these images, and set a border of zero in the Properties inspector down here, but I would have to that individually for every single image. It's much easier to take care of this with CSS.

So let's come in here and create another new rule. Notice because I had the image selected, it automatically assumed that I wanted to work with the image. But I only want to work with specific images, I don't want this rule to affect all images on my page, otherwise the images up here would also be affected with what I'm about to create. So I'm going to switch over to the Advanced selector type and I'm going to type "a img." What we've just created here is called a descendent selector. A descendent selector contains any number of regular selectors, separated by spaces. What this particular rule is going to mean: find any tag that's a descendant of, or inside of, an tag, meaning a link tag. So basically, any image that's a link will be affected by the rule we're about to create. So we'll click on OK, and we're going to go over to the Border category, which, as you can imagine, affects the borders around the elements we're working on. I'm going to keep Same for all selected under width and I'm just going to set a width of zero{bold}. {plain}Meaning, we want no border whatsoever. Since we have no border at all, we don't need to worry about a Style or a Color. We'll just click on OK. And you can see the borders are now removed from those images.

And again, no changes to this page, just changes to the style sheet. Let's do one more thing here. Now, I want to make this, The Legendary Origins of Tea, line stand a little bit more, maybe by placing a bullet object in front of it. Now what we can do is by typing a bullet, but I want to stylize it a little bit more. And you can do this by fooling around with some more CSS. I'm just going to click anywhere inside this h2 tag, and I'm going to select the h2 rule here. I can come here and choose to edit my CSS properties, and come in here and change some of the properties, but just to show you how you can also use the lower portion of the CSS Styles panel, I can just choose to add a property. Now, this requires you to know a little bit more about CSS rules and what kind of rules are available to you. So if you're not quite comfortable doing this, you can just go and choose to edit the style. That will make it a little easier to find what you're looking for. But in this case, I'm going to come in here and choose border-left-color. Notice we also have border-bottom-color, border-right-color and, border-top-color. This allows me to set individual colors for all four borders around whatever object I'm working with, which is pretty cool. Now just by selecting border-left-color, I'm only setting a color for the left border, and I can play around with this border and make it look more like a bullet.

First of all, let's set a color. I'm going to set it the same color as the text itself. So, instead of typing in that value, I'll just come in here to the color well and sample that color right out of there. Easy enough. Now we don't see any change, because we haven't set other border properties yet. So let's add another property. In this case I'm going to choose border-left-width. How thick do I want this border to be? And I want it to be 11 pixels wide. And again, no change yet. I see the text has moved, but I don't see the border itself. That's because I have to add a border style.

Let's add another property, border-left-style. In this case, we have several styles to choose from. I'm going to choose, solid and there's my bullet. Now the text is looking a little bit too close to that bullet, so let's add one more property. We're going to add a little bit of padding. Padding is a space between your object and the object next to it. So we'll choose padding-left, and let's just add a value of 7 pixels there. And that pushes my text over a little. So my h2 tag now has a nice little square bullet next to it. And any other h2 tag I might create would also have that bullet next to it.

Not a single change been made to abouttea.html. It's all happening because of the style sheet. So, if you're not quite comfortable with working his way, because you might not be familiar with all these different properties, remember you can always come in here and choose to edit the style. And you can see here, here's the Padding setting 7 pixel Padding. If I come into the Border area, I see the style is solid. It's 11 pixels, and there's the color. So this is where you actually enter the information in the dialog box here. This is also a good way to learn about these actual properties, because even though you're setting the properties here in the dialog box, that's not teaching you the actual terminology for these properties. By setting them in here, you can come in here and look, and you can learn the terminology this way, or by coming into your actual style sheet, you can see how those properties are written out in proper CSS format.

So if you have the time, always try the learn stuff, by looking at the actual Code. Eventually, after staring at this enough, you'll start to understand how it all works. Now, I'm going to go ahead and save my style sheet here. And let's open up aboutus again, and brewingtea again. And notice that they have the exact same attributes that we just set. The image doesn't have a border around it, there's a little bullet next to the h2 line, and the h1 tags are in that Georgia font. I really hope you find that as impressive as I do, because that's really the power of Cascading Style Sheets. Make couple of changes to your style sheet, and all the linked pages are affected. So that is type selectors, which is again affecting existing XHTML tags.

We affected the

tag, the h1, the h2 tag, and we did a descendent selector on the image tag. In the next movie, we'll look at ID selectors.

Show transcript

This video is part of

Image for Dreamweaver CS3 Essential Training
Dreamweaver CS3 Essential Training

129 video lessons · 86928 viewers

Garrick Chow
Author

 
Expand all | Collapse all
  1. 1m 12s
    1. Welcome
      1m 12s
  2. 21m 0s
    1. HTML vs. XHTML
      3m 4s
    2. What is CSS?
      3m 48s
    3. What is XML?
      2m 11s
    4. What is DHTML?
      1m 9s
    5. What is JavaScript?
      1m 23s
    6. File naming conventions
      3m 22s
    7. What is an index page?
      6m 3s
  3. 46m 18s
    1. Setting up your workspace
      2m 39s
    2. The Welcome screen
      4m 11s
    3. Windows and Mac differences
      3m 18s
    4. The Insert bar
      4m 38s
    5. The Property Inspector
      1m 50s
    6. The Document toolbar
      6m 6s
    7. The Document window
      9m 11s
    8. Panels and panel groups
      6m 58s
    9. Saving workspace layouts
      2m 22s
    10. Defining a default browser
      5m 5s
  4. 24m 59s
    1. Defining a site
      9m 5s
    2. File and folder management
      3m 11s
    3. Understanding path structure
      3m 17s
    4. Adding content to a site
      6m 6s
    5. Creating a site map
      3m 20s
  5. 38m 39s
    1. Creating a new blank site
      6m 0s
    2. Creating and saving a new document
      7m 54s
    3. About DOCTYPE
      3m 59s
    4. Inserting images
      9m 26s
    5. Inserting text
      3m 35s
    6. Aligning text and images
      4m 9s
    7. Inserting meta tags
      3m 36s
  6. 45m 58s
    1. Link basics
      6m 4s
    2. Linking with Point to File
      5m 18s
    3. External links
      4m 15s
    4. Creating email links
      5m 49s
    5. Named anchors
      7m 37s
    6. Linking to a file
      7m 35s
    7. Image maps
      9m 20s
  7. 1h 8m
    1. About CSS
      4m 52s
    2. Anatomy of a style sheet
      4m 10s
    3. CSS and page properties
      10m 11s
    4. Moving an internal style sheet to an external style sheet
      6m 46s
    5. The CSS Styles panel
      3m 48s
    6. CSS selectors
      2m 37s
    7. Type selectors
      12m 13s
    8. ID selectors
      10m 21s
    9. Class selectors
      5m 42s
    10. Creating rollovers with pseudo-class selectors
      7m 22s
  8. 42m 54s
    1. CSS vs. the Font tag
      2m 42s
    2. Formatting text with the Property Inspector
      8m 41s
    3. What measurement should I use?
      3m 15s
    4. Managing white space with margins, padding, and line height
      8m 34s
    5. Using font lists
      5m 45s
    6. Aligning text
      2m 47s
    7. Creating lists
      5m 8s
    8. Creating Flash text
      6m 2s
  9. 43m 19s
    1. About tables
      1m 28s
    2. Tables in Code view
      2m 36s
    3. Creating and adding content to tables
      7m 40s
    4. Changing table borders with XHTML
      5m 46s
    5. Coloring tables with XHTML and CSS
      6m 41s
    6. Aligning table content
      6m 39s
    7. Sorting tables
      3m 6s
    8. Setting table widths
      4m 48s
    9. Creating rounded-corner tables
      4m 35s
  10. 28m 22s
    1. Dreamweaver's layout tools
      3m 8s
    2. Tracing images
      4m 58s
    3. Adding AP div tags
      7m 29s
    4. Working with Layout Tables
      6m 55s
    5. Adjusting table widths and nesting tables
      5m 52s
  11. 16m 19s
    1. What is a device?
      3m 14s
    2. Attaching a printer-friendly style sheet
      3m 5s
    3. Styling for print
      7m 41s
    4. Adobe Device Central
      2m 19s
  12. 29m 54s
    1. Rollover rules
      3m 31s
    2. Creating simple rollovers
      5m 36s
    3. Creating disjointed rollovers
      7m 12s
    4. Creating navigation bars with multiple states
      9m 21s
    5. Creating Flash buttons
      4m 14s
  13. 26m 32s
    1. Viewing the code
      6m 9s
    2. Editing in Code view
      3m 0s
    3. The Code toolbar
      5m 11s
    4. Working with Code Collapse
      4m 27s
    5. The Quick Tag Editor
      2m 20s
    6. Working with snippets
      5m 25s
  14. 32m 45s
    1. About forms
      3m 23s
    2. Adding text fields
      9m 52s
    3. Adding checkboxes and radio buttons
      5m 37s
    4. Adding lists and menus
      6m 5s
    5. Submitting form results
      3m 23s
    6. Styling form elements with CSS
      4m 25s
  15. 23m 17s
    1. Opening a new browser window
      9m 38s
    2. Creating a popup message
      2m 50s
    3. Validating text fields
      2m 42s
    4. Getting more behaviors
      7m 2s
    5. Removing extensions
      1m 5s
  16. 14m 58s
    1. External image editor preferences
      3m 18s
    2. Built-in image editing tools
      3m 11s
    3. Roundtrip editing from Dreamweaver to Fireworks or Photoshop
      4m 39s
    4. Copying and pasting
      3m 50s
  17. 34m 16s
    1. Templates in action
      5m 12s
    2. Creating a new template
      6m 36s
    3. Applying templates
      3m 36s
    4. Modifying a template
      1m 40s
    5. Adding repeating regions
      3m 28s
    6. Working with repeating regions
      3m 13s
    7. Adding optional regions
      3m 34s
    8. Creating a library item
      3m 48s
    9. Modifying a library item
      3m 9s
  18. 13m 2s
    1. Using the History panel
      4m 24s
    2. Saving History steps as commands
      3m 25s
    3. Using Find and Replace
      5m 13s
  19. 14m 44s
    1. W3C accessibility guidelines
      4m 6s
    2. Accessibility preferences
      1m 29s
    3. Inserting accessible images
      3m 2s
    4. Inserting accessible tables
      2m 53s
    5. Inserting accessible form objects
      3m 14s
  20. 26m 17s
    1. About media objects
      2m 6s
    2. Linking to audio and video files
      5m 56s
    3. Embedding audio and video files
      7m 7s
    4. Setting parameters
      4m 27s
    5. Inserting Flash content
      2m 37s
    6. Inserting Flash video
      4m 4s
  21. 28m 47s
    1. Getting site reports
      3m 35s
    2. Checking links sitewide
      3m 30s
    3. Signing up with Tripod
      6m 36s
    4. Entering remote info
      4m 13s
    5. Publishing your site
      5m 41s
    6. Updating and publishing pages
      5m 12s
  22. 44s
    1. Goodbye
      44s

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 CS3 Essential Training.

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.