Cascading Style sheets: Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the

process of making web pages presentable and it was developed in 1997. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML. CSS is not only beautiful and stylish, but it is also very efficient. Advantages of CSS:

CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website

can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site.

A CSS file contains a list of styling rules that tells the browser what certain HTML elements should look like. For example, you can specify that all text that appears within paragraph tags should be displayed in red, Arial font. Lets see how that works. p {color: red; font-family: Arial;} Here, p is the HTML element we want to style, and we put the desired styles within curly brackets, each rule separated by a semi-colon. This rule will make any text between paragraph tags display in a red Arial typeface.

Three Types of CSS Styles: There are three ways you can add styles to your Web pages:

inline styles embedded styles external 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. <a href="" style="text-decoration: none;">

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 { color: #00f; } </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" /> IMPLEMENTATION OF CASCADING STYLE SHEETS. AIM: To create a webpage for displaying department details using the concept of cascading style sheet in HTML. ALGORITHM: Step 1: Start the process.

Step 2: Create the cascading function, using own tags, we can set the font style and background color. Step 3: Font style comes under the font family and also their cascade file with css extension. Step 4: Create the HTML programs with links sem1,sem2 and design webpage using this cascading. Step 5: In external style sheet, we include the file into the HTML file. Step 6: In inline style sheet, we expand the thing in one line. Step 7:In embedded style sheet, we create the cascade methods inside the html code itself. Step 8: Stop the process.

Sam.css i { font-size:25pt; background-color:black; color:yellow; }

p { font-family:arial; font-size:15pt; background-color:green; } h2 { font-size:18pt; background-color:red; color:blue; } b { background-color:gray; } external.html <html> <head> <link rel="stylesheet" type="text/css" href="sam.css"> </head> <body> <center><h2>V.S.B.ENGINEERING COLLEGE</H2> <i>karudayampalayam</i> <p>karur-639111</p></center> <center><u><h1><b>Department of MCA</h1></u> <h1>welcome to MCA department</h1></center> </b> ^{<br><br><h1> <a href="c:\html\css\sem1.html">Semester I</a><br> <a href="c:\html\css\sem2.html">Semester I</a><br> </h1><br>} </body>

</html>

Inline Style Sheet Sem1.html <html> <body> <center><h2 style="color:brown"> First semester</h2> <h2>5-theory,3-practical</h2></center> <h2 style="font-size:20pt;color:red"> Theory paper<br></h2> <h2 style="color:blue"> programming in c</h2> <h2 style="font-size:18pt;color:green">PST</h2> <h2 style="font-size:20pt;color:blue">business process</h2> <i>data structure</i><br> <b>paper 5</b> <h2 style="color:red">office automation</h2> <h2>c lab</h2> <i style="color:orange">communication lab</i> </body> </html>

Embedded Style Sheet Sem2.html <html> <head> <style type="text/css"> h2 { font-size:16pt;color:blue; } p { font-family:arial; font-size:15pt; color:green; } sup { font-size:18pt; color:orange; } { background-color:blue; } </style> </head> <body> <center> <h1><b>Second semester</h1> <h1>theroy-3 practical-3</h1> </b>

</center> <h1>Theory paper</h1> <h2><u>oops</U></h2> ^DBMS <h1>practical</h1> ^{Algorithm lab} <p>oops lab</p> <h2>dbms lab</h2> </body> </html>