Video Training – Tutorials

CSS allows greater control over all types of elements of html on a web page, you can control the position of images, alter the look of tables or control the padding and margins that are applied to forms to name but a few of the possible things that can be accomplished with just a basic knowledge of CSS.

In this short tutorial we are going to look at creating a very basic CSS rule to style a block of text.

Before we start let me explain that there are 3 basic ways styles can be attached to a HTML element :-

1/ Via a external style sheet, which does save on bandwidth, since the style sheet is only downloaded once and then cached.

2/ Embedded  styles, which are added to the html tag directly using a parameter of style attached to the tag, this is great for creating mock-ups or testing a style before committing it to a style sheet

3/ The placing the style in the head of the document, this is the simplest and the option we are going to look at in this tutorial.

With Dreamweaver open we need to access the Styles window, if you can’t see the styles window, either hit Shift+F11   or navigate to Windows > CSS Styles.
At the bottom of the styles panel the icon with the black + on top of it is the new styles icon.

 If we click this icon the New CSS Rule Box opens.

 

 

 

 

 

Make sure the top selector ( Class ) is selected, and
in the name field enter a title for our new style, I find it best to stick to conventional letters and steer clear of any special characters, for the purpose of this tutorial I shall type “new text “, make sure the checkbox at the bottom of the dialog box “This Document Only” is checked and hit OK.

We are now presented with the Rule Definition dialog box, it’s this box in which we are going to control the elements which are going to be applied to our simplistic CSS example.

 

 

 

 

 

 

 

 

Making sure that type is selected under the category, I select font and change this to “ Arial, Helvetica, Sans-Serif”

The Size I change to 12 pixels, the Weight I change to Bold, and I will set the Color to a bright red.

Hitting the OK button will write the style directly to the head section of our HTML, which can be seen by selecting the code view in Dreamweaver.

With our style in place, I shall type a couple of lines of text, to apply the CSS all I need to do is highlight the text, right click and from the contextual menu select CSS Styles and then click on our newly formed rule.

View all the Dreamweaver Tutorial Videos