Cascading Style Sheet

“Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts,
Size, Colors, Spacing, Bordering etc) to Web documents.

If you want to build modern web sites, you need to know about Cascading Style
Sheets (CSS). CSS gives you the power to style and lay out web sites so they are
usable, compact, good looking, well structured, attractive and easy to maintain.

 CSS stands for Cascading Style Sheet

 CSS is used to apply common look and feel for your web application by styling.

Cascading Style Sheets (CSS) is a style sheet language used to describe the
presentation semantics (the look and formatting) of a document written in a markup
language for example HTML. Its most common application is to style web pages written
in HTML but the language can also be applied to other kind of document as well.

CSS (external) is basically designed to enable the separation of document

content (written in HTML or a similar markup language) from document presentation
(including elements such as the layout, colors, and fonts). This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple pages to share formatting, and reduce
complexity and repetition in the structural content.

Use.
Prior to CSS, nearly all of the presentational attributes of HTML documents were
contained within the HTML markup; all font colors, background styles, element
alignments, borders and sizes had to be explicitly described, often repeatedly, within the
HTML. CSS allows developers to move much of that information to a separate style
sheet resulting in considerably simpler HTML markup.

Syntax.
CSS has a simple syntax and uses a number of English keywords to specify the
names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors and a declaration block { }. A declaration-block consists of a list of
declarations in braces. Each declaration itself consists of a property, a colon (:), and a
value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to
separate each declaration.

P {font-family:@Batang; background-color:Black}

h1 {font-family:@Batang; background-color:Black}
Type.
There are three types of CSS styles:

 Inline styles
Inline styles are styles that are written directly in the tag on the document.
Inline styles affect only the tag they are applied to.

<asp:Button ID=”button1” Runat=”server” style="text-color:red">

 Embedded/ Internal styles

Embedded styles are styles that are embedded in the head of the
document. Embedded styles affect only the tags on the page they are embedded in.

<style type="text/css">

p{font-family:@Batang; background-color:Black}

h1{font-family:@Batang; background-color:Black}

.btn{font-family:@Batang; background-color:Black}

</style>

 External styles
External styles are styles that are written in a separate document and then
attached to various Web documents. External style sheets can affect any document
they are attached to.

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

Sources.
CSS information can be provided by various sources. CSS style information can
be either attached as a separate document or embedded in the HTML document.
Multiple style sheets can be imported.

Priority scheme for CSS sources (from highest priority to the lowest priority):

o Inline styles, inside the HTML document, style information on a single

element, specified using the "style" attribute.
o Embedded style, blocks of CSS information inside the HTML (head) itself
 o External style sheets, i.e., a separate CSS file referenced from the
document.

Advantages.
Uniform look and feel:

It gives uniform look and feel to the web application.

Flexibility / Ease of Maintenance:

When working with large-scale, complex sites, having high styles such as news
and informational sites, advantage of using CSS weighs heavily on the feasibility and
maintenance of the project.

Separation of Content from Presentation:

External CSS facilitates separation of page contents from the presentation that is
from the markup and style. This helps in a more easily manageable and readable
design view of the project.

Site-wide Consistency:

When CSS is used effectively, a global or external style sheet can be used to
affect and style elements site-wide. If the situation arises that the styling of the elements
should need to be changed or adjusted; now these changes can be made by editing
rules in the global or external style sheet. But Before CSS, this sort of maintenance was
more difficult, expensive and time-consuming.

Bandwidth:

A style sheet, whether internal to the source document or separate, will specify
the style once for a range of HTML elements selected by class, type or relationship to
others. This is much more efficient than repeating style information in line for each
occurrence of the element. An external style sheet can be used on multiple pages
without being reloaded, further reducing data transfer over a network.

Page Reformatting:

With a simple change of one line, a different style sheet can be used for the
same page. This advantage provides the ability to tailor a page to different target
devices.
 How to Design External Style Sheet.

Applying CSS to asp.net web application

 Applying CSS is easy

 Create a .CSS File available with Visual Studio .Net
Let say I have create .CSS File and placed it in folder "CSS"

Create Sample .CSS File named "MyCSS.CSS" you can choose suitable name for
.CSS File

Step1: Adding .CSS File to Web application

Now copy and paste the .CSS Content, example

To apply to following style to all Paragraph Tag.
p
{
color:Red;
font-size:x-large;
font-family:Verdana;
background-color:Gray;
}
To apply to following style to all Heading1 Tag.
h1
{
color:Blue;
background-color:Yellow;
font-family:Comic Sans MS;
}
Let say, I want to apply a specific style to Paragraph Tag to some Page3 in my
Web Application, you can do this using "class" attribute of Paragraph Tag, here you
need to apply <p class="pForMyPage3">.
.pForMyPage3
{
color:Gray;
font-size:x-large;
font-family:Verdana;
background-color:Red;
}

Similarly I have used same for button control.

.ButtonControl
{
background-color:Red;
color:Yellow;
}

Step2: Adding content to .CSS File

Step 3: Adding .CSS File Link into .aspx Page
See figure for knowing how to apply CSS to control and adding link tag.

http://www.htmlhelp.com/reference/css/ >> CSS Structure and Rules, CSS Properties

http://www.htmlhelp.com/reference/css/structure.html >> Read Basic Rules

http://www.htmlhelp.com/reference/css/properties.html >> Read All Properties

Optional Note: Learn additional different CSS chapters in detail using the link below.

http://www.w3schools.com/css/default.asp