1 / 19

Style Sheets

Style Sheets. Robert Vitolo CS430. Style Sheets: A Brief Overview. CSS (Cascading Style Sheets) Purpose: To provide a consistent look and feel for a set of web pages To make it easy to update or manipulate the format or style of a page by separating style from content. Different Types.

palmer
Download Presentation

Style Sheets

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. Style Sheets Robert Vitolo CS430

  2. Style Sheets: A Brief Overview • CSS (Cascading Style Sheets) • Purpose: • To providea consistent look and feel for a set of web pages • To make it easy to update or manipulate the format or style of a page by separating style from content

  3. Different Types • External • Style details are maintained in their own file, separate from the other code • Internal and Inline • Style elements are defined within the code • Override external style rules • ASP.NET has an added feature: Skins

  4. Referencing an external style sheet To reference an external style sheet in your webpage, you must code a link element within the head element of the page.

  5. Creating a reference to a Style Sheet (Code) Style Sheet Filename

  6. Coding a reference to a Style Sheet (Automated) You can also do this in an automated fashion, by going into the Design mode for your webpage, clicking on format and selecting ‘Attach Style Sheet’.

  7. Creating a reference to a Style Sheet (Automated)

  8. Creating a reference to a Style Sheet (Automated)

  9. Creating a reference to a Style Sheet (Automated)

  10. Creating a style sheet Defines all of the elements that will be impacted by the style rule. • CSS sheets have a specific coding format: Selector { Property : value; } Example: h1 { color: green; }

  11. Selectors (Example)

  12. Example Web Page (No Style Sheet)

  13. CSS Style Sheet Code Example

  14. Webpage with style sheet attached

  15. Visual Studio Environment Features Visual Studio gives you some access to many of the CSS functions via the VS menus.

  16. Visual Studio Environment Features

  17. Visual Studio Environment Features

  18. New Style Dialog Box Allows you to add new style rules without having to memorize all of the different properties and values – accessed through the Format menu.

More Related