How To Make A New Text Style (Class)

[Gareth_Williams]

Hi everybody, I’ve Googled it and tried to find videos on YouTube but I can’t figure it out! When you write some text in a webpage, if you select it you can change the properties in the properties panel with the CSS tab, such as font style, size and colour. However, how do you make those settings into a class so you can select it in the “class” dropdown menu in the HTML panel? I absolutely can not believe I can’t find this out on Google ot YT but I can’t! Sorry about that!

Thanks for your help,
Gareth

[L e n a · Accepted solution]

You should find your way, using those links 😉 :

• https://www.youtube.com/watch?v=Y3cTMJ5kKiQ or https://www.youtube.com/watch?v=Xn8sD1G_lh4
• https://helpx.adobe.com/dreamweaver/using/apply-remove-or-rename-css.html

[Jon Fritz · Accepted solution]

I'm not sure what you're searching for, but there are tons of resources online for this (as illustrated by Lena).

The quick and dirty step-by-step is...

1. Open your CSS Designer (Shift + F11 if it's closed)
2. Click the + in the Sources section of the CSS Designer
3. Choose your Source, typically either an "attach existing" for an external sheet,  or "define in page" which adding a set of <style> tags
4. Click the + in the Selectors section of the CSS Designer
5. Add a class name over whatever DW auto-fills. Make sure to include the . in front (example: .red-text) and hit Enter
6. Next, in the Properties section of the CSS Designer (not in the main Properties Window yet), choose all the settings you want
7. Finally, select the text you want to affect in Design View, and choose the new class from the Class dropdown menu under the CSS tab in the main Properties window

[Gareth_Williams]

Ok, thanks both. I'll have a look at this after work tomorrow. Hopefully it will be Ok. I'll update the thread and let you know. 🙂

[Gareth_Williams]

It almost worked! I did everything without problems but when I selected the new class in the drop down menu, the colour was black, not the colour I selected in the CSS Designer. Anyway, I went into the CSS part of the properties panel and clicked on “edit rule” and it let me enter the settings again. This seemed to work but when I selected some text already in the document and selected the new class again it didn’t change it.

I’ll watch those videos next and see if that reveals the mystery. I’ve got to make tea now and then go out tonight. Hopefully I will get some time to work on this tomorrow morning. Thanks again for your help.

[Jon Fritz]

We would need to see your code to be sure, but...

Generally when you set a color for text in a css class, and it doesn't show up, it means you have another class, id, or element that is overriding it. Usually some place later in your css file or <style> tagset there's something interfering with the color setting.

It's also possible you set a color for something like "text-shadow" instead of "color" to affect the text. The CSS Designer is a poorly designed clunker of a window.

[Gareth_Williams]

Ok, thanks guys. I haven’t watched those videos because the written direction pretty much worked. I have marked the videos as correct. I’ll watch them when I get time. Hopefully tonight.

The only problem with the written directions is, after hitting enter when you name the class, the options to set the properties do not appear. Though they did the first time I did it! If you click on the properties section of the CSS Designer and then click on the “T” text icon you get some property options but in a different format to before! Anyway, this does work do I’m Ok now. Thanks again for your help.

[Jon Fritz · Accepted solution]

I'm guessing here, but be sure to uncheck the "Show Set" checkbox on the right side in the Properties section of the CSS Designer.

If that box is checked, and you have few or no properties set, it will appear very limited or blank. 

[Gareth_Williams]

Thanks. I can't rememeber if I had that checked. I'll have to wait until next time I do it to see what difference that makes. I'll keep an eye on that!

[Nancy OShea]

A re-usable class is prefixed by a dot.  Open your stylesheet CSS file in CODE View panel.

Use Dreameaver's code hints & auto code-completion features.  They're much faster and more precise than CSS panels.

.classname {

   property: value;

   property: value;

}

Ctrl / Cmd + S to SAVE stylesheet.  One your stylesheet is saved, you should see the classname in your Properties panel.

HTML:

<p class="clasname">This is a paragraph.</p>

Hope that helps.