css_presentation by gvkreddyvamsi



Softsmith Infotech

• • • • • 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

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

• 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

• <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

• 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

• 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

• 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

• • • • • • • • 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;
Softsmith Infotech

To top