CSS Softsmith Infotech CSS Cascading Style sheets Enhances

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. • <P STYLE=“color: red; ”></P> will render all texts with in the P tags in red color Softsmith Infotech

Internal • <STYLE TYPE = “text/css”> 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. • <link rel=stylesheet href=“sample. css" type="text/css"> 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 textdecoration: 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: <<type name>> – 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-3 d-light-color: black; Softsmith Infotech