Blog

categories

tags

RELATED Posts

CSS

CSS is the acronym for Cascading Style Sheets, a means of providing style (fonts, colors) and placement (location on page) information for documents on the web. Typically, CSS is linked to (or “included”) in the header of an HTML document. In the CSS document (or stylesheet), collections of style and placement rules are given distinct names. These names are then applied to similarly identified parts of the web page.

[expand title=”What is it good for?” trigclass=”contentLink”]
CSS simplifies the process of creating a consistent look and feel across the content of a web site, by linking the layout of any number of pages to a single file. An unlimited number of pages can link to the same stylesheet, greatly reducing the amount of code that has to be written to add new, properly formatted pages to a site. This also makes it much simpler to change the look and feel of a site later on, as changes to the central stylesheet will then be immediately visible across all linked pages. The “cascading” nature of stylesheets (see How do I use it? below) and the fact that more than one stylesheet can be included on a given page also allows for customization of look and feel for particularly sections or pages.

In addition to determining the basic look & layout of a site, more advanced CSS can be used to create sophisticated visual effects and even animations.
[/expand]
[expand title=”What does it look like?” trigclass=”contentLink”]
Although there are multiple ways to apply CSS to a web document, including inline, header styles, and external stylesheets, only the last is recommended. While technically all three methods can achieve the same effects, external stylesheets provide the greatest consistency and flexibility. A basic CSS document might look like this:

/* 
This is a sample stylesheet. Anything written between the slash-asterisk "brackets"
will be ignored by the browser, so I can put comments about the stylesheet here.
*/
body { 
font: Arial,Helvetica,Sans-serif; 
color: #000000;
background: #ffffff;
background-image:none;
}
.contentLink {
font-weight:bold;
color: #000000;
}
#recent-posts {
color: #565a5c;
}

The above document specifies three separate “styles,” each of which will be applied only to the parts of the corresponding HTML document with those particular names. An individual style is described by a name and encased in curly braces {}. Each style may specify many characteristics, each of which is described in the syntax

property-name: property-value;

Generally, there are three mechanisms for identifying individual pieces of a web document: by “tag”, “class”, or “id”. In CSS, simply writing a name (body), means that the matching piece of the document (or document element) is a tag; preceding it with a dot (.contentLink) means it applies to all elements with that class; preceding it with a hash (#recent-posts) means it applies to the element with that id. In the HTML document to which the above stylesheet was linked, you would expect to find each of the following elements:

This is a div whose text would be blue. All of the text would be in Arial font with a white background and no background image, because of the styles specified for body tag.

[/expand]
[expand title=”How do I use it?” trigclass=”contentLink”]
The great efficiency of CSS lies in its “cascading” nature. Put simply, any given element of a web page inherits the styles of its container elements (also called “parent elements”), unless its own style overrides those particular characteristics (or “properties”). In the example above, the “body” tag contains both the “contentLink” div and the “recent-posts” div, so they will both have Arial font text in black (#000000), a white (#ffffff) background color, and no background image. The “contentLink” div will have bold text because “font-weight” is specified as bold in its style description. The “recent-posts” div will have blue text because its “color” property is set to blue (#565a5c), which will override the black it inherited from the body tag.
[/expand]
[expand title=”Where can I find it?” trigclass=”contentLink”]
Stylesheets are linked to an HTML page through tags that can be found inside the


tag. A complete CSS link tag will look something like this:


The “rel” and “type” attributes identify the linked file as css; as with regular links, the “href” attribute describes where to actually find the file. A given web page may link to several stylesheets, which will be applied to the page’s elements in order (with the lowest – and therefore most “recent” styles – taking precedence if two of the applied styles describe the same property, such as font).

[/expand]
[expand title=”Issues & FAQs” trigclass=”contentLink”]
Although there are dozens of properties that can be applied to an HTML element via CSS, some browsers support properties that others do not, requiring browser-specific workarounds for certain effects, like opacity. For example, see Chris Coyier’s post here.

Such workarounds are necessary because although official standards for CSS are periodically approved by the World Wide Web Constortium (W3C), the organization cannot require browser developers (such as Microsoft, Apple and Mozilla) to support all (or any) of the features of each version. Although the most recent version – or “specification”- of CSS (CSS3) includes properties like animations and web fonts, some browsers may not support these features. Conversely, sometimes browser developers invent their own CSS properties, in order to include appealing features before they’ve been included in the official W3C specification.

[/expand]

[expand title=”Tools & Tutorials” trigclass=”contentLink” expanded=”true”]
For a list of available CSS properties, as well as tutorials and demos, visit the W3C’s CSS page.

CSS can be created and edited with any plain-text editor, but there are many tools that can make it easier.
Adobe’s DreamWeaver ($$$$), Aptana Studio (free) and Coda ($$ – Mac only), are some popular choices.

Both the Google Chrome and Mozilla FireFox (with the free FireBug plugin) browsers have sophisticated CSS-editing tools that allow you to edit CSS styles instantly on a live web page, cutting down the time and complexity involved in working with complex styles.

CSS Lint is a tool that can tell you if your CSS is error-free (or “valid”).
[/expand]