1 / 11

Style Sheets

Learn how to create and use CSS style sheets, including rules, selectors, declarations, and external style sheets. Ensure consistency and easily make global changes to your website.

michaelw
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

  2. Coding Style Sheets • Style sheets use RULES to create the style • A selector (a tag or user-defined style name) • and then declarations contained within { } and separated by ; • declarations consist of properties and values separated by a .

  3. External Style Sheets • External style sheets (just simple text files with a .css extension) keep the rules in a separate file. They ensuree consistency in a website and making it very easy to make global changes/updates.

  4. To access them use the <link> in the head section: • <link rel="stylesheet" href="stylesheetname.css"> • where stylesheetname.css refers to the name of your file, and an appropriate path, if needed.

  5. Type this on your computer body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; background-color: #00FFFF; } td { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; } th { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; }

  6. And this… h1 { color: #333333; } h2 { color: #666699; } h3 { color: #993399; } h6 { color: #333366; }

  7. Add this to your stylesheet .specialfont { font-family: font-family: "Times New Roman", Times, serif; color: green }

  8. To use special font you must • <p class="specialfont"> The text you want special </p> in your html code

  9. Modify your style sheet body { font-family: Arial, Helvetica, sans-serif; background-color: #FF0000; }

  10. Add a table to each of your pages • 2 columns by 2 rows • Check your web pages now

  11. Add the following to the web pages • Page 1 Part A • Page 1 Heading 2 • Page 1 Heading 3 • Page 1 Heading 6 • Do the same for each of your pages.. • Check your web page now…

More Related