Softsmith Infotech CSS

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

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

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

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

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.

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.

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

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

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

Softsmith Infotech Color representation Common Name RGB Hexadecimal

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

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

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

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

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;