• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How To Make A New Text Style (Class)

Participant ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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

TOPICS
How to

Views

216

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Apr 11, 2024 Apr 11, 2024

Votes

Translate

Translate
Community Expert , Apr 11, 2024 Apr 11, 2024

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 au

...

Votes

Translate

Translate
Community Expert , Apr 15, 2024 Apr 15, 2024

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. 

Votes

Translate

Translate
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 13, 2024 Apr 13, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2024 Apr 15, 2024

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 17, 2024 Apr 17, 2024

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines