web programming n.
Skip this Video
Loading SlideShow in 5 Seconds..
Web Programming PowerPoint Presentation
Download Presentation
Web Programming

Web Programming

110 Views Download Presentation
Download Presentation

Web Programming

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Web Programming Cascade Style Sheets (CSS)

  2. Introduction  CSS stands for Cascading Style Sheets  Used to Separate Presentation and Contents while Building Web Sites  Appearance of Raw HTML Pages is not very Effective and Attractive  In Order to Improve the Appearance of Web Page we use CSS  CSS is used to define Style Rules that help to unify entire Sites Appearance  Using CSS we define Style once and it can be applied many times on the Web Page Example: Using CSS we define Rules that define how All the Headings and Paragraphs Look alike such as their Color, Style, Formatting etc

  3. Need Of CSS  CSS Improves Efficiency by allowing you to Separate Contents and Styles  Contents mean Headings, Paragraphs, Buttons etc  Styles define the Appearance of Contents  CSS was developed to Solve a Problem  In using single HTML you must have to define the Style of each and every Content in its Opening Tag using Attributes like style, color, bgcolor etc  This is a very Lengthy and Tedious Job  Job becomes more hard if you want all contents of same type to be alike, this requires you to remember attributes and attribute values and it is difficult  Styles are normally defined in a Separate CSS File thus enabling designer to Change and Manage the Appearance of Web Page

  4. CSS Syntax (cont.)  CSS Rule has Two Parts: 1. Selector 2. One or More Declarations  Selector is normally HTML Element Tag Symbol  Declaration consists of Property and Property Value  Property is a Style Attribute

  5. CSS Syntax  Specify the name of Element like h1, p, td etc  Start a Opening Curly Brace { Declarations:  Write Property Name like color, font-family etc  Write a Colon :  Write Property Value after Colon  Then Put Semi-Colon ; after each Declaration  Put a Closing Curly Brace } Example: h1 { color:red; font:calibari; text-align:center; } This CSS Example Defines Appearance of Element with <h1> Tag

  6. CSS Comments  Comments are used to Specify the Purpose of Line of Code  Comments are Notes about Lines  Helpful when the code is to be edited  CSS Comments are Start with /* and End with */ Symbols  Anything between /* and /* is a Comment Example: h1 { color:red; /*Defines Font Color*/ font:calibari; /*Defines Font Style*/ text-align:center; /*Defines Text Alignment*/ } This CSS Example Defines Appearance of Element with <h1> Tag with Proper Comments

  7. Where To Write CSS Code  Three Ways to Use CSS in HTML 1. Inline Style 2. Internal Style Sheet 3. External Style Sheet

  8. Inline Style  In Inline Style looses the Advantages of Cascading Style Sheet  In Inline Style we use style Attribute in the Opening Tag of an Element  This Style is only Applicable to the Element`s Tag in which it is defined  For Example if we define Inline Style using style attribute of a <h1> tag then it will be applicable to only this Tag and it will not be applicable to any other <h1> Tag  Mostly used if you want that Each Element has its own Appearance and Style  Hard to Use and Apply

  9. Inline Style----Example <html> <head> <title>Inline Style</title> </head> <body> <p>This is Paragraph with No Inline Style</p> <p style=“color:red;font-size:20px” /> This is Paragraph with Inline Style </p> </body> </html>

  10. Internal Style Sheet  Defined inside a Single Document  Can Only be applied to the Document in which it is Defined  No other Document can use the Internal Style Sheet of a Document  If Selectors are given then Internal Style Sheet is Automatically Applied to Whole Document`s of the Selector Type  Defined inside the <head> tag  Defined using <style> tag  We use the type Attribute of <style> for Internal Style Sheet as follows: <style type=“text/css” /> ………………………………. </style>

  11. Internal Style Sheet----Example <html> <head> <title>Internal Style Sheet</title> <style type=“text/css” /> p { color:blue; font-size:24px; } </style> </head> <body> <p>Paragraph No 1</p> <p>Paragraph No 2</p> </body> </html>

  12. External Style Sheet  Used when Styles is to be applied on many pages  External Style Sheets are Stored in Separate Files  External Style Sheet Files have .css Extension  With External Style Sheet Entire Look of Web Site is changed by just changing One File  External Style Sheets are attached to the Web Pages using <link> Tag and Using rel, type and href Attributes of <link> Tag Example: <link rel=“stylesheet” type=“text/css” href=“c:\sheet.css” /> This Tag with Attributes Attaches Style Sheet named sheet.css in the Web Page

  13. External Style Sheets----Example-CSS File Contents CSS File: h1 { font:verdana; font-size:24px; color:red; } p { font:times new roman; font-size:12px; color:blue; } Name of CSS File: style.css

  14. External Style Sheets----Example-HTML File Contents <html> <head> <title>External Style Sheet</title> <link rel=“stylesheet” type=“text/css” href=“style.css /> </head> <body> <h1>Heading No 1</h1> <p>Paragraph No 1</p> </body> </html>

  15. The Selectors  CSS allows to specify the following two Selectors: 1. id Selector 2. class Selector

  16. The ID Selector  Used to Specify Style for Single Element  Uses the id Attribute of HTML Element  id Selector is defined using # Example: #paragraph { align:center; font-size:18px; } #heading { align:right; font-size:24px; }

  17. The ID Selector----Example <html> <head> <style type="text/css"> #para1 { text-align:right; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

  18. The CLASS Selector  Used to Specify Style for Group of Element  Class Selector is mostly used on Various Elements  Uses the class Attribute of HTML Element  id Selector is defined using . Example: .paragraph { align:center; font-size:18px; }

  19. The CLASS Selector----Example <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>

  20. CSS Background Color  Uses background-color Property <html> <head> <style type="text/css"> body { background-color:#b0c4de; } </style> </head> <body> <h1>Background Color</h1> <p>Paragraph</p> </body> </html>

  21. CSS Background Image <html> <head> <style type="text/css"> body {background-image:url('paper.gif');} </style> </head> <body> <h1>Background Image</h1> </body> </html>

  22. CSS Font Family <html> <head> </head> <body> <p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p> </body> </html>

  23. CSS Font Size <html> <head> </head> <body> <p style="font-size:20px;">This text is using a font size of 20 pixels.</p> </body> </html>

  24. CSS Font Adjust Size <html> <head> </head> <body> <p style="font-size-adjust:0.58;">This text is using a font-size-adjust value.</p> </body> </html>

  25. CSS Font Stretch <html> <head> </head> <body> <p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p> </body> </html>

  26. CSS Font Style <html> <head> </head> <body> <p style="font-style:italic;">This text is in italics.</p> </body> </html>

  27. CSS Font Variant <html> <head> </head> <body> <p style="font-variant:small-caps;">This Text Is Using Small Caps.</p> </body> </html>

  28. Font Weight <html> <head> </head> <body> <p style="font-weight:bold;">This text is bold.</p> </body> </html>

  29. CSS Font Property <html> <head> </head> <body> <p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p> </body> </html>

  30. CSS Text Color <html> <head> </head> <body> <p style="color:olive;">This CSS text color is olive</p> </body> </html>

  31. CSS Text Align <html> <head> </head> <body> <p style="text-align:right;">This CSS text is aligned right</p> </body> </html>

  32. CSS Letter Spacing <html> <head> </head> <body> <p style="letter-spacing:5px;">This text has letter spacing applied</p> </body> </html>

  33. CSS Word Spacing <html> <head> </head> <body> <p style="word-spacing:50px;">This text has word spacing applied</p> </body> </html>

  34. Text Decoration <html> <head> </head> <body> <p style="text-decoration:overline;">This text has a line over the top</p> <p style="text-decoration:line-through;">This text has a line through the middle</p> <p style="text-decoration:underline;">This text has a line underneath</p> </body> </html>

  35. Text Transform <html> <head> </head> <body> <p style="text-transform:uppercase;">This text has been transformed to uppercase</p> <p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p> <p style="text-transform:capitalize;">this text has been capitalized.</p> </body> </html>

  36. CSS Text Direction <html> <head> </head> <body> <p style="direction:rtl;">This text is running from right to left.</p> </body> </html>

  37. CSS Text Shadow <html> <head> </head> <body> <p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p> </body> </html>

  38. CSS Text Background Color <html> <head> </head> <body> <p style="background-color:yellow;">This text has a background color applied.</p> </body> </html>

  39. CSS Text Background Image <html> <head> </head> <body> <p style="height:100px;background-image:url(1.png);">This text has a background image applied. </p> </body> </html>

  40. CSS Background Image Repeat <html> <head> </head> <body> <p style="height:100px;background-image:url(1.png);background-repeat:repeat-x;">This background image repeat w.r.t x direction </p> </body> </html>

  41. CSS Border Styles <html> <head> </head> <body> <p style="border:4px solid blue;“>Solid Border</p> <p style="border:4px dotted blue;">Dotted Border</p> <p style="border:4px dashed blue;">Dashed Border</p> <p style="border:4px double blue;">Double Border</p> </body> </html>

  42. CSS Border Width <html> <head> </head> <body> <p style="border-width:6px;border-style:solid;” >This text has border styles border width=6px</p> </body> </html>

  43. CSS Border Color <html> <head> </head> <body> <p style="border-width:1px;border-style:solid;border-color:blue;">This text has border styles applied using the border-width, border-style, and border-color properties.</p> </body> </html>

  44. CSS Margins All Sides <html> <head> </head> <body> <div style="border:1px solid blue;"><p style="border:1px solid orange;margin:20px;">This text has a margin of 20 pixels on all four sides.It is nested within a div with a border to make it easier to see the effect of the margin.</p> </div> </body> </html>

  45. CSS Margins Each Side <html> <head> </head> <body> <div style="border:1px solid blue;width:200px;"><p style="border:1px solid orange;margin:40px 10px 1px 40px;">This text has a different sized margin for each side. It is nested within a div with a border to make it easier to see the effect of the margin.</p></div> </body> </html>

  46. CSS Padding All Sides <html> <head> </head> <body> <p style="border:1px solid orange;padding:20px;">This text has padding of 20 pixels on all four sides.</p> </body> </html>

  47. CSS Padding Each Side <html> <head> </head> <body> <p>With padding:</p> <div style="border:1px solid orange;width:100px;padding:20px 10px 0px 100px;">Padded div</div> <p>Without padding:</p> <div style="border:1px solid orange;width:100px;">Non-padded div</div> </body> </html>

  48. CSS List Types <html> <head> </head> <body> <ulstyle="list-style-type:circle;"> <li>List item one</li> <li>List item two</li> </ul> </body> </html>

  49. CSS List Style Image <html> <head> <title>Image Bullets</title> </head> <body> <h4>Custom Bullets</h4> <ul style=“list-style-image: url(bullet_img.gif)"> <li>America</li> <li>England</li> <li>Pakistan</li> <li>Austrailia</li> </ul> </body> </html>

  50. CSS List Style Position <html> <head> </head> <body> <ul style="list-style-position:inside;"> <li>List item one</li><li>List item two</li> </ul> <ul style="list-style-position:outside;"> <li>List item one</li><li>List item two</li> </ul> </body> </html>