Based on a simple test I ran, I don't think it's possible to put an inline <style> tag into an ASP.NET server control. The style did not end up rendering to the output HTML. Even if it was possible, I'm sure it is bad practice to do this.
Is it possible to do this? I can see it being useful for quick prototypes that just have 1 or 2 CSS classes to apply.
Intellisense won't give you hints but you can do this:
<asp:Label ID="Label1" runat="server" Text="Label" style="color:Red;"></asp:Label>
According to www.w3schools.com:
The style element goes in the head section. If you want to include a style sheet in your page, you should define the style sheet externally, and link to it using <link>.
So it's not a good idea to include style elements (e.g. a <style type="text\css"></style> block) in a control. If you could, it'd probably have an effect in some browsers but it wouldn't validate and is bad practice.
If you want to apply styles inline to an element then either of these would work:
C#
myControl.Attributes["style"] = "color:red";
myControl.Attributes.Add("style", "color:red");
VB.NET
myControl.Attributes("style") = "color:red";
myControl.Attributes.Add("style", "color:red");
But bear in mind that this will replace any existing styles that are set on the style attribute. This may be a problem if you try setting styles in more than one place in the code so is something to watch out for.
Using CSS classes would be preferable as you can group multiple style declarations and avoid redundancy and page bloat. All controls derived from WebControl have a CssClass property which you can use, but again be careful not to overwrite existing classes that have been applied elsewhere.
If you use Attributes["style"], you are overwriting the style each time you call it. This can be an issue if you are making the call in two different sections of code. As well, it can be an issue because the framework includes properties for basic settings like border and colour that also will be applied as inline styles. Here is an example:
// dangerous: first style will be overwritten
myControl.Attributes["style"] = "text-align:center";
// in some other section of code
myControl.Attributes["style"] = "width:100%";
To play nicely, set styles like this instead:
// correct: both style settings are applied
myControl.Attributes.CssStyle.Add("text-align", "center");
// in some other section of code
myControl.Attributes.CssStyle.Add("width", "100%");
I think you will have to add it as an attribute to the server control... for it to render to HTML.
So basically (in C#),
ControlName.Attributes["style"] = "color:red";
Related
I have an iframe, and I want to set the style inside attribute srcdoc using only CSS.
<iframe name="myFrame" srcdoc="<span>Hi</span>"> </iframe>
Is it possible to set the style of span inside srcdoc without using inline style but only style sheet?
If not, I can only put the whole html coding inside srcdoc to change the style?
CSS styles of an iframe are independent from main page appearance. And it is not possible to manipulate externally its design.
Relating to srcdoc attribute, I do not understand what you want. About it, MDN says: "This attribute is expected to generally be used together with the sandbox attribute".
You could try to do it with Javascript by changing the attribute. I am not sure if that is a possible solution for you. But if it is, create a function that can dynamically change the attribute to whatever you want. That way you don't have add it statically inline.
I will give you an quick example below.
document.getElementsByTagName("iframe")[0].setAttribute("srcdoc", "demoValue");
And to change the style of the inner span all you have to do is assign it an id. And make a rule in your CSS, this will alow you to manipulate it both in Js and CSS.
If the iframe is not in the same domain you will not be able to modify the content client side. You will have to read the page using PHP and echo it from your domain.
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.