0
Cascading Style Sheets (CSS) Atul Kahate [email_address]
CSS Basics <ul><li>CSS stands for Cascading Style Sheets  </li></ul><ul><li>Styles define how to display HTML elements  </...
Need for CSS – 1 <ul><li>HTML tags were originally designed to define the contents of a document </li></ul><ul><li>They we...
Need for CSS – 2 <ul><li>The two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attr...
Need for CSS – 3 <ul><li>To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting con...
What Can Styles Do? <ul><li>Define how HTML elements are displayed, just like the font tag and the color attribute in HTML...
Benefit to Developers <ul><li>Allows developers to control the style and layout of multiple Web pages all at once </li></u...
Precedence in Style Sheets <ul><li>What style will be used when there is more than one style specified for an HTML element...
CSS Syntax <ul><li>Consists of three parts </li></ul><ul><ul><li>selector {property: value} </li></ul></ul><ul><ul><li>Sel...
<STYLE> P {color:green} P.red {color:red} </STYLE> Style block Selector Declaration Class
Better syntax for multiple properties <ul><li>p </li></ul><ul><li>{ </li></ul><ul><li>text-align: center; </li></ul><ul><l...
Grouping Selectors <ul><li>h1,h2,h3,h4,h5,h6  </li></ul><ul><li>{ </li></ul><ul><li>color: green </li></ul><ul><li>} </li>...
Class Selector <ul><li>With the class selector you can define different styles for the same type of HTML element </li></ul...
Class Selector Example <ul><li>CSS code </li></ul><ul><ul><li>p.right {text-align: right} </li></ul></ul><ul><ul><li>p.cen...
Comments in CSS <ul><li>/* This is a comment */ </li></ul>
More on Font Families – 1 <ul><li>A font family contains a set of fonts that share common characteristics </li></ul><ul><l...
More on Font Families – 2 <ul><ul><li>Sans-serif – Considered to be readable </li></ul></ul><ul><ul><ul><li>Verdana ,  Ari...
Style Sheet Example – 1 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 2 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 3 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 4 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 5 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 6 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 7 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 8 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 9 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li><...
Style Sheet Example – 10 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li>...
Style Sheet Example – 11 <ul><li>info.css </li></ul><ul><ul><li>h1, h2 { </li></ul></ul><ul><ul><li>font-family: sans-seri...
Style Sheet Example – 12 <ul><li>info.css </li></ul><ul><ul><li>.test { </li></ul></ul><ul><ul><li>line-height: 1.9em; </l...
Lists <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>ul.dis...
Thank you! Questions and Comments Welcome!
Upcoming SlideShare
Loading in...5
×

AK css

771

Published on

CSS classes by Atul Kahate Sir at SICSR

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
771
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "AK css"

  1. 1. Cascading Style Sheets (CSS) Atul Kahate [email_address]
  2. 2. CSS Basics <ul><li>CSS stands for Cascading Style Sheets </li></ul><ul><li>Styles define how to display HTML elements </li></ul><ul><li>Styles are normally stored in Style Sheets </li></ul><ul><li>Styles were added to HTML 4.0 to solve a problem </li></ul><ul><li>External Style Sheets can save you a lot of work </li></ul><ul><li>External Style Sheets are stored in CSS files </li></ul><ul><li>Multiple style definitions will cascade into one </li></ul>
  3. 3. Need for CSS – 1 <ul><li>HTML tags were originally designed to define the contents of a document </li></ul><ul><li>They were supposed to say &quot;This is a header&quot;, &quot;This is a paragraph&quot;, &quot;This is a table&quot;, by using tags like <h1>, <p>, <table>, and so on </li></ul><ul><li>The layout of the document was supposed to be taken care of by the browser, without using any formatting tags </li></ul>
  4. 4. Need for CSS – 2 <ul><li>The two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification </li></ul><ul><li>It became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout </li></ul>
  5. 5. Need for CSS – 3 <ul><li>To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created styles in addition to HTML 4.0 </li></ul>
  6. 6. What Can Styles Do? <ul><li>Define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2 </li></ul><ul><li>Normally saved in files external to your HTML documents </li></ul><ul><li>External style sheets enable you to change the appearance and layout of all your pages, just by editing a single CSS document </li></ul>
  7. 7. Benefit to Developers <ul><li>Allows developers to control the style and layout of multiple Web pages all at once </li></ul><ul><li>As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want </li></ul><ul><li>To make a global change, simply change the style, and all elements in the Web site are updated automatically </li></ul>
  8. 8. Precedence in Style Sheets <ul><li>What style will be used when there is more than one style specified for an HTML element? </li></ul><ul><li>The order is: </li></ul><ul><ul><li>Inline Style (inside HTML element) </li></ul></ul><ul><ul><li>Internal Style Sheet (inside the <head> tag) </li></ul></ul><ul><ul><li>External Style Sheet </li></ul></ul><ul><ul><li>Browser default </li></ul></ul>
  9. 9. CSS Syntax <ul><li>Consists of three parts </li></ul><ul><ul><li>selector {property: value} </li></ul></ul><ul><ul><li>Selector: The HTML element/tag you wish to define </li></ul></ul><ul><ul><li>Property: The attribute you wish to change </li></ul></ul><ul><ul><li>Value: Associated with a property </li></ul></ul><ul><ul><li>The property and value are separated by a colon and surrounded by curly braces </li></ul></ul><ul><ul><li>Examples </li></ul></ul><ul><ul><ul><li>body {color: black} </li></ul></ul></ul><ul><ul><ul><li>p {font-family: &quot;sans serif&quot;} </li></ul></ul></ul><ul><ul><ul><li>p {text-align:center;color:red} </li></ul></ul></ul>
  10. 10. <STYLE> P {color:green} P.red {color:red} </STYLE> Style block Selector Declaration Class
  11. 11. Better syntax for multiple properties <ul><li>p </li></ul><ul><li>{ </li></ul><ul><li>text-align: center; </li></ul><ul><li>color: black; </li></ul><ul><li>font-family: arial </li></ul><ul><li>} </li></ul>
  12. 12. Grouping Selectors <ul><li>h1,h2,h3,h4,h5,h6 </li></ul><ul><li>{ </li></ul><ul><li>color: green </li></ul><ul><li>} </li></ul>
  13. 13. Class Selector <ul><li>With the class selector you can define different styles for the same type of HTML element </li></ul><ul><li>Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph </li></ul><ul><li>Example code follows </li></ul>
  14. 14. Class Selector Example <ul><li>CSS code </li></ul><ul><ul><li>p.right {text-align: right} </li></ul></ul><ul><ul><li>p.center {text-align: center} </li></ul></ul><ul><li>HTML code </li></ul><ul><ul><li><p class=&quot;right&quot;> </li></ul></ul><ul><ul><li>This paragraph will be right-aligned. </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li><p class=&quot;center&quot;> </li></ul></ul><ul><ul><li>This paragraph will be center-aligned. </li></ul></ul><ul><ul><li></p> </li></ul></ul>
  15. 15. Comments in CSS <ul><li>/* This is a comment */ </li></ul>
  16. 16. More on Font Families – 1 <ul><li>A font family contains a set of fonts that share common characteristics </li></ul><ul><li>There are five font families </li></ul><ul><ul><li>Sans-serif Serif </li></ul></ul><ul><ul><li>Serif </li></ul></ul><ul><ul><li>Monospace </li></ul></ul><ul><ul><li>Cursive </li></ul></ul><ul><ul><li>Fantasy </li></ul></ul>
  17. 17. More on Font Families – 2 <ul><ul><li>Sans-serif – Considered to be readable </li></ul></ul><ul><ul><ul><li>Verdana , Arial Black , Trebuchet MS , Arial </li></ul></ul></ul><ul><ul><li>Serif – Similar to newspaper fonts </li></ul></ul><ul><ul><ul><li>Times New Roman , Georgia </li></ul></ul></ul><ul><ul><li>Monospace – Have constant width characters </li></ul></ul><ul><ul><ul><li>Courier New , Agency FB </li></ul></ul></ul><ul><ul><li>Cursive – Look like handwritten text </li></ul></ul><ul><ul><ul><li>Comic Sans , Harrington </li></ul></ul></ul><ul><ul><li>Fantasy – Decorative styles </li></ul></ul><ul><ul><ul><li>Impact </li></ul></ul></ul>
  18. 18. Style Sheet Example – 1 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h1 {color: #00ff00} </li></ul><ul><li>h2 {color: #dda0dd} </li></ul><ul><li>p {color: rgb(0,0,255)} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>This is header 1</h1> </li></ul><ul><li><h2>This is header 2</h2> </li></ul><ul><li><p>This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  19. 19. Style Sheet Example – 2 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h1 {text-align: center} </li></ul><ul><li>h2 {text-align: left} </li></ul><ul><li>h3 {text-align: right} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>This is header 1</h1> </li></ul><ul><li><h2>This is header 2</h2> </li></ul><ul><li><h3>This is header 3</h3> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  20. 20. Style Sheet Example – 3 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h1 {text-decoration: overline} </li></ul><ul><li>h2 {text-decoration: line-through} </li></ul><ul><li>h3 {text-decoration: underline} </li></ul><ul><li>a {text-decoration: none} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>This is header 1</h1> </li></ul><ul><li><h2>This is header 2</h2> </li></ul><ul><li><h3>This is header 3</h3> </li></ul><ul><li><p> </li></ul><ul><li><a href=&quot;http://www.w3schools.com/default.asp&quot;> </li></ul><ul><li>This is a link</a> </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Style Sheet Example – 4 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>p.uppercase {text-transform: uppercase} </li></ul><ul><li>p.lowercase {text-transform: lowercase} </li></ul><ul><li>p.capitalize {text-transform: capitalize} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p class=&quot;uppercase&quot;> </li></ul><ul><li>This is some text in a paragraph </li></ul><ul><li></p> </li></ul><ul><li><p class=&quot;lowercase&quot;> </li></ul><ul><li>This is some text in a paragraph </li></ul><ul><li></p> </li></ul><ul><li><p class=&quot;capitalize&quot;> </li></ul><ul><li>This is some text in a paragraph </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  22. 22. Style Sheet Example – 5 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>body {background-color: yellow} </li></ul><ul><li>h1 {background-color: #00ff00} </li></ul><ul><li>h2 {background-color: transparent} </li></ul><ul><li>p {background-color: rgb(250,0,255)} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>This is header 1</h1> </li></ul><ul><li><h2>This is header 2</h2> </li></ul><ul><li><p>This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. Style Sheet Example – 6 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h3 {font-family: times} </li></ul><ul><li>p {font-family: courier} </li></ul><ul><li>p.sansserif {font-family: sans-serif} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h3>This is header 3</h3> </li></ul><ul><li><p> </li></ul><ul><li>This is a paragraph</p> </li></ul><ul><li><p class=&quot;sansserif&quot;> </li></ul><ul><li>This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  24. 24. Style Sheet Example – 7 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h1 {font-size: 150%} </li></ul><ul><li>h2 {font-size: 130%} </li></ul><ul><li>p {font-size: 100%} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>This is header 1</h1> </li></ul><ul><li><h2>This is header 2</h2> </li></ul><ul><li><p>This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  25. 25. Style Sheet Example – 8 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>p.normal {font-weight: normal} </li></ul><ul><li>p.thick {font-weight: bold} </li></ul><ul><li>p.thicker {font-weight: 900} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p class=&quot;normal&quot;> </li></ul><ul><li>This is a paragraph</p> </li></ul><ul><li><p class=&quot;thick&quot;> </li></ul><ul><li>This is a paragraph</p> </li></ul><ul><li><p class=&quot;thicker&quot;> </li></ul><ul><li>This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  26. 26. Style Sheet Example – 9 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>p.dotted {border-style: dotted} </li></ul><ul><li>p.dashed {border-style: dashed} </li></ul><ul><li>p.solid {border-style: solid} </li></ul><ul><li>p.double {border-style: double} </li></ul><ul><li>p.groove {border-style: groove} </li></ul><ul><li>p.ridge {border-style: ridge} </li></ul><ul><li>p.inset {border-style: inset} </li></ul><ul><li>p.outset {border-style: outset} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li>… </li></ul>
  27. 27. Style Sheet Example – 10 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h1, h2 { </li></ul><ul><li>font-family: sans-serif; </li></ul><ul><li>color: gray; </li></ul><ul><li>border-bottom: 1px solid black </li></ul><ul><li>} </li></ul><ul><li>p { </li></ul><ul><li>color: maroon; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Welcome to my Page! </h1> </li></ul><ul><li><H2> How are you doing? </h2> </li></ul><ul><li><p>This is a paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  28. 28. Style Sheet Example – 11 <ul><li>info.css </li></ul><ul><ul><li>h1, h2 { </li></ul></ul><ul><ul><li>font-family: sans-serif; </li></ul></ul><ul><ul><li>color: gray; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>h1 { </li></ul></ul><ul><ul><li>border-bottom: 1px solid black; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>p { </li></ul></ul><ul><ul><li>color: maroon; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>main.html </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> External CSS Example </title> </li></ul></ul><ul><ul><li><link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;info.css&quot;> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h1> Welcome to my Page! </h1> </li></ul></ul><ul><ul><li><h2> How are you doing? </h2> </li></ul></ul><ul><ul><li><p>This is a paragraph</p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  29. 29. Style Sheet Example – 12 <ul><li>info.css </li></ul><ul><ul><li>.test { </li></ul></ul><ul><ul><li>line-height: 1.9em; </li></ul></ul><ul><ul><li>font-style: italic; </li></ul></ul><ul><ul><li>font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; </li></ul></ul><ul><ul><li>color: #444444; </li></ul></ul><ul><ul><li>border-color: black; </li></ul></ul><ul><ul><li>border-width: 1px; </li></ul></ul><ul><ul><li>border-style: solid; </li></ul></ul><ul><ul><li>background-color: #a7cece; </li></ul></ul><ul><ul><li>padding: 25px; </li></ul></ul><ul><ul><li>margin: 30px; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>main.html </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> External CSS Example </title> </li></ul></ul><ul><ul><li><link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;info.css&quot;> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h1> Welcome to my Page! </h1> </li></ul></ul><ul><ul><li><h2> How are you doing? </h2> </li></ul></ul><ul><ul><li><p class=&quot;test&quot;> </li></ul></ul><ul><ul><li>This is a paragraph. See how this is decorated with the help of styles. We have all sorts of paragraph and background formattng features available, which allow us to format text the way we want to a very precise level. </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  30. 30. Lists <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>ul.disc </li></ul><ul><li>{ </li></ul><ul><li>list-style-type: disc </li></ul><ul><li>} </li></ul><ul><li>ul.circle </li></ul><ul><li>{ </li></ul><ul><li>list-style-type: circle </li></ul><ul><li>} </li></ul><ul><li>ul.square </li></ul><ul><li>{ </li></ul><ul><li>list-style-type: square </li></ul><ul><li>} </li></ul><ul><li>… </li></ul>
  31. 31. Thank you! Questions and Comments Welcome!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×