View your cart / checkout

Dreamweaver Tutorials - CSS Basics

Dreamweaver - Basics
Dreamweaver Tutorials Home
Setting up a site using the Site Definition
Creating Hyperlinks in Dreamweaver
Creating Image Roll Overs in Dreamweaver
Creating a basic table Dreamweaver
Fonts and Font Sizes in Dreamweaver
Creating Image Maps in Dreamweaver
Positioning an Image with CSS
Server Side Includes in Dreamweaver
Beginners CSS Tutorial

Learn how to use Dreamweaver & CSS Styles to format text in your web site.

Mention CSS or Cascading Style Sheets to a novice web designer and their eyes just glaze over, and really CSS is easy to learn, what’s more Dreamweaver is packed with tools that makes working with CSS a lot faster and a whole lot easier.
CSS is used for a lot more than just coloring or resizing fonts, it can be used to position elements (CSS2), it can remove or add space to tables, forms or other elements it can even control the size of your images. A few hours learning will make your life so much easier, and you’ll be able to build compliant web sites that load quickly and render correctly on all browsers.

View Dreamweaver basics in video format: Beginners Dreamweaver Tutorial Videos.
Watch this tutorial on Video.

In this tutorial we are going to go over a couple of the basic points, this should give you a fundamental understanding.

1. Let's Create Our First CSS Style.
Lets start with the simple option, embedded styles
Simply follow these steps:

1 If the styles windows is not option either click > Window > CSS Styles or hit shift F11

At the bottom of the styles panel you will see a icon the resembles a page with a black + on top of it,

click it, this will launch the “New CSS Rule “ Box.

In the name field type a name for your style e.g newtext , under Selector Type select “Class ( can apply to any tag ) move to the bottom of the box and check “ This Document Only”. Now click OK.

The CSS Rule Definition box loads, this is the area where we set the values for our new CSS style. Since this is an introductory lesson lets keep it simple, select a font-family from the Font Drop-Down, enter 12 and select Pixels under the “Size” and for the Weight select bold, and change the color to red.

2. Applying Styles to text
All we have to do now is apple that CSS rule to some text, go head and type some text on the page, select the text and then right click with your mouse, from the contextual menu, Select  CSS Styles and click on your newly created rule.

Other CSS Stuff you may like to know.

  • CSS can create neat text rollovers without JavaScript, and it’s easy to do.
  • CSS can remove underlines from links and borders from around images
  • Form elements can be controlled, space can be removed from the form tag, it can even be made into an inline element, just like text .
  • The example above used simple embedded styles, styles can also be in external files or inline CSS can be added to an html element, an example of this would be:

    <p style=”color:red; font-size:12px; font-weight:bold;”> some text here </p>