TeachUcomp, Inc.

 MY CART
  • VIDEO COURSES
    • All-Access Subscriptions
    • Business Licensing
    • Course List
      • Accounting
      • Adobe
        • Acrobat
        • Lightroom Classic
        • Photoshop
        • Photoshop Elements
      • Crystal Reports
      • Employment Skills
        • Interview Skills
        • Resume Skills
      • For Lawyers
        • Excel for Lawyers
        • Outlook for Lawyers
        • QuickBooks for Lawyers
        • Word for Lawyers
      • HTML
      • JavaScript
      • Microsoft Office
        • Access
        • Excel
        • Microsoft Office Suite
        • OneNote
        • Outlook
        • Outlook on the Web
        • PowerPoint
        • Publisher
        • Word
      • Microsoft Project
      • Microsoft Teams
      • QuickBooks Online
      • QuickBooks Pro
      • Sage
        • Peachtree
        • Sage 50
      • SQL
      • Windows
    • Video Course Options
  • SUBSCRIPTIONS
  • MANUALS
    • Adobe
      • Acrobat
      • Lightroom Classic
      • Photoshop
      • Photoshop Elements
    • Crystal Reports
    • For Lawyers
      • Excel for Lawyers
      • Outlook for Lawyers
      • QuickBooks for Lawyers
      • Word for Lawyers
    • HTML
    • JavaScript
    • Microsoft Office
      • Access
      • Excel
      • OneNote
      • Outlook
      • Outlook on the Web
      • PowerPoint
      • Publisher
      • Word
    • Microsoft Project
    • Microsoft Teams
    • QuickBooks Online
    • QuickBooks Pro
    • Sage
      • Peachtree
      • Sage 50
    • SQL
    • Windows
  • REFERENCE CARDS
    • Adobe
      • Acrobat DC
      • Lightroom Classic CC 2018
      • Photoshop 2021
      • Photoshop 2020
      • Photoshop CC 2018
      • Photoshop Elements 2023
      • Photoshop Elements 2022
      • Photoshop Elements 2021
      • Photoshop Elements 2020
      • Photoshop Elements 2019
      • Photoshop Elements 2018
      • Photoshop Elements 15
    • Google
      • Google Classroom for Teachers
      • Google Docs
      • Google Drive
      • Google Forms
      • Google Sheets
      • Google Slides
    • Mac OS
      • Mac OS Ventura-Mojave Keyboard Shortcuts
    • Microsoft Office
      • Microsoft Office 365
        • Access for Office 365
        • Excel for Office 365
        • Microsoft Office 365
        • Outlook for Office 365
        • PowerPoint for Office 365
        • Publisher for Office 365
        • Word for Office 365
      • Microsoft Office 2021
        • Access 2021
        • Excel 2021
        • Microsoft Office 2021
        • Outlook 2021
        • PowerPoint 2021
        • Publisher 2021
        • Word 2021
      • Microsoft Office 2019
        • Access 2019
        • Excel 2019
        • Microsoft Office 2019
        • Outlook 2019
        • PowerPoint 2019
        • Publisher 2019
        • Word 2019
      • Microsoft Office 2016
        • Access 2016
        • Excel 2016
        • Microsoft Office 2016
        • OneNote 2016
        • Outlook 2016
        • PowerPoint 2016
        • Publisher 2016
        • Word 2016
      • Microsoft Office 2013
        • Excel 2013
        • Microsoft Office 2013
        • OneNote 2013
        • Outlook 2013
        • PowerPoint 2013
        • Word 2013
      • Microsoft Office for iPad
        • Microsoft Office for iPad
    • Microsoft Teams
      • Microsoft Teams
    • QuickBooks Online
      • QuickBooks Online
    • QuickBooks Pro
      • QuickBooks Pro 2023
      • QuickBooks Pro 2022
      • QuickBooks Pro 2021
      • QuickBooks Pro 2020
      • QuickBooks Pro 2019
      • QuickBooks Pro 2018
      • QuickBooks Pro 2017
      • QuickBooks Pro 2016
      • QuickBooks Pro 2015
      • QuickBooks Pro 2014
    • Sage
      • Sage 50 2019
      • Sage 50 2018
    • SQL
      • SQL
    • Windows
      • Windows 11
      • Windows 11 and 10 Keyboard Shortcuts
      • Windows 10
  • STICKERS
    • Chrome OS
      • Chrome OS for Chromebooks
    • Mac OS
      • Mac OS Ventura
      • Mac OS Monterey-Mojave
    • Microsoft Office
      • Word and Excel (Mac) 2022
      • Word and Excel (PC/Windows) 2021-2016 and 365
    • QuickBooks Desktop
      • QuickBooks Desktop (PC/Windows) 2023
      • QuickBooks Desktop (PC/Windows) 2022-2015
    • Windows
      • Windows 11 and 10
  • SUPPORT
    • Company
      • About Us
      • Blog
      • Contact Us
      • Our History
      • Our Philosophy
        • Customer Service
        • Mission
      • Policies
      • Testimonials
    • Contact Us
    • FAQ
    • Help
    • Lost Password
    • Register a Product
  • LOGIN
    • Manage My Account
    • Member Login
    • My Courses
