CSS  (Cascading Style Sheets)‏
Already Know <ul><li>Before you continue you should have a basic understanding of the following: </li></ul><ul><li>HTML / ...
CSS Introduction <ul><li>Styles define  how to display HTML elements </li></ul><ul><li>External Style Sheets can save a lo...
Styles Solved a Big Problem <ul><li>Development of large web sites, where fonts and color information were added to every ...
CSS Saves a Lot of Work! <ul><li>Styles are normally saved in external .css files. </li></ul><ul><li>External style sheets...
CSS Syntax <ul><li>h1{color:red;font-size:12px;} </li></ul><ul><li>h1=selector </li></ul><ul><li>The selector is normally ...
CSS Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>...
CSS ID <ul><li>The id selector is used to specify a style for a single, unique element. </li></ul><ul><li>The id selector ...
Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>#par...
CSS Class <ul><li>The class selector is used to specify a style for a group of elements. </li></ul><ul><li>Unlike the id s...
Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>.cen...
Three Ways to Insert CSS <ul><li>External style sheet </li></ul><ul><li>Internal style sheet </li></ul><ul><li>Inline styl...
External Style Sheet <ul><li>An external style sheet is ideal  </li></ul><ul><li>when the style is applied to many pages. ...
Internal Style Sheet <ul><li>An internal style sheet should be used when a single document has a unique style. </li></ul><...
Inline Styles <ul><li>To use inline styles you use the style attribute in the relevant tag. </li></ul><ul><li>The style at...
CSS Styling <ul><li>Styling Backgrounds </li></ul><ul><li>Styling Text </li></ul><ul><li>Styling Fonts </li></ul><ul><li>S...
Styling Backgrounds <ul><li>CSS properties used for background effects: </li></ul><ul><li>background-color </li></ul><ul><...
Styling Text <ul><li>Text Color </li></ul><ul><li>Text Alignment </li></ul><ul><li>Text Decoration </li></ul><ul><li>Text ...
Styling Fonts <ul><li>Font Family </li></ul><ul><li>Font Style </li></ul><ul><li>Font Size </li></ul><ul><li>Font-weight <...
Styling Lists <ul><li>Set different list item markers for ordered lists </li></ul><ul><li>Set different list item markers ...
Styling Tables <ul><li>Table Borders </li></ul><ul><li>Table Width and Height </li></ul><ul><li>Table Text Alignment </li>...
The CSS Box Model <ul><li>Content </li></ul><ul><li>Border </li></ul><ul><li>Outline </li></ul><ul><li>Margin </li></ul><u...
Content <ul><li>The content of the box, where text and images appear </li></ul>
CSS Border <ul><li>A border that lies around the padding and content. </li></ul><ul><li>Border Style </li></ul><ul><li>Bor...
CSS Outlines <ul><li>An outline is a line that is drawn around elements, outside the border edge </li></ul><ul><li>The out...
CSS Margin <ul><li>Clears an area around the border. </li></ul><ul><li>The margin does not have a background color </li></...
CSS Padding <ul><li>The padding clears an area around the content (inside the border) of an element. </li></ul><ul><li>The...
Grouping Selectors <ul><li>To minimize the code, you can group selectors. </li></ul><ul><li>Separate each selector with a ...
Example <ul><li>h1,h2,p </li></ul><ul><li>{ </li></ul><ul><li>color:green; </li></ul><ul><li>} </li></ul>
Thank You Presented by P.Venkatachalam
Upcoming SlideShare
Loading in …5
×

CSS

3,670 views

Published on

