1 / 16

CSS

CSS. 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. Overview. Placing CSS Advantages Selectors CSS Text Colors Links Lists Layers Cursors

kfarr
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Softsmith Infotech

  2. 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

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

  4. 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

  5. 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

  6. 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

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

  8. 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

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

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

  11. Color representation • Common Name • RGB • Hexadecimal Softsmith Infotech

  12. 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

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

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

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

  16. 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; Softsmith Infotech

More Related