Hello, I would like to create the css for a data field which is as follows:
<h3>The Island of Sifnos</h3>
<p><img style="float: left; margin-right: 10px; margin-bottom: 5px; border: 1px solid black;" title="A typical picturesque view of a Greek port with fishing vessels" src="http://localhost/bman/images/star_thumbnails/sifnos6_20080808202840.jpg" alt="Greek port with fishing vessels and nets" width="155" height="116" />One of many beautiful Greek islands that I vacationed at in October 2004.</p>
As the field is already coded with elements the information is populated during the process.
I would like to use a class called description which is actually the name of the field in the database to somehow separate the css but do not know how to do it or whether this is possible.
How are those elements populated with that inline CSS? You could just remove the part of the script which gives those styles and replace it wtih the class=“description”
Then you take that CSS in that snippet you posted and put that in your CSS file.
You say that the description element is already created in the HTML (if I understand you right?). You could make the CSS as follows
Hello Ryan, unfortunately their are embedded in the data field of the photo gallery database.
That would mean that I would have to scrap the database field to remove all of the html for all the records.
I was hoping that since the html was there that I could manipulate it somehow someway using css.
Maybe using a span or something like surrounding it with a div and then using > h3? Sorry but I don’t know css that well.
The .description does not exist, I was using it as an example.
The html does appear but I am trying to change its appearance.
The only other alternative that I can think of is to break the field down using php and substring.
Thanks for the reply.
Are you just looking to override that CSS that’s embedded? Using PHP to break up that embedded CSS and translate that to a class would be best, but you can override the CSS that’s embedded if you want.
Okay out of curiosity, how can I override the css that’s embedded?
Otherwise I will probably add a class to those depending on what is easier and what is better logically.
He could use !important and that would be more specific… yet I could also use !important in my embedded CSS and that would be more specific and therefore it would carry more weight.
Also, I’m not a fan of using !important unless it is really essential… and most of the time, it isn’t.
On the other hand, I don’t even think that it is a good practice to force the designer’s view on to the user. We can guess the needs a user has but we can’t really know. Maybe the user wants to use his own stylesheet and make the picture smaller, or the text bigger… he may even need that to make it usable.
He obviously won’t be modifying the embedded CSS to override his styles that he’s going to create though.
I agree with !important but there are often times using it will save yourself from creating complicated selector rules. I use it when I know I can save myself time and hassle. Like if I need to modify google code to make it more responsive (like their search) then yes I’ll certainly overwrite their rules with !important. I use it when I see use for it.
And the user can always override anything the author sets if THEY set !important. If it’s that big of a deal to them, then they will make sure to use it.
I try not to assume anything. Therefore, I don’t assume that the user knows what !important means, or even how to create his own style sheet
So I avoid !important like the plague even that means more work for me.
My job as a coder is to make the viewer’s life easier and helping with the whole UX experience. Forcing stuff just to save me time while developing is not something I will do.
I originally was editing my post with this but if I did that you wouldn’t see this.
This is a topic for another day, but I personally don’t buy into !important being evil and something to always be avoided. The problem is that most developers don’t really have a firm grasp and are proficient with CSS. Even today, many people still don’t fully understand specificity. If they understood that, then they would be able to understand !important better and have a firm grasp as to situations that call for it.
Now to respond to your post - yes the author of the web page has a responsibility to not override user settings that the user might have set. Line height, font size, image sizes…that falls on the user.
Other graphical changes certainly merit the use of !important if the need arises. And as I said, if the user doesn’t like the product you give out, then they have other options. I personally only use !important if I need to override other code like Google or something. Most cases, when creating a website, I try and envision how my selector rules are going to play out so I can have a firm idea of how easily I will be able to override rules that I need. It comes down to planning.
I have a set selector “method” for choosing my selector rules so I don’t need much planning nowadays. I have a set method / routine.
Edit-getting back to the topic on hand, the CSS he wants to modify and override are those of borders, margins, float, etc. Nothing that the user can complain about. I wouldn’t lose sleep over using !important IF I went that route. There are better options like modifying the script to not output it.