Dreamweaver - HTML and CSS Using Dreamweaver

How to make a CSS Class

Daniel Walter Scott || VIDEO: 21 of 34

Download Exercise Files

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_dwhacud_21

CSS Class selectors

Class Selectors like the earlier Tag Selectors are for styling your type using CSS.

Class selectors are used to style individual words, letters or sentences and are used in conjunction with Tag Selectors.

Class selectors are identified by a full stop at the front of them. e.g.       .blue-big

There is 2 steps to create a class, first is to create it, then you’ll need to apply it. Class selectors can be used more than once.

  1. With your CSS Designer panel open choose main.css from Source.
  2. In the Selectors section, click the + button.
  3. Name your class .blue-big
  4. Note: You can name your classes anything you like remembering not to use any spaces or special characters like @#$%^&*. 
     From the properties section scroll down until you find the text styling.
  5. Choose a blue from the colours and choose 1.8em from the font-size.
    Note: Nothing happens yet. We’ll need to apply the class to some text.

  6. Highlight one word.

  7. In your properties panel choose blue-big from the Class drop menu.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Coming Soon