Website designing company | Cssfounder.com
Download as PPT, PDF1 like155 views
This document discusses different methods for using cascading style sheets (CSS) to control the appearance and formatting of web pages, including inline styles, embedded style sheets, and linking to external style sheets. It covers CSS syntax and properties for formatting elements like font, color, and layout. Style sheets allow separation of design from HTML content and uniform styling across pages.
Website designing company | Cssfounder.com
- 2. 2 Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style Sheets 5.6 Web Resources Cssfounder.com
- 3. In this lesson, you will learn: To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class attribute to apply styles. To use style sheets to separate presentation from content. 3 Cssfounder.com
- 4. Cascading Style Sheets (CSS) Separation of structure from presentation Three methods of CSS: Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets 4 Cssfounder.com
- 5. Declare an individual element’s format Attribute style CSS property followed by a colon and a value i.e: style = “font-size:20pt” 5 Cssfounder.com
- 6. <body> <p>This text does not have any style applied to it.</p> <p style = "font-size: 20pt">This text has the <em>font-size</em> style applied to it, making it 20pt. </p> <p style = "font-size: 20pt; color: #0000ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p> </body> 6 The style attribute allows you to declare inline styles. Separate multiple styles with a semicolon. Cssfounder.com
- 7. Embed an entire CSS document in an XHTML document’s head section Attributes Description MIME type type = “text/css” Multipurpose Internet Mail Extensions (MIME) type Describes a file’s content Property Description background-color Specifies the background color font-family Specifies the name of the font to use font-size Specifies a 14-point font 7 Cssfounder.com
- 8. <head> <style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt } .special { color: blue } </style> </head> <h1 class = "special">Deitel & Associates, Inc.</h1> <p>Deitel & Associates, Inc. .. programming, and Object Technology.</p> <h1>Clients</h1> <p class = "special"> The company's clients include many <em>Fortune 1000 companies</em>, government agencies, branches …. and World Wide Web courses.</p> 8 this begins the style sheet section Cssfounder.com
- 9. Inheritance Descendant’s properties have greater specificity than ancestor’s properties 9 Cssfounder.com
- 10. <style type = "text/css"> a.nodec { text-decoration: none } a:hover { text-decoration: underline;color: red;background-color: #ccffcc } li em { color: red;font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } </style> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p> 10 Cssfounder.com
- 11. <style type = "text/css"> a.nodec { text-decoration: none } a:hover { text-decoration: underline;color: red;background-color: #ccffcc } li em { color: red;font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } </style> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p>11 Cssfounder.com
- 12. External style sheets Can provide uniform look and feel to entire site 12 Cssfounder.com
- 13. a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left: .5cm } 13 Cssfounder.com
- 14. <head> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p> <a href = "http://www.food.com">Go to the Grocery store</a> </p> </body> 14 Cssfounder.com
- 16. www.w3.org/TR/css3-roadmap www.ddj.com/webreview/style tech.irt.org/articles/css.htm 16 Cssfounder.com