Introduction to css

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,670
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
249
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. CSS (Cascading Style Sheets)‏
  2. 2. Already Know <ul><li>Before you continue you should have a basic understanding of the following: </li></ul><ul><li>HTML / XHTML </li></ul>
  3. 3. CSS Introduction <ul><li>Styles define how to display HTML elements </li></ul><ul><li>External Style Sheets can save a lot of work </li></ul><ul><li>External Style Sheets are stored in CSS files </li></ul>
  4. 4. Styles Solved a Big Problem <ul><li>Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. </li></ul><ul><li>To solve this problem,created CSS. </li></ul><ul><li>All formatting could be removed from the HTML document, and stored in a separate CSS file. </li></ul><ul><li>All browsers support CSS today. </li></ul>
  5. 5. CSS Saves a Lot of Work! <ul><li>Styles are normally saved in external .css files. </li></ul><ul><li>External style sheets enable you to change the appearance and layout of all the pages in a Web site </li></ul><ul><li>Just by editing one single file! </li></ul>
  6. 6. CSS Syntax <ul><li>h1{color:red;font-size:12px;} </li></ul><ul><li>h1=selector </li></ul><ul><li>The selector is normally the HTML element you want to style </li></ul><ul><li>Each declaration consists of a property and a value </li></ul><ul><li>CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets </li></ul>
  7. 7. CSS Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>p{color:red;text-align:center;} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Hello World!</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. CSS ID <ul><li>The id selector is used to specify a style for a single, unique element. </li></ul><ul><li>The id selector uses the id attribute of the HTML element, and is defined with a &quot;#&quot; </li></ul>
  9. 9. Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>#para1{text-align:center;color:red;} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;para1&quot;>Hello World!</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  10. 10. CSS Class <ul><li>The class selector is used to specify a style for a group of elements. </li></ul><ul><li>Unlike the id selector, the class selector is most often used on several elements. </li></ul><ul><li>This allows you to set a particular style for any HTML elements with the same class. </li></ul><ul><li>The class selector uses the HTML class attribute, and is defined with a &quot;.&quot; </li></ul>
  11. 11. Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>.center{text-align:center;} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1 class=&quot;center&quot;>Center-aligned heading</h1> </li></ul><ul><li><p class=&quot;center&quot;>Center-aligned paragraph.</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  12. 12. Three Ways to Insert CSS <ul><li>External style sheet </li></ul><ul><li>Internal style sheet </li></ul><ul><li>Inline style </li></ul>
  13. 13. External Style Sheet <ul><li>An external style sheet is ideal </li></ul><ul><li>when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. </li></ul><ul><li>Each page must link to the style sheet using the <link> tag </li></ul>
  14. 14. Internal Style Sheet <ul><li>An internal style sheet should be used when a single document has a unique style. </li></ul><ul><li>You define internal styles in the head section of an HTML page, by using the <style> tag </li></ul>
  15. 15. Inline Styles <ul><li>To use inline styles you use the style attribute in the relevant tag. </li></ul><ul><li>The style attribute can contain any CSS property </li></ul>
  16. 16. CSS Styling <ul><li>Styling Backgrounds </li></ul><ul><li>Styling Text </li></ul><ul><li>Styling Fonts </li></ul><ul><li>Styling Links </li></ul><ul><li>Styling Lists </li></ul><ul><li>Styling Tables </li></ul>
  17. 17. Styling Backgrounds <ul><li>CSS properties used for background effects: </li></ul><ul><li>background-color </li></ul><ul><li>background-image </li></ul><ul><li>background-repeat </li></ul><ul><li>background-attachment </li></ul><ul><li>background-position </li></ul>
  18. 18. Styling Text <ul><li>Text Color </li></ul><ul><li>Text Alignment </li></ul><ul><li>Text Decoration </li></ul><ul><li>Text Transformation </li></ul>
  19. 19. Styling Fonts <ul><li>Font Family </li></ul><ul><li>Font Style </li></ul><ul><li>Font Size </li></ul><ul><li>Font-weight </li></ul>
  20. 20. Styling Lists <ul><li>Set different list item markers for ordered lists </li></ul><ul><li>Set different list item markers for unordered lists </li></ul>
  21. 21. Styling Tables <ul><li>Table Borders </li></ul><ul><li>Table Width and Height </li></ul><ul><li>Table Text Alignment </li></ul><ul><li>Table Padding </li></ul><ul><li>Table Color </li></ul>
  22. 22. The CSS Box Model <ul><li>Content </li></ul><ul><li>Border </li></ul><ul><li>Outline </li></ul><ul><li>Margin </li></ul><ul><li>Padding </li></ul>
  23. 23. Content <ul><li>The content of the box, where text and images appear </li></ul>
  24. 24. CSS Border <ul><li>A border that lies around the padding and content. </li></ul><ul><li>Border Style </li></ul><ul><li>Border Width </li></ul><ul><li>Border Color </li></ul><ul><li>Border - Individual sides </li></ul>
  25. 25. CSS Outlines <ul><li>An outline is a line that is drawn around elements, outside the border edge </li></ul><ul><li>The outline properties specifies the style, color, and width of an outline. </li></ul>
  26. 26. CSS Margin <ul><li>Clears an area around the border. </li></ul><ul><li>The margin does not have a background color </li></ul><ul><li>The top, right, bottom, and left margin can be changed independently using separate properties. </li></ul>
  27. 27. CSS Padding <ul><li>The padding clears an area around the content (inside the border) of an element. </li></ul><ul><li>The padding is affected by the background color of the element. </li></ul><ul><li>The top, right, bottom, and left padding can be changed independently using separate properties. </li></ul>
  28. 28. Grouping Selectors <ul><li>To minimize the code, you can group selectors. </li></ul><ul><li>Separate each selector with a comma </li></ul>
  29. 29. Example <ul><li>h1,h2,p </li></ul><ul><li>{ </li></ul><ul><li>color:green; </li></ul><ul><li>} </li></ul>
  30. 30. Thank You Presented by P.Venkatachalam

×