Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating & Using a Class Selector

  • We are going to take a look at a class selector and learn when this type of selector should be used
  • We have a page in our website that contains a listing of specials that are being offered and we want to highlight a portion of the tour description
  • This is a good example of when to use a class, use a class when a tag cannot do what you want
  • Create a new page called specials.html and give it a title of Travel Specials
  • Open specials.txt from the text folder, copy the text and paste it onto our web page
  • Set the first line of text as an H1, and the 2nd paragraph an H2
  • Attach the styles-screen.css style sheet to the page, we will be adding new rules to this style sheet
  • We will duplicate our H1 rule in order to create a new CSS rule for the H2 tag
  • Select the H1 tag, right click and choose Duplicate
  • Change the tag to an H2 and modify the font-size to 1.4em
  • Select the external style sheet in the Sources panel
  • Create a new class called specials by clicking the + in the selectors panel and type .specials
  • Classes require a dot in front of them
  • Set the following styles for your specials:
    • Font-family: Constantia, Lucida grouping within Dreamweaver
    • Font-size: 1.1em
    • Color: #996600
  • Once a class has been created, it must be applied to the content
  • To apply the class, select the text and choose the class name from the properties panel
  • You can use a class as often as you like within a web page

Creating & Using a Class Selector

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Refresh 0:46
  • Basic Paste From .txt to .html 1:27
    • Title
    • Header 1 and Header 2
  • CSS Designer 3:00
    • Adding External Style Sheet
    • Conditional Usage
    • Adding h1 to External Style Sheet
  • Modifying to Create h2 4:10
    • Duplicate Tag
    • Rename Tag
    • Re-size
  • Highlighting Partial Area of <p> 5:40
    • Class Selector
    • Create New Class Selector
    • Naming Class Selector
    • Assigning Properties
  • Defining Class 8:46
    • Select Content
    • Properties
    • Class Section
  • Adjusting Class Properties 9:19
    • Bold
    • Applying Class