Welcome to www.programmer2programmer.net Its all about programming


 Microsoft Certification
 Final Year Project Idea
 Connection Strings
 Password Recovery
 SQL Injection
 Encryption & Decryption
 LIVE Academic Project
 Project #1 - VB6, Access
  Project #2 - VB.Net, SQL
 Project #3 - ASP, Access
 Project #4 - ASP.NET, C#
 Project #5 - VB6, SQL
 Project #6 - Stegano
 Project #7 - C
 Project #8 - C++
 Project #9 - JAVA, MySQL
 Project #10- PHP, MySQL
 Project #11- JSP, Oracle
 Project #12- C# Face Exp
 Project #13- Mobile Bank
 Download MBA Project
 MBA Project Topic
 Project Viva Question
  2017 New Projects
 Project Synopsis Download
 University Question Paper and Assignment
 SMU - Question Paper
 SMU - Assignment
 SCDL - Assignment
 Interview Question Answer
 General & HR Round
 Visual Basic 6
 VB.Net & C#
 SQL Server
  Oracle and DBA

100% Tested
Ready Academic IT Projects

One stop solution for VB6, VB.Net, C#, ASP.Net, Crystal Report, Oracle, SQL Server, MySql, PHP, XML, AJAX ....
Home Personal Member Forum Source Project Tips Contact  


CSS (Cascading Style Sheets)

What is CSS?
A style sheet is used to view and alter any of the attributes of the tags that control its appearance, You use style sheets to control how HTML tags are formatted. The word cascading means that multiple styles can be used in an individual HTML page and the browser will follow an order called a cascade to interpret the information. Out of the three types of style sheets a designer can use all three simultaneously and the browser will deliver the goods in an orderly an predictable fashion.

With cascading style sheets the important style issue such as fonts, including specific features such as font face, size, font weight font style and leading. Anything that can be displayed with.
1. What is CSS
2. CSS Sample
3. CSS FAQ's

CSS in details.
1. HTML page formatting can be controlled by CSS.
2. CSS stands for Cascading Style Sheets.
3. Style define how to display HTML elements.
4. Styles are normally stored in Style Sheets.
5. External Style Sheets can save you lots of work.
6. External Style Sheet are stored in .css file.

Basic Properties of Style Sheet
The CSS syntax is made up of three parts: a selector, a property and a value.

Selector {Property: Value}

The selector is normally the element or tag you wish to define, the property is the attribute you wish to change, and each property and value are separated by a colon and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-familiy: "sans serif"}

If you wish to specify more than one property, you should separate each property with a semicolon,

p {text-align: center; color: red}

To make the style definition more readable, you can describe one property per line.

  text-align: center;
  color: blue;
  font-family: arial

Grouping : You can group selectors, separate each selector with a comma, in these example we have grouped all the header elements, each header element will be blue.

h1, h2, h3, h4, h5, h6
{ color: blue}

Class : with the class attribute you can define different styles for the same element, say to have two types of paragraphs in your document: one right alligned paragraph, and one center aligned paragraph.

p.right {text-align: right}
p.center {text-align: center}

ID : with the id attribute you can define a unique style that you can use with many element.

#right {text-align: right}

Comments : You can insert comments in CSS to explain your code. which can help you when you edit the source code at a later moment. A comment will be ignored by the browser. A CSS comment begins with /* and ends with */

Types of CSS
1. Inline Style Sheets :  This approach exploits exiting HTML tags within a standard HTML document and adds a specific style to the information controlled by those tags. An example would be controlling the indentation of a single paragraph using the style = "style name" attribute within the <p> tag.

<title> An Inline Style </title>
<body bgcolor= "#C0C0C0">
<p style ="font-family: courier">
This is Style no 1
<p style ="font-family: arial">
This is Style no 2
<p >
This is without style

Output of the above code will be

This is Style no 1

This is Style no 2

This is without style

2. Internal or Embedded Style Sheets : This method allows to control individual pages by using the <style> tag along with </style> the information placed between the <html> and the <body> tag. The style attributes are inserted within the full <style> container. It sets the style attributes for the entire page.

<style type ="text/css" >
hr {color: silver}
p {margin-left: 20 px; font-family: verdana}

3. External Style Sheets : This is a master style sheet stored in an external file, It uses the same syntax you would use with an embedded style. this file uses the ".css" extension. with an external style sheet, you can change the look of an entire web site by changing one file. Each page must link to the style sheet using the <link> tag. the link tag goes inside the head section.

<link rel="stylesheet" tyle ="text/css" href="lightstyle.css">

An external style sheet can be written any text editor like notepad with an extension of ".css". "lightstyle.css" may contain style like.

hr {color: silver}
p {margin-left: 20 px; font-family: verdana}

CSS Attributes

 {font-family: garamond, verdana; font-size: 12 pt; font-weight: bold; font-style: normal color: #732706;background-color=silver }

Sample Style

{color=green; background-color=yellow; font-size: 12 pt; font-weight: bold;}
Sample Style



(C) Atanu Maity, 2006-2007