How do you change the values of a Class inside the Web page?

HTML & CSS
1

Hi,

Sometimes it is just better (faster) to change certain values of a Class inside the Web page rather than do it via CSS file. In these cases how does one do this?

That is for example say we have a CSS class:

.notice_box {
font-family: “Lucida Grande”, Verdana, sans-serif;
font-size: 10px;
width: 250px;
height: auto;
border: 2px dotted blue;
padding: 5px;
}

But at times inside a web page we want the value of width to be something else and we want the Font size to be something else, which value is dynamically set by the user. So how does one do this inside the web page?

I mean what do we add to this to tell it that width for example should be 350 and font-size should be 14 Pix?

<div class=“notice_box”>
…something here…
</div>

Regards,

2

You could add a class to that and tell it font size and width.

Although perhaps it would be more useful to you (I don’t know your setup) to remove the width/fonts on that universal class and then add a class/classes to those elements to set width/anything that can vary between elements.

3

Is it? What’s your rationale for saying that?

It would be good to give a clearer explanation of your situation. Is this being done via a CMS? You can place styles inline (at the point where they apply), in the header of the page (via style tags) or externally (via link tags). The external method is the easiest in terms of them being universally applicable.

4

Hello Ryan,

Can you be more exact?
So I mean what would you add to:

<div class=“notice_box”>
…something here…
</div>

to for example set the font-size to be 14 and background color xyz,
within in the Web page?

Regards,

5

You could set on .notice_box all the other styles that are static. THe ones that won’t vary between elements.

THen you could just add a calss on as such

<div class="notice_box [b]other[/b]">
...something here...
</div>

And then give .other the background/font size.

Inline styles in the HTML may be faster (debatable), but maintenance is a complete nightmare :slight_smile:

6

Just practice CSS a lot :). If you stay on these forums a lot you are sure to run into a fiarly large chunk of issues and it’s just a matter of recognizing it and realizing a potential fix.

7

Hi,

Can you be specific with actual code for this?
I mean what is he exact code to change few elements of a CSS class
inside the web page?

BTW, the way we need to change these values inside the web page is because they are selected by the user in real time as they are viewing that
page. So in real time they can for example select to change the font
and background of a page.

8

Sounds like you will need to turn to javascript and css selectors to do this. Are you using any type of javascript library on the project?

9

If you have any sort of behavior (what you are describing) then you will need JS. In which case any code I give you would be useless (since I would give you the CSS)

Head on over there.