CSS is a style sheet language used to describe the presentation semantics of a document written in a markup language. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. CSS was initially released on 17th December 1996, and it was released and developed by W3C.

Let’s have a look at some of the advantages that CSS has to offer.
Flexibility:- When CSS is combined with that of the functionality of CMS, a healthy amount of flexibility can be programmed into content submission forms. This allows a author, who may not be familiar or be able to understand or edit CSS or HTML code to select the layout of an article or other page they are submitting on-the-fly, in the same form. For example, an author of an article may be able to select the number of columns and whether or not the page or article carries an image. Later this information is passed to the CMS and the program logic evaluates the information and determines how to apply classes and IDs to the HTML elements, therefore styling and positioning them according to the pre-defined CSS for that particular layout type.
Separation of Content and Presentation:- CSS facilitates publication of the content in presentation format based on the normal parameters. Nominal parameters include explicit user preferences, different web browsers, the type of device being used to view the content the location of the user and many other variables.
Bandwidth:- A style sheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, reducing data transfer over a network.
Site Wide Consistency:- When CSS is used effectively, in terms of inheritance and cascading, a global style sheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, then these changes can be made simply by editing a few rules in the global style sheet.
Page Reformatting:- With a simple change of one line, a different style sheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. More than that, devices which are not able to understand the styling still display the content.

These have some of the advantages of CSS and it clearly proves that why programmers and developers use CSS.
Offshore Web Development

CSS or also Cascading Style Sheets is basically a style sheet language used to describe the presentation semantics of a document written in a markup language. The most common application is to style web pages written in HTML and XHTML. CSS was developed by World Wide Web Consortium (W3C) in the year of 1996. Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents.


( Read more )

Browsers cannot start rendering till all Stylesheets loaded. Visitors see blank page (or previous page) during loading of CSS so it’s especially important to load these components faster.
If you have many Stylesheet components, then visitors will have to wait more because of HTTP requests overhead.
Let’s look what can be done to reduce time to render.

1. First, we want to move CSS components to the HEAD section of HTML document so the Stylesheet will be loaded with first priority.
Worse case is when CSS included on the bottom – in this case browser waits till whole document including all components loaded before start rendering. The same thing may happen when CSS included with @import directive, so avoid using @import.

2. If we have several Stylesheets we join them into one bigger CSS file. As described in the previous post about Image Sprites, we want to reduce amount of downloaded components because of HTTP request overhead. And if in case of images there is just a delay before loading next image, in case of Stylesheet it’s a worse case: visitors see blank page until all Stylesheets loaded. One single file loads faster because there will be minimal overhead and usually it compresses better too.

3. We can go even further: if user comes with empty cache we can avoid additional request by including Stylesheet required for the page into HTML. So there will be no requests for CSS at all during loading of the page.
We can preload Stylesheet after the page loaded so for primed cache page views user already has the Stylesheet cached. This way we reduce download size and avoid HTTP requests.
More detailed:
Set a cookie when visitor comes for first time. Check the cookie on every request to determine whether the visitor comes first time or not. This way we can guess cache state of the visitor. Don’t inline Stylesheet component if visitor comes with primed cache, use an external definition instead.
Postload the external Stylesheet component when visitor comes first time (without the cookie). See example below.
Cookie named “jsl” will be set when user sees this page for first time and next requests will use external Stylesheet component.
You can set such cookie in PHP:

$is_first = !isset($_COOKIE['jsl']);
if ($is_first)
setcookie('jsl',1,time()+3600*24,'/','.site.com',false,true);

We’ve supposed that browser cache data will be removed in 24 hours and cookie expiration time set to 24 hours.

The block above will output inline Stylesheet in case user comes for first time otherwise it will output link to the static Stylesheet components. You should place this code inside document head.
It will work correctly even in case user comes with empty cache (for example if our cache got forced out because cache size limit).

Style.css – global CSS file. Probably in real application instead of readfile(’style.css’) you will include only part of the Stylesheet that’s needed to render current page.
To find out CSS that’s really required for current page, you can use a Firefox extension: Dust-Me Selectors (note that this tool may not count CSS rules for elements you assign dynamically in Javascript).

Replace existing opening tag

with

>

We’ve added document onload event handler that will create link DOM element if user comes with empty cache so the components will be already in cache for further page views. The external component will be preloaded only after whole page loaded and rendered so it won’t hurt performance.

CSS tooltips are very popular in modern web design and contrary to popular belief it is really easy to create them, especially with one of the all so popular javascript frameworks.

Before I started to delve deeper into this topic, I thought you have to use at least a plugin, but to get some basic tooltips all you need are about 10 lines of CSS and jQuery Code.

This Tutorial will teach you how to create such tooltips with some basic CSS and jQuery.

Creating jQuery Tooltips: the CSS

First of all take a look of what we are going to create (hover over the link block and don’t care about the background, it’s only for better demonstration of the tooltip transparency)


( Read more )