1 / 63

Web Programming

Web Programming. Cascade Style Sheets (CSS). 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

wang-summers
Télécharger la présentation

Web Programming

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

More Related