1 / 11

Mastering CSS: A History and Basics Guide

Explore the origins of HTML and CSS, learn to create style rules using selectors and declarations, and understand different placement options for style sheets.

yves
Download Presentation

Mastering CSS: A History and Basics Guide

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. The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1

  2. Chapter Objectives • To learn the history of HTML and CSS • To learn to create style rules using CSS selectors and declarations • To learn where to place style sheets and create basic styles in CSS1

  3. History of HTML and CSS • Tim Berners-Lee at CERN • Mosaic and graphical browsing • The advent of non-standard tags • HTML 4 and CSS • Proper Containment • Block level versus Inline elements

  4. Creating Your Own Style Rules • A CSS rule; Selector and Declaration • Properties and values • h1 {font-family : arial, sans-serif} • p { font-family : "times new roman", serif; color : red; text-align: left}

  5. HTML Element Selectors • Designate style for one or more HTML tags • h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center} • Contextual Selectors • p b {color : maroon}

  6. Class Selectors • Applies rules to HTML content by class • Create a rule in the style sheet • .isgreen {color : green} • Reference the class name in the HTML • <h1 class=“isgreen”>This will appear green.<h1>

  7. ID Selectors • Applies rules to HTML content by ID • Create a rule in the style sheet • #silverware {color : silver;} • Reference the ID in the HTML • <h1 id=“silverware ”>This will appear silver.<h1> • ID must be unique

  8. Pseudo-Elements • Typically used for drop cap effect • p.dropcap:first-letter { font-size: 300%; float: left; color: red; }

  9. Placing Style Sheets • Inline Style Sheets • Applies to a single element • <p style="color : silver;">some text goes here.</p> • Discouraged by the W3C

  10. Placing Style Sheets • Internal Style Sheets • Applies to a single page <style type="text/css"> h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;} .isgreen {color : green;} </style>

  11. External Style Sheets • Store style rules in an external file • Reference the external file using link in the <head> • <html><head><title>Page with external CSS</title><link rel=“stylesheet” type=“text/css” href=“somestyle.css”></head> • Great for consistent styling on large sites

More Related