Introduction to CSS

687 views

Published on

The introductory chapter to CSS: The Missing Manual

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
687
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Introduction to CSS

    1. 1. Introduction Cascading Style Sheets (CSS) Source: CSS | The Missing Manual Copyright 2009
    2. 2. How CSS Works <ul><li>A style is simply a rule describing how to format a particular portion of a Web page </li></ul><ul><li>A style sheet is a set of these rules </li></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    3. 3. How CSS Works <ul><li>CSS – Cascading Style Sheets </li></ul><ul><li>(X)HTML – HTML with stricter guidelines </li></ul><ul><ul><li>??? </li></ul></ul><ul><ul><li>??? </li></ul></ul><ul><ul><li>??? </li></ul></ul><ul><ul><li>??? </li></ul></ul><ul><ul><li>??? </li></ul></ul><ul><ul><li>??? </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    4. 4. How CSS Works <ul><li>CSS and (X)HTML are two different languages altogether </li></ul><ul><ul><li>(X)HTML provides structure to a document </li></ul></ul><ul><ul><li>CSS provides creative control over the layout and design of Web pages </li></ul></ul><ul><li>CSS changes (and improves) the appearance of (X)HTML </li></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    5. 5. The Benefits of CSS <ul><li>The World Wide Web Consortium ( W3C ) has deprecated (phased out) many HTML tags used solely for formatting </li></ul><ul><li>Example: <font> </li></ul><ul><li>Review a list of depricated tags: </li></ul><ul><ul><li>www.codehelp.co.uk/html/deprecated.html </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    6. 6. What You Need to Know <ul><li>CSS doesn’t do anything without (X)HTML </li></ul><ul><li>Tags are the “markup” part of the Hypertext Markup Language </li></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    7. 7. What You Need to Know <ul><li>Think of a Web page as a tree </li></ul>Source: CSS | The Missing Manual Copyright 2009 <???> <???> <???> <???> <???> <???> <???> <???> <head> <body> <html> Introduction
    8. 8. XHTML: HTML for the New Era <ul><li>An (X)HTML page must use the correct doctype </li></ul><ul><li>An (X)HTML page must validate </li></ul><ul><li>Consequence: CSS will fall apart in certain browsers </li></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    9. 9. Software for CSS <ul><li>Free programs: </li></ul><ul><ul><li>TextWrangler (Mac) </li></ul></ul><ul><ul><ul><li>www.barebones.com/products/textwrangler/ </li></ul></ul></ul><ul><ul><li>HTML-Kit (Windows) </li></ul></ul><ul><ul><ul><li>www.chami.com /html-kit/ </li></ul></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    10. 10. Software for CSS <ul><li>Commercial software: </li></ul><ul><ul><li>EditPlus (Windows) </li></ul></ul><ul><ul><ul><li>www.editplus.com </li></ul></ul></ul><ul><ul><li>skEdit (Mac) </li></ul></ul><ul><ul><ul><li>www.skti.org </li></ul></ul></ul><ul><ul><li>BBEdit (Mac) </li></ul></ul><ul><ul><ul><li>www.barebones.com/products/bbedit / </li></ul></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    11. 11. Software for CSS <ul><li>Commercial software (continued): </li></ul><ul><ul><li>Dreamweaver (Mac & Windows) </li></ul></ul><ul><ul><ul><li>www.adobe.com </li></ul></ul></ul><ul><ul><li>Expression Web Designer (Windows) </li></ul></ul><ul><ul><ul><li>www.microsoft.com </li></ul></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction
    12. 12. Code Samples <ul><li>Download raw materials </li></ul><ul><ul><li>graphics </li></ul></ul><ul><ul><li>half-completed Web pages </li></ul></ul><ul><li>Source: CSS | The Missing Manual </li></ul><ul><ul><li>www.sawmac.com/css / </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Introduction

    ×