Shop Now

How to Use CSS Basics in Adobe Dreamweaver CS5

by Keeley Byrnes / Thursday, November 14 2013 / Published in Dreamweaver

 Working with Cascading Style Sheets

When creating websites, its important to understand the basics of CSS (which is short for “Cascading Style Sheets.”) You can use CSS in Dreamweaver to create complex and appealing web pages. Please note that it is not necessary to understand the theory behind CSS in order to use Dreamweaver effectively. CSS provide a versatile, precise and efficient means of controlling the appearance of content on your web page. With CSS, you can create web page designs that will appear as you intend on both large and small computer screens. CSS is also helpful when creating styles to align and position elements on your web page.

CSS works by applying instructions to the content of the web page. You can select either default CSS instructions provided by Dreamweaver or you can create custom instructions. These instructions can apply to just the content of one element on a page or to all of the pages on your website. When using traditional web page design, it is necessary to repeat the instructions for each page over and over again. CSS, however, is versatile enough to permit site-wide changes to a page element, like a heading, for example. These changes will apply to multiple pages and not just the one on which you are currently working.

In Dreamweaver there are four different style selector types: (1) the tag selector, which redefines existing HTML tags; (2) the class selector, which creates new styles that will apply to any chosen element on a web page, (3) the ID selector, which creates styles that are used to change an element once per page, and (4) the Compound selector, which combines two or more style definitions for maximum control of your page’s content and appearance.

 

 

Editing CSS Styles

It is easy to edit CSS styles in Dreamweaver using the CSS button in the Properties Inspector. First, click an element on the page that you want to format. Now click on the “CSS” button below the “HTML” button on the left side of the Properties Inspector. You will see that the CSS options now appear in the Properties Inspector.

Click the “Edit Rule” button in the Properties Inspector and the “CSS Rule Definition” dialog box will open. Click on “Type” from the “Category” menu and then click the downward-pointing triangle next to the “Font-family” text field. Choose a different font collection.

Next, click on the “Color” square to open the color cubes menu and choose a new font color with the dropper. When you have made your selections click “OK.”

Now, click in the “CSS styles” panel on the “Rule” you have just modified. You will see that the Style Rule appears as recently modified and its properties are displayed in the “Properties” tab below.

In this example, the font type and color for the “paragraph” text have been changed to Arial and green.

 

 

Creating Class Styles

“Class Styles” are used to format text and other elements on your web page without affecting HTML tags. You can then apply those styles to elements of your page just like you could with HTML tags.

To create a Class Style first click on “CSS Styles” from the “Format” drop-down menu found in the Menu Bar. Next, choose “New” from the menu bar which appears. This will open the “New CSS Rule” dialog box.

Click on the small black triangle in the first drop-down menu and select “Class”. Type a name for your new heading class style without spaces, special characters or any additional punctuation. We will call this Class Style “specialheading.” All class style names must begin with a period and Dreamweaver will add one for you automatically.

Choose “This Document Only” from the “Rule Definition” drop-down menu. Click “OK.” This will open the “CSS Rule Definition” dialog box. Select a Style category from the left side and change the style settings you desire. Let’s modify the font type, size and color. Click “OK.”

Next, click on the CSS Styles panel. The CSS Styles panel will display the new “specialheading” class style you have created. You can now apply the class style to the appropriate headings on your web page using the Properties Inspector. We will see how to do this in the next lesson.

Class styles are ideally used to quickly format content, such as headings and captions that may appear multiple times throughout the same web page.

 

DW CSS

 

 

For more help on Dreamweaver, check out our tutorial.

Tagged under: basics, cascading style sheet, create, cs3, cs4, cs5, css, dreamweaver, dreamweaver training, dreamweaver tutorial, how-to, training, tutorial, website

About Keeley Byrnes

Keeley is our Director of Marketing and has been with TeachUcomp since 2010. Keeley manages all aspects of our Marketing Department, acts as liaison for our reseller and affiliate partners and also authors courses in software and taxation.

What you can read next

Publishing a Website- Domain Names and Web Hosting
Dreamweaver Training: Working With Images

 

Recent Posts

  • A picture that shows how to create moving elements in Photoshop Elements.

    Moving Elements in Photoshop Elements – Instructions

    Overview of How to Create Moving Elements in Ph...
  • Layer Types in Photoshop Elements: A picture of a user simplifying a Smart Object layer in Photoshop elements.

    Layer Types in Photoshop Elements- Instructions

    Overview of the Layer Types in Photoshop Elemen...
  • A picture of the training interface for the digital download or DVD versions of our Photoshop Elements training, titled “Mastering Photoshop Elements Made Easy™ v.2023.”

    Photoshop Elements Training

    Photoshop Elements Training for Photoshop Eleme...

Categories

Archives

  • GET SOCIAL

© 2001-2023 Copyright TeachUcomp, Inc. All rights reserved.

TOP
Sale! $49 All-Access -1 Days 23 Hours 53 Minutes 15 Seconds      $199 $49 Entire Library!
See Deal