CSS Programming

From Wikibooks, the open-content textbooks collection

(Redirected from Cascading Style Sheets)
Jump to: navigation, search

Contents


[edit] Introduction

[edit] What is CSS?

CSS is one way of describing the "style" -- the colors, fonts, layout, and other "presentation" aspects of a document.

A single CSS file can describe a common "style" to be applied to many HTML, XHTML, and XML documents (which describe the content and structure of the elements of each document).

Typically a particular element in a XHTML file has a "cascade" of CSS style rules that can be applied to it. The highest priority style rule is applied to each element.

[edit] Why would I want to use CSS rather than something else?

CSS is a powerful tool that gives web designers flexibility and modularity in the presentation layer of a web site.

There are 4 ways that text can be styled

  • no styling -- looks bland
  • proprietary styling -- Flash, PDF, AbiWord, etc. -- requires the user to download and install an application in order to view it, which some users are unwilling or unable to do because they (or their security administrator) fear trojans.
  • HTML presentational styling -- one standard way to style documents presented on the web
  • CSS styling of HTML documents -- the newer standard way to style documents presented on the web (HTML and XHTML documents).

A web page presented to the end user looks the same -- for almost every visual effect that can be shown using CSS, there is a way to make a web page that looks the same using HTML presentational styling.

So why use CSS+HTML instead of HTML?

CSS allows you to have every format rule defined for later use (here "format" means how things appear). So if you are writing a large website and you want a consistent appearance for every title, sub-title, how examples of code appear, how paragraphs are aligned, (I could go on, CSS covers a wide range of presentation options) then CSS is the way to go.

Let's say you have a 1200 page website that took you months to complete. Your current boss gets a promotion and another person fills his place. Your new boss says to change the font, the size, the background, the appearance of tables, etc. everywhere on your 1200-page site to comply with some new corporate policy. If you engineered your site appropriately with CSS, you could do this by editing one linked CSS file that has all your appearance (format) rules in one place.

Or you could do it the hard way, and hammer the appearance changes on each and every of your 1200 HTML pages. Remember sleep? Your constitutional rights allow you to take the hard way (this is meant as humor, not an insult).

One other means to gain some understanding is to dissect other (good/professional) websites and figure out how their CSS interacts with their (X)HTML and XML documents.

CSS is commonly applied to HTML, XHTML and XML documents. CSS is essential in XHTML 1.1, which permits very little 'presentation' markup and instead must use CSS. (Note: it is a common myth that XHTML 1.0 Transitional requires CSS but in fact it allows 'presentation' markup.)

[edit] Basic CSS

With enough hands-on experience, CSS is very easy to learn. The first few sections discuss how (X)HTML and XML documents can make use of CSS. The following sections then describe CSS itself.

  1. Applying CSS to (X)HTML - Each method has its place however the linked method is the most important and the one this wikibook will reference.
    1. Linked CSS Method (using an external CSS file to link to multiple pages on a web site)
    2. Embedded CSS Method (linked CSS is preferred in most cases)
    3. Inline CSS Method (linked CSS is preferred in most cases)
  2. Applying CSS to XML
  3. CSS Construction
    1. CSS Syntax
    2. Defining Style Rules
    3. CSS Lengths and Units
    4. CSS Selectors
    5. CSS Inheritance Rules
    6. The !important Keyword
  4. CSS Presentation
    1. Color
    2. Fonts and other text properties
    3. Hyperlink Behavior
    4. Lists
    5. Setting the size and shape of elements with the "Box Model"
    6. Background
    7. CSS Shorthand Properties
  5. CSS Layout
    1. Positioning Elements (includes floating elements)
    2. Tables
    3. Floating elements
    4. Media Types

[edit] Advanced CSS

CSS provides the web developer and the end user with remarkable flexibility and power, however for CSS to be used to its full potential the use of table-less layouts is essential.

  1. CSS and Divs

-in progress

[edit] Troubleshooting

  1. Standards Mode and Quirks Mode
  2. Browser Compatibility
  3. CSS order of Rules (Troubleshooting multiple instances)

[edit] Index

[edit] Hacks & Filters

CSS Hacks

All web browsers are not equal and different rendering of the same code, even if the code is validated, can destroy a web page's presentation. To work around this a large community of browser hacks has been developed. These hacks should be avoided at all cost because they may break your code in other browsers or slow down performance. However sometimes it is impossible to avoid the use of these hacks.


Be aware that constant browser updates may cause hacks to not work in the future.


Filters

[edit] Links

Wikipedia has related information at Cascading Style Sheets.

Other wiki about CSS

All of these references are free

[edit] Contributors

Monkeymatt: Put in all of the linked pages on wikibooks up to the selectors, may come back and do more later
Retrieved from "http://en.wikibooks.org/wiki/CSS_Programming"
Personal tools