1. Softsmith Infotech CSS

2. Softsmith Infotech CSS Cascading Style sheets Enhances look and feel of the site Adds more features to plain HTML Can define properties as Styles Three ways of adding CSS: –External –Inline –Internal

3. Softsmith Infotech Overview Placing CSS Advantages Selectors CSS –Text –Colors –Links –Lists –Layers –Cursors –Scrollbars

4. Softsmith Infotech Inline With the help of STYLE attribute of each tag we can define CSS styles. will render all texts with in the P tags in red color

5. Softsmith Infotech Internal will enable us to add CSS to our HTML page This should be defined in the head section The style is applied to elements with in that page

6. Softsmith Infotech External Using LINK tag we can define CSS properties to our page We can refer to an external file that is of type.css and the properties defined there will be used in the page where we refer. This can be used if we need the style to be applied throughout the website.

7. Softsmith Infotech Advantages Can define styles in one file and can re use it through out instead of repeating everywhere Can easily modify the look of the whole website Can easily maintain consistency in design Can redefine existing tags (either locally or globally) or even define our own styles.

8. Softsmith Infotech Selectors Tag Selector –When defined for a tag, the same property is applied through out Class Selector –When defined for a class, same tag can have different classes, and in each class the tag’s behavior varies ID Selector –For each ID we can define properties

9. Softsmith Infotech CSS Text Font-family Font-style Font-variant Font-weight Font-size

10. Softsmith Infotech CSS Color Color Background-color Background-image Background-repeat Background-attachment Background-position Background

11. Softsmith Infotech Color representation Common Name RGB Hexadecimal

12. Softsmith Infotech CSS Links A:link A:visited A:active A:hover We can define any text properties –text-decoration:none or text- decoration:underline

13. Softsmith Infotech CSS Lists list-style –type –position –image

14. Softsmith Infotech CSS Layers Div tag Z-index property Position property –These will handle the layering

15. Softsmith Infotech CSS Cursors We can configure cursors on our page In the CSS definition just add –Cursor: > –eg. body{Cursor:hand;}

16. Softsmith Infotech Scrollbars scrollbar-arrow-color: yellow; scrollbar-base-color: black; scrollbar-dark-shadow-color: yellow; scrollbar-track-color: green; scrollbar-face-color: blue; scrollbar-shadow-color: white; scrollbar-highlight-color: silver; scrollbar-3d-light-color: black;