html

752 views

Published on

aaaaaaa

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
752
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

html

  1. 1. CSS is a style sheet language used to describe thepresentation semantics (the look and formatting) of adocument written in a markup language. Its mostcommon application is to style web pages written inHTML and XHTML, but the language can also be appliedto any kind of XML document, including SVG and XUL.
  2. 2. Single style sheet to multipledocuments
  3. 3. Structure of a Style (CSS) CSS  Selector  Property  value  selector { property : value }
  4. 4. CSS selector1 { property1 : value1 } selector2 { property2 : value2; property3 : value3 }
  5. 5. CSS Units Relative Length (  px (pixels, px, 4px  em (emphasize, font body  font body px  h1{fon-size:1.5em} h1 px = 15px  h2{fon-size:1.4em} h2 px = 14px  em px  ex (x-height, x") ex, 2ex
  6. 6. CSS Units Absolute Length (  in (inches; 1in=2.54cm =72pt =6pc) in, 1.5in  cm (centimeters; 1cm=10mm) cm, 1.11cm  mm (millimeters) mm, 0.8mm  pt (points; 1pt=1/72in, 10pt px) pt, 20pt  pc (picas; 1pc=12pt) pc, 2pc
  7. 7. selector { property : value } Selector  HTML Tags  Class Name Property  Property Name value  Value) Property
  8. 8. Selector Selector  HTML Tags  Class NameExample[HTML Tags:Style] H2{ background-color : #191970 }[HTML Tags:Style] P{ text-indent: 3em }[Class Name:Style] .note { font-size : small }[Class Name:Style] .normal{ color : blue }[Class Name:Style] .special{ color : red }
  9. 9. Property Property   Property Selector Property Example  P { text-indent: 3em }  H2{ background-color : #191970; color : red }
  10. 10. Value Value  Property   property  Example  P{ font-family: "sans serif" }  H1{font-family: Verdana,"sans serif”; color : red}
  11. 11. Groups Selector Example  H1,H2,H3,H4,H5,H6 { color: green }  H1,H2,H6 { color: red }  body,H1,H2,H6 { color: red }  Body.opt1,H1 { color: red }
  12. 12. Class Selector Example (CSS Style)  <p>  p.right { text-align: right }  p.center { text-align: center} In HTML Files  <p class="right">This paragraph will be right- aligned.</p>  <p class="center">This paragraph will be center- aligned.</p>
  13. 13. Class Selector : Non Tags Example (CSS Style)   .center { text-align: center } In HTML Files  <h1 class="center">This heading will be center- aligned</h1>  <p class="center">This paragraph will also be center- aligned.</p>
  14. 14. ID Selector ID Selector  ID Selector  Class Selector Style Example  #wer345{ text-align: center; color: green}  h1#wer345{ text-align: center; color : red } In HTML Files  <h1 id="wer345">Heading</h1>  <p id="wer345">Some text</p>
  15. 15. Comment Example  p { text-align: center; /* This is a comment */ }
  16. 16. Style: Style Sheet
  17. 17. Style: Style SheetSyntax  Write styles for any element  selector {property: value;}  External Style Sheet  <link rel="stylesheet" type="text/css" href="style.css" />  Internal Style  <style type=”text/css”>selector {property: value}</style>  Inline Style  <tag style=”property: value”>
  18. 18. Style: Style SheetStyle  Inline Style(In line HTML Tags)  Internal Style Sheet(In HTML head Tags)  External Style Sheet(NameStyleSheet.css)
  19. 19. Inline Style Example  <H2 style= “background-color: blue; color: white”> Heading 2 </H2>  <P style= “font-size: 20pt”> This text has the <EM> font-size </EM> style applied to it. </P>  <P style= “font-size: 20pt; color: #ff0000”>font-size 20 pt and red color. </P>
  20. 20. Internal StyleExample<html><head> <style type="text/css"> BODY{background-image: url("bgpic.jpg")} EM{background-color: #8000ff;color: white} H1{font-family: arial, sans-serif } P{font-size: 14pt} .special{color: blue} .special{color: blue} </style></head><body>...</body></html>
  21. 21. Internal StyleExample<html><head>…</head><body><H1 class = "special"> MAN and MEN</H1><P> The exalted origin of the word<EM>MAN </EM> is clear int the plural form,<EM> men </EM>, from <B>mental </B>. It is inspiring to notethat man was so named because he was<EM> the one that thinks </EM>.</P><H1> The Thinker </H1><P class = "special"> If you have ever seen a copy – the original is inParis – of the famous sculpture by Auguste Rodin called<EM> The Thinker </EM>, you would agree that the essentialnature of man stems from his ability to think.</P></body></html>
  22. 22. External Style <html><head> <link rel = "stylesheet" type = "text/css" href = "styles.css"/> </head><body>...</body></html>
  23. 23. External Style css  /* An External Style Sheet */  BODY { background-image : url("images/bgpic.jpg") }  EM { background-color : #8000ff; color : white }  H1 { font-family : arial, sans-serif }  H2 { background-color : blue; color : white }  P{ font-size : 14pt }  UL { margin-left: 2cm }  .special{ color : blue; font-weight : bold }  .normal{ color : red }
  24. 24. 1) Inline Style2) Internal Style Sheet3) External Style Sheet4) Style Browser Default)
  25. 25.  Inline Style Style Inline Style Inline Style Internal Style Internal Style External Style Style
  26. 26.  Style Selector Property Property Property inherit) Style
  27. 27. /*An external stylesheet*/ : h3 { color: red; text-align: <link rel="stylesheet"left; font-size: 8pt } type="text/css" href="hstyles.css"> <style type = "text/css"> h3 {text-align: right; font- size: 20pt} </style> :
  28. 28. Property H3 Tag Property h3>  color: red”  “text-align: right;”  “font-size: 20pt”
  29. 29. CSS Example<html><head><style type="text/css">p,table,h1,h2,h3 {font-family: verdana, arial, “sans serif”; }p,h1,h2,h3,table,hr{ margin-left: 10pt }p,th,td{ font-size: 75% }body{ #ffffff }h1,h2,h3,hr { color: firebrick }</style></head><body>…</body></html>
  30. 30. CSS Example<html><head>…</head><body><h1>This is header 1</h1> <hr><p>This is a paragraph</p><p>This is another paragraph</p> <hr><h2>This is header 2, followed by a table</h2><table border="1" width="100%"><tr> <th>First Name</th><th>Name</th> <th>Telephone</th> <th>Fax</th> </tr><tr> <td>Hege</td> <td>Svendson</td> <td>555-777-0001</td> <td>555-777-0000</td> </tr><tr> <td>Kai Jim</td> <td>Svendson</td> <td>555-777-0002</td> <td>&nbsp;</td> </tr> </table></body></html>
  31. 31. CSS
  32. 32. CSS Example<html><head><style type="text/css">h1,h2,h3 { font-family: arial, “sans serif” }p,table,li,address { margin-left: 15pt; font-family: arial, “sans serif” } p, th,td { font-size: 80% } th { background-color:#FAEBD7} body { background-color: #ffffff } h1,h2,h3,hr { color:saddlebrown }</style></head><body>…</body></html>
  33. 33. CSS
  34. 34. Formatting Hypertext LinksTo remove the style of underlining hypertext,use: A {text-decoration:none}
  35. 35. Formatting Hypertext Links4 types of hyperlinks can be modified: A:visited {styles for previously visited links} A:link {styles for links that have never visited} A:active {styles for links that are currently being clicked} A:hover {styles when the mouse cursor is hovering over the link}
  36. 36. Ref. http://www.w3.org/ http://www.w3shcools.com/ http://www.westciv.com/style_master/academy/css_t utorial/ H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.

×