How to use a cascading style sheet? in ASP.NET

Advertise with us

Control Panel Forum Hosting Help ASP.NET 4.5 & SQL 2012 Hosting Resources Notice

Home » Questions & Answers » How to use a cascading style sheet?

How to use a cascading style sheet?

08 Mar, 08

Author: goldahmeir calimag
uslt

I don't know how to use a style sheet.

Answers .............

Author: Awais Mushtaq

University College of Textile Engineering

Posted Date: 09 Mar, 08

create a file with some filename and extension of '.css'. Then use <link> tag to import it to your document like

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Also, u can use <style></style> tag to declare the styles you wish to apply to your components within document. But linking is better. Here's an example

body
{
background:url(Images/bg_body_alt.png) repeat-x top center #E8F7F9;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif, Tunga, "Tw Cent";
font-size:62.5%; /* Sets default font size to 10px */
/*font-variant:small-caps;*/
color:#222222;
}
@font-face
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif, Tunga, "Tw Cent";
font-style:normal;
font-weight:normal;
src:url(fonts/trebuc.ttf);
}
*
{
margin:0;
padding:0;
}

img
{
border:0;
}

p
{
margin-bottom:1.75em;
}

a
{
text-decoration:none;
color:#B4C835;
}
a:hover
{
text-decoration:none;
color:#6CC7DC;
}
/* Structure */

#wrapper
{
margin:0 auto;
width:700px;
background:#ffffff;
font-size:1.20em;
}

#header
{
height:140px;
background:url(Images/bg_header_alt.jpg) no-repeat;
}

#menu
{
height:35px;
line-height:35px;
background:url(Images/bg_menu.png) repeat-x;
padding:0 10px;
}

#sidebar
{
float:right;
width:180px;
background:#efefef;
margin-right:10px;
}

#content
{
float:left;
width:500px;
min-height:400px;
}

#footer
{
clear:both;
height:100px;
background:url(Images/bg_footer.jpg) no-repeat;
}

/* Entries */

.entry
{
padding:5px 10px;
text-align:justify;
line-height:1.75em;
}

.entry-title
{
font-size:1.90em;
font-weight:normal;
letter-spacing:-1px;
}

.date
{
font-size:0.9em;
color:#bbb;
cursor:default;
letter-spacing:1px;
}

.comments
{
margin-top:-1em;
}

.comments a
{
color:#6CC7DC;
/*background:url(Images/icon_comment.png) no-repeat 0px 2px;*/
padding-left:20px;
padding-right:2px;
}

.comments a:hover
{
color:#B4C835;
}

/* Menu */

#menu ul
{
list-style-type:none;
}

#menu li
{
float:left;
}

#menu li a
{
padding:0 15px;
display:block;
color:#ffffff;
margin-right:2px;
}

#menu li a:hover
{
background:url(Images/bg_menu_hover.png) no-repeat center center;
}

/* Sidebar */

#sidebar ul
{
list-style-type:none;
margin-top:10px;
}

#sidebar li
{

}

#sidebar li a
{
display:block;
height:20px;
line-height:20px;
color:#222222;
padding-left:5px;
border-bottom:1px solid #dddddd;
}

#sidebar li a:hover
{
background:#edebed;
color:#6CC4D8;
}

#sidebar-bottom
{
height:20px;
background:url(Images/bg_sidebar_bottom.gif) no-repeat top center;
}

/* Footer */

#footer-valid
{
float:left;
padding-top:55px;
padding-left:20px;
cursor:default;
color:#ffffff;

}

#footer-valid a
{
color:#ffffff;
text-decoration:none;
}

#footer-valid a:hover
{
color:#ffffff;
text-decoration:underline;
}

/* Heading's */

h1
{
font-size:2.5em;
font-weight:normal;
cursor:default;
position:relative; top:50px; left:160px;
letter-spacing:1px;
color:#aaaaaa;
font-style:italic;
}

/* Feed */

#feed
{
height:25px;
width:125px;
background:url(Images/bg_feed.gif) no-repeat;
margin:0 auto;
padding-left:26px;
}

a.feed-button
{
display:block;
width:100px;
height:25px;
background:url(Images/button_feed.png) 0 0 no-repeat;
text-decoration: none;
}

a:hover.feed-button
{
background-position:0 - 25px;
}

/* Extra's */

#ad-top
{
width:480px;
height:72px;
/*background:url(Images/aspspider_logo.png) no-repeat;*/
padding:5px;
}

/* Attendance Area */

.attendance
{
font-family:"Trebuchet MS", Arial, Verdana;
font-size:1.70em;
font-weight:normal;
letter-spacing:-1px;
color:#6CC7DC;
text-align:left;
vertical-align:middle;
}

I hope you get the idea.

Author: Andrew Miles

Posted Date: 09 Mar, 08

A very extensive description of the elements on a page you can format. For example if you use this Style sheet you need to refer to this in the web page normally in the head section. If you use Visual Studio.MET the property pages allow you to select the Css sheet you will use.
This link may be of some help http://www.w3schools.com/css/default.asp

Author: Dogukan DEMIR

Dogu Akdeniz Üniversitesi

Posted Date: 09 Mar, 08

you can search in www.google.com and use with Dreamweaver easily.

Author: Marc Villanueva

Posted Date: 09 Mar, 08

a good reference site for css once you have a handle on how it works is http://blooberry.com/indexdot/css/index.html.>

Author: alex talarico

Posted Date: 09 Mar, 08

check out http://www.csszengarden.com this site is awesome for style resources

Author: Roy G. Evangelista

Posted Date: 10 Mar, 08

Check out http://www.w3schools.com. This site provides beginners tutorials for CSS.

Author: Krunal M

NIT

Posted Date: 10 Mar, 08

use asp.net themes, put your css there. select theme, it will automatically included in your pages.

Author: mavimavi

Posted Date: 10 Mar, 08

http://www.w3schools.com
you can find usefull tutorials

Author: florin selea

Posted Date: 10 Mar, 08

put the css file in the html head

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>untitled | Accueil</title>
<link href="include/style.css" rel="stylesheet" type="text/css" />
</head>

Author: praneeth kumar. p

Posted Date: 11 Mar, 08

hi first of all you have to include the stylesheet created in this syntax between the head tag

link rel="stylesheet" href="stylesheetname.css" type="text/css" media="screen" />

Author: LupoIvan

Posted Date: 11 Mar, 08

don`t know

Author: sivaramakrishna

Posted Date: 13 Mar, 08

<LINK rel="stylesheet" type="text/css" href="files\MyStyle.css">

AND Style Sheet file contains like this
/*
# for ID
. For Class
HTML as Tag
*/
body
{
font-weight: bold;
font-size:smaller;
margin: 0px;
background-color:#F2AA00;
}
#menu
{
background-color:#e4cbad;
}
#workarea
{
font-size: smaller;
vertical-align: top;
padding-top: 30px;
}
td
{
font-size:smaller;
}
.controls
{
font-size:smaller;
border-style:groove;
}
.numcontrols
{
font-size:smaller;
border-style:groove;
text-align:right;
}

Author: ashcybs

Posted Date: 13 Mar, 08

Look at the W3C or roseindia tutorials on CSS. They are pretty simple and EXTREMELY powerful. Also look at zengarden (just google it)

Author: WSGCAdmin

Posted Date: 13 Mar, 08

use topstyle

Author: Mohan

Posted Date: 14 Mar, 08

you can use visual studio built in css editor, it can done by clicking the new -> website -> select stlye sheet

or u can use the various free css editor tat is available over the internet

Author: Elijah Manor

Posted Date: 01 Apr, 08

If you use themes in visual studio it will automatically insert the css file into your file instead of having to manually add link references.

Author: frederico

cefet-rn

Posted Date: 01 Apr, 08

i use the topstyle css editor.

Author: radovan

split

Posted Date: 02 Apr, 08

There is a variety of ways you can put CSS files in your project. As for style elements, you can put them inline which is right there where your element stands, secondly you can put style in the head section of a page. Or you can create a CSS file using visual aids shipped with VS 2005 or even better with VS 2008 which offers really cool tools. Once you created your CSS file you can simply drag and drop it into a pages head section where it will be automatically linked to the CSS file. last way is to create a theme folder and inside a skin and/or CSS file. Then go to web.config file and set <pages theme="myTheme" />. It should work.

Author: Jon Bigg

Posted Date: 02 Apr, 08

I prefer to use separate CSS files and refernce them in the page. It keeps the page size down.

Author: bandelhari

jntu

Posted Date: 07 Apr, 08

you can use the style sheet in similar way,as we use in any other page by using the

<link href="include/menustyle.css" rel="stylesheet" type="text/css" />

Author: S Smith

Posted Date: 07 Apr, 08

Watch out for browser compatibilities. What works in IE may not display properly in Firefox and Safari. For example, positioning may be be off if you use 'position: absolute; top: 50px'.

s0smith

Author: steven

Posted Date: 08 Apr, 08

step1:
create a css file and write code like this
#leftNavDIV{
FONT-SIZE:12px;
position:absolute;
top:215px;
left:75px;
width:170px;
height:790px;
background-color:#ffffff;
}
step2:
use this setting like this:
<div id="leftNavDIV">
</div>

Author: Ilshat Aliev

Posted Date: 08 Apr, 08

what is the difference between rel and rev attributes of the link element?

Author: shawn

learning...

Posted Date: 08 Apr, 08

http://aspspider.net/schacko

ASP Learning

Another thing that would be helpful to learn is the difference between widely used browsers, at least FireFox and Internet Explorer...

as you become more familiar with CSS, you'll probably beat yourself senseless trying to find workarounds so your page displays the same across different browsers...

there are many articles scattered across the net for this issue... see

http://www.dev-archive.net/articles/pointers/bugs-ie.html
>

Author: Lhei Billones

Posted Date: 08 Apr, 08

nice thread, hoping I could include a css style in my project website.

Author: Dewaprincess

Posted Date: 08 Apr, 08

Author: Maria Christina Galvao

Chisholm Institute

Posted Date: 08 Apr, 08

you can search in www.google.com and use with Dreamweaver easily.

Author: Dren Sopa

Posted Date: 08 Apr, 08

somebody said:
"I prefer to use separate CSS files and refernce them in the page. It keeps the page size down."

its for security reasons also why you should keep css and html files separate

You must login to post answer for this question.

Total members: 250898
Average new registrations per day (in last 7 days): 11

New Registration: Open

Register Now

Talk to Webmaster
Tony John

Facebook
Google+
Twitter