Document Sample
CSS Powered By Docstoc
                       Advantages of CSS
Cascading Style Sheets, more commonly known as CSS, has fast become the
preferred web design method for the benefits it offers web designers and
website visitors alike. CSS is a language used to detail the presentation of a
web page's markup language (most commonly HTML or XHTML) – such as
colors, fonts, and layout.
•   Consistency By making one change to your website's CSS style sheet, you can automatically
    make it to every page of your website. The bigger your website, the more time CSS saves you.
    And not only does CSS save time, it also ensures that your web pages have consistent styling
    throughout your site.
•   Bandwidth Reduction When CSS separates your website's content from its design language,
    you dramatically reduce your file transfer size. Your CSS document will be stored externally,
    and will be accessed only once when a visitor requests your website. In contrast, when you
    create a website using tables, every page of your website will be accessed with each visit.
    Your reduced bandwidth needs will result in a faster load time and could cut your web
    hosting costs.
•   Search Engines CSS is considered a clean coding technique, which means search engines
    won't have to struggle to "read" its content. Also, using CSS will leave your website with more
    content than code – and content is critical to your search engine success.
•   Browser Compatibility CSS stylesheets increase your website's adaptability and ensure that
    more visitors will be able to view your website in the way you intended.
•   Viewing Options Another common web design concern is the increasing need to make
    websites available for different media. CSS can help you tackle this challenge by allowing the
    same markup page to be presented in different viewing styles —— for example, you may
    create a separate stylesheet for print or for a mobile device.
                                     CSS Rules
A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a
block of declarations). The selector is a term (such as p, h1,a class name, or an id) that identifies the
formatted element, and the declaration block defines what the style properties are. In the following
example, h1 is the selector, and everything that falls between the braces ({}) is the declaration block:
h1 {
font-size: 16px;
font-family: Helvetica;
An individual declaration consists of two parts, the property (such as font-family) and value (such
as Helvetica). In the previous CSS rule, a particular style has been created for h1 tags: the text for
all h1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.

The style (which comes from a rule, or a collection of rules)
resides in an external style sheet, or in the head portion of
an HTML document. Thus, one rule for h1 tags can apply to
many tags at once (and in the case of external style sheets,
the rule can apply to many tags at once on many different
pages). In this way, CSS provides extremely easy update
capability. When you update a CSS rule in one place, the
formatting of all the elements that use the defined style are
automatically updated to the new style.
                     What is CSS?
The term cascading refers to the way a browser ultimately
displays styles for specific elements on a web page. Different
sources are responsible for the styles you see on a web page: the
style sheet created by the author of the page, and the default
styles of the browser itself. Browsers have their own default style
sheets that dictate the rendering of web pages. The final
appearance of a web page is the result of the rules of all the
sources coming together (or “cascading”) to render the web
page in an optimal way. (read css.pdf)
                       Resetting CSS
Example of reset.css
                                       Resetting your styles,
                                       commonly referred to
                                       as CSS Reset or Reset
                                       CSS is the process of
                                       setting the styles of all
                                       elements to a baseline
                                       value so that you avoid
                                       differences due to their
                                       built-in default style
                                       settings. By resetting
                                       your styles, you avoid
                                       defaulting to the
                                       browser’s built-in styles,
                                       which differs from
                                       browser to browser.
   Attaching an External Stylesheet
In the head of your html document add
<link rel="stylesheet" type="text/css“
href="mystyles.css" />
                  CSS Properties
You can define properties for CSS rules such as text font,
background image and color, spacing and layout properties, and
the appearance of list elements. (read css-properties.pdf)
                         DIV Tags
The basic building block of the CSS layout is the div tag, which is
an HTML tag that in most cases acts as a container for text,
images, and other page elements. When you create a CSS layout,
you place div tags on the page, add content to them, and
position them in various places. You can use div tags to center
blocks of content, create column effects, create different areas of
color, and much more. Unlike table cells, which are restricted to
existing somewhere within the rows and columns of a table, div
tags can appear anywhere on a web page. You can position div
tags absolutely (by specifying x and y coordinates), or relatively
(by specifying their distance from other page elements).
                  Id Selector
• In addition to setting a style for a HTML
  element, CSS allows you to specify your own
  selectors called "id" and "class".
• The id selector is used to specify a style for a
  single, unique element.
• The id selector uses the id attribute of the
  HTML element, and is defined with a "#".
               Class Selector
• The class selector is used to specify a style for
  a group of elements. Unlike the id selector, the
  class selector is most often used on several
• This allows you to set a particular style for any
  HTML elements with the same class.
• The class selector uses the HTML class
  attribute, and is defined with a "."

Shared By: