programmatically apply style to an asp.net website

Question

with a new Empty website application

i would like to apply a style to the aspx Page via a fie that holds some custom values of css attributes ,i am not sure which is better approach.

i am still testing the concept , i have a file that holds those values :

width;100px    width;130px    background-color;#aac93f

these values are not hardcoded but generated by another application

and i would like to read it into the application .

i could think of the only two ways i know :

`File.ReadAllLines` or `File.ReadAllText`.

then through code behind set the html elements style properties via proccessed data

htmltag.Style.Add("width", setting1)....etc

OR

I could also load style sheet from dynamic /programmatic data

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<!--   and put a C# server code like below -->

<%=someVariableOrCsMethodReturnedValue%>
</head>

so that will hold a formatted style with the loaded values.

is that the way to load custom values for css style ?

You want the SAME style for **every** html element? Or what exactly? — Blachshma, Dec 17 '12 at 15:45
Using inline styles is frowned for many reasons: styles aren't cached, they're hard to override, etc. An external style sheet is considered the best way to style a website. Have you looked at a CSS preprocessor (Sass, LESS, Stylus)? — cimmanon, Dec 17 '12 at 15:48
@Blachshma i am using it also with id's of each element programmatically or i could go css style approach to give each element a class with — LoneXcoder, Dec 17 '12 at 16:15

score 7 · Answer 1 · edited Aug 23 '17 at 16:30

7

You can load CSS to an object in .NET by using

objectName.Attributes.Add("style", "width:100px; width:130px; background-color:#aac93f");

However, this is not recommended for usage because you make it inline coding for css and upper css settings will not be applied if you have the same attribute.

The best approach will be setting an external CSS class and set all of them in there:

objectName.Attributes.Add("class", "exampleClass");

And in your CSS class having:

.exampleClass{width:100px; width:130px; background-color:#aac93f}

edited Aug 23 '17 at 16:30

Community

1
1

answered Dec 17 '12 at 15:57

Berkay Turancı

3,373
4
32
45

i think it is suitable for my settig as it is formated per `object` as you say i called it `Element` or `HtmlElement` so i could also do it programattically with some loop on all objects/elements so then : current iteration- `currentObject.Attributes.Add("style" ,Settings.elementAt(i));` – LoneXcoder Dec 17 '12 at 17:18

score 5 · Accepted Answer · answered Dec 17 '12 at 16:19

5

The <style> tag can also be used as server control:

<style type="text/css" runat="server" id="htmlCss"></style>

This will generate a field of type HtmlGenericControl in the page.

In one of the page life-cycle events (Page_Load, Page_Init, etc), assign the literal CSS definition like this:

var css = @"
body
{
  background-color:#b0c4de;
}";
htmlCss.InnerHtml = css;

answered Dec 17 '12 at 16:19

devio

36,858
7
80
143

hey devio , thanks ,i liked the idea- gonna give it a little resarch..though could you please supply a little broader usage example? – LoneXcoder Dec 17 '12 at 16:28
i think it's simpler than i thought in first glance , thanks i think i could use this , i will also test with @beko's approcah later as its (seems) more complicated to implement than just string format it – LoneXcoder Dec 17 '12 at 20:07

score 0 · Answer 3 · answered Dec 17 '12 at 16:00

0

You could also write your custom CSS into an asp.net Literal object that you place somwhere in your webform which would render all your css like this...

In your code behind:

Literal1.Text = "<style>" + File.ReadAllText(filepathhere) + "</style>";

In your page would render:

<style>
    .class1
    {
        width: 100px;
    }

    .class2
    {
        width: 100px;
    }
</style>

Then have each of your elements reference the classes included in your css.

answered Dec 17 '12 at 16:00

jmrnet

548
3
11

I think some of the comments here is about avoiding it (?) – LoneXcoder Dec 17 '12 at 16:19
that exactly what i was thinking of doing only that the file holds the value so i should hard code some more html into code behind in some way or use constants as with `HtmlTextWriter` class has in its ...Possession , again... i think it's been advised to refrain from using this approach ? – LoneXcoder Dec 17 '12 at 16:21
devio 's answer is basically the same thing, but I like his better. I'd go with that. – jmrnet Dec 17 '12 at 16:59
yeah sure thanks for that comment though , could you have a look on this ? http://stackoverflow.com/questions/13908695/how-to-save-style-css-values-for-later-use-then-reload-those-values-back – LoneXcoder Dec 17 '12 at 17:03

programmatically apply style to an asp.net website

3 Answers3

Linked