Web Design and all stuff related to it!

CSS has been around for more than 10 years already beginning in its development in 1997 but it seems it has been in the public consciousness for only a relatively short time. The reason for this is because it wasn’t until the year 2000 that many web browsers began using the capabilities of CSS beyond its more basic color and font characteristics. Of course things are way different now and virtually all modern day browsers feature support for all CSS Level 1 aspects, many aspects of CSS Level 2 and some web browsers have even gone beyond that to support some of the capabilities of CSS Level 3.

Indeed, it is rarely that you find a web site nowadays that does not utilize some form of CSS in their design and development. For better or worse, web sites that rely solely on HTML are quickly going the way of the dinosaur. May industry pundits as well as end users have even gone so far as to consider a thorough knowledge of CSS as being far more necessary than a thorough knowledge of HTML. While in truth they are both equally important and will continue to be an important facet of the web for many years to come, there is no denying the widespread impact that CSS has brought upon the World Wide Web.

CSS was originally developed as a means by which web developers could define both the look and the feel of their web pages. With its inception, web designers were now able to treat content and design as two separate entities, thereby allowing HTML to function more in accord with its intended purpose, which was to focus on the markup of a particular web site’s content and leaving the responsibility of the design and layout to CSS.

The term CSS itself is an abbreviation for Cascading Style Sheet. The style sheet in this particular instance refers to the document itself. The concept of style sheets itself is nothing new; designers have used them in their documents for many years. Strictly speaking, style sheets are the set of technical specifications that govern a particular layout, whether it is online or on print. The purpose of these of course is to ensure that any subsequent designs will conform to the predetermined specifications upon printing.

This concept can be translated easily enough to the World Wide Web only in this particular case, Cascading Style Sheets not only determine the technical specifications of a particular document on the web but also has the added function of communicating to the viewing vehicle (in this case the web browser that the end user is using to surf the Internet) exactly how the document that is being viewed is to be rendered.

One of the most important things to remember in all of this is the key word Cascade. Much like a stream of water running of a cliff or elevated area comes into direct contact with the rocks and soil that line the full course of the incline, yet is ultimately only affected in terms of its final destination by the land elements at the end of the slope, Cascading Style Sheets by their very nature flows or cascades through any number of separate style sheets. To follow the stream of water analogy even further, the appearance of a particular web site is ultimately dependent upon the user agent style sheet, which in many cases is the default style that the Web browser will utilize in the task of displaying a particular web page in the absence of any other set of instructions.

Of course more often than not, a web designer will probably provide any number of his own instructions that are embedded in the web page in question. The Cascading Style Sheet in this particular scenario will be tasked with dictating to the web browser which particular set of instructions will have top priority. The most commonly seen usage of this is in the fonts that are used for a web site. Even if your web browser is set to display web pages in a specific font and type size, say Arial narrow 10 points, the font size and family that is specified in the Cascading Style Sheet will take precedence overriding the default values that have been set in your browser.

Cascading Style Sheet go far beyond font specifications however into the areas of XHTML and XML markup. This means that Cascading Style Sheets could be used to define the look of any XHTML and XML markup that you use in your web site.

Clearly Cascading Style Sheets are one of the most powerful tools that any web designer can have in his or her arsenal and they can have a tremendous impact on the whole look and feel of a web site. If you are at all interested in becoming a professional web designer, a thorough knowledge of Cascading Style Sheets is crucial.

So all of us who have worked on websites before, or even have just browsed the net, have come across something called CSS. If youre familiar with HTML at all, youve definitely heard the term. With the way that the internet works, simply go to www.master-web-graphics.com there always a new update to the way that websites are coded and structured. CSS is a fairly new addition to website programmers tool box. Today we will be going over the language the history of and the pros of using CSS.

What is CSS?

Cascading Style Sheets, CSS, is a coding language used to describe the presentation of a document written in a markup language such as HTML. CSS is used by both the authors of web pages to control colors, fonts, layout, and other web page properties. It is used mainly to separate website structure from website content. This improves accessibility, flexibility and control of content presentation.

CSS History

Style sheets have existed since the beginnings of SGML (Standard Generalized Markup Language) in the 70s. Cascading Style Sheets were developed for creating a consistent approach to providing visual presentation information for web documents. As HTML developed over time, it evolved to include a variety of stylistic capabilities for web developers. This gave designers more control over site appearance but also made HTML more complex to write and maintain. Web browser variations made consistency difficult, and web surfers had barely any control over how web pages were displayed. The W3C began working on a new way to control visual presentation of web content. Out of 9 different proposed style sheet languages, CSS grew from two of the 9, Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). As work was done on the development of these two languages, CHSS took over, and eventually the H was dropped as these style sheets could be used with other markup languages. CSS1 specification was completed in 1996 and Microsoft’s Internet Explorer 3 was released with limited support for CSS. In 2000, IE 5 was released, with full CSS support. Right now, most browsers support CSS; Including Mozilla FireFox, Internet Explorer, and Netscape Navigator. There are a few discrepancies in how each browser interprets certain CSS properties, go to www.thedesignduild.com but these have been solved with CSS hacks, workarounds, and CSS filters in order to obtain consistent results across web browsers.

Pros

Some of the advantages of using CSS are:

Visual presentation information for an entire website can be held in one CSS file, which allows for changes to be made cross-site quickly.

Different users can have different style sheets.

The documents code is reduced in size, since it does not need to contain any code pertaining to the visual presentation of content.

Pages using CSS are easier to edit in the future.

By no means is this a full explanation of CSS, as that would take many articles to fully explain. But I hope that this article explains a little bit about CSS, how it has developed, and some of the pros of using it.

What is so good about CSS anyway?

If you have been looking for a new website for a while, you will (no doubt) have visited many websites of developers and companies that can create them.

Lots of these companies bandy about terms such as W3C and CSS. So what is all that about and why do I need it?

To answer that question we need to look at how web pages are created.

In olden days (about 10 years ago) the web page was typically just a bunch of text and the odd picture. This was fab at first but then people wanted to do more with web sites, they wanted to format the page better. But the rules behind the web page (HTML) wouldn’t let you do that, so web developers being the canny individuals that they are decided to use tables to organise the material.

Now, tables are OK for showing tabular data, but our clever web designers where now using them with clear borders (so you couldn’t see the table) to position text and pictures where they wanted.

Bingo! That resolved that problem. Well no… not really.

Those pesky website developers wanted more and more control so they started putting tables into tables (called nesting). Many websites had pages with lots and lots of tables and loads more nested within them. The net effect was that the website was slow. The browser took alot more time to read the tables and display the text and graphics.

What’s more, because the makers of the web browsers couldn’t quite agree about how HTML should be displayed, we found that a website looked great on Internet Explorer but slightly odd on Mozilla or Opera.

Something needed to be done.

At last CSS was invented that did an amazing thing for web developers. CSS or Cascading Style Sheets allowed the web designer to separate content from design which was usually integrated in a traditional site page.

The CSS style sheet was a separate file in the web site that stored all the designy bits to the website, the font sizes, position of graphics & menus and just about everything and more. The actual pages had text (content).

Wow, this meant that we could now position text and graphics with pixel accuracy instead of old tables, and better still the web pages loaded faster cos only one stylesheet had to be read for whole site.

If you have read this far, then I applaud you.

CSS are used to separate the elements of a page such as color, layout and fonts from the contents in a page such as images and paragraphs and helps better crawler by search engines.

Search Engines prefer pages with less file size, though it’s not specified by search engines but logically analyzing it really makes easy access to crawl the pages that is always advantageous.

By using CSS (Cascading Style Sheets) you can structure you web page according to HTML standards with out compromising on the look and feel of a web page, and there by take the advantage of improving your search engine crawl rates

Cascading Style Sheets help to reduce overall amount of coding on your web page, by removing HTML pages and putting them into a style sheet, (.css file).

This sort of page structure layout helps in building a web page with smaller file sizes having less code and more flexibility that facilitates easy crawl for search engines.

CSS also helps to hide the content from browser, for eg. You may have some content that needs to appear on the print rather than show up on the web browser or vice versa. This is where CSS helps you to make that difference.

From Search engine vies, they still crawl and index all of the content and so you need not have to compromise on the advantages the content brings.

So before beginning, try to understand CSS (Cascading Style Sheets) and have a perfect idea to build you web site design that is more effective for search engine crawl.

In the current scenario, the websites are swiftly populating the web. The design of a website plays a crucial role in its popularity. Properly designed website with good design tactics definitely leads against its competitors.

There exist some simple and highly effective websites that use cascading style sheets (CSS). This functionality is implemented in the websites to improve the web design and to make the website perform better in major search engines. It also helps in grabbing quality traffic for the websites.

Before going further with CSS Web Design, it is important to understand the meaning and application of CSS.

What is CSS and how it is used?

CSS stands for ‘Cascading Style Sheets’ a new functionality widely used for layout and style of web pages. With the help of CSS the presentation and styling code is separated from the actual content in web design. CSS implementation consists of few rules which are stored in separate files with a .css file extension. Then CSS file is linked from the web page using HTML link tag.

In the past decade, tables were the only tool available with the web developers to design the layout of web pages of any website. But with CSS support, web developers now have a choice. There are lots of advantages in terms of web design to separate the presentation code into distinct CSS files.

Here are some excellent web design modes through which the web site design could be made more search engine friendly. These are as follows:

Use CSS to Structure the Document

Content is very important part of any website. Search engine robots read the content of the website and indexed it. By removing the extraneous table tags and replacing them with smaller HTML (div) tags formatted with CSS rules makes it much easier for the robots to read and index the content. This makes the code search engine friendly.

Use CSS to Style the Header Tags

Search engines give importance to header tags. As header tags are used to define page structure and simplify page navigation. Using CSS here makes the header tags appear in nicely formatted and attractive text. This increases visibility of the website in the search engines.

Use CSS to Create Rollover Images

Traditionally, web developers create rollover images using 2D graphics with some complex JavaScript code. This JavaScript code can adversely affect the search rankings of the website. Instead of this creating a normal text link and using CSS to format its appearance is a much better way to create images.

There are number of benefits of CSS over the classic web design techniques.

Benefits of CSS Web Design:

1. Separation of Content from presentation: HTML mark-up, text, graphics and multimedia can be separated from presentation.

2. Consistency: CSS provides a way to apply single style to various pages at a time. For example: to change the background color of all the pages of the site just make a change in CSS and it will be reflected in the entire website.

3. Maintenance: CSS makes the code clean & clear, and more understandable which can be easily edited and maintained.

4. Search engine rankings: With the help of CSS, one can position the content at the top in the page code to make it SE friendly.

5. Fast loading: Table-less design diminish the load time by 25 to 50 percent.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. It’s most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for table less web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

Syntax

CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;)

In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.

In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is: hover, which applies a style only when the user ‘points to’ the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or#elementid:hover. Other pseudo-classes and pseudo-elements are, for example: first-line, visited or: before. A special pseudo-class is: lang(c), “c”.

A pseudo-class selects entire elements, such as: link or: visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as: first-line or: first-letter.

Uses of CSS

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.

Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice offont, size, color and emphasis for these elements are presentational.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use the HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of the entire original presentational HTML markup.

Cascading Style Sheets is something every webmaster should learn to use, however it can be complicated to code by hand. Fortunately, the built in Dreamweaver CSS tools make it simple as pie as you’ll see in this introductory lesson.

Whether you are a total newbie when it comes to CSS or you are an expert, the built in Dreamweaver CSS tools can help you out a lot.

This tutorial is designed for the person who owns Dreamweaver, is curious about CSS and wants to learn how to put it to use.

CSS is not hard to learn and with the Dreamweaver point and click tools, it is easier than ever.

3 Types Of CSS:

You can have an internal, external, or inline css style sheet.

In this tutorial, I will discuss an external style sheet, which I think is the most useful when working on a website with more than 1 page.

To create an external stylesheet with Dreamweaver, simple click ‘New’ and under ‘Basic Page’ choose ‘CSS’.

This will give you a blank style sheet.

The next thing you want to do is experiment and create 1 or 2 CSS definitions.

You might create a CSS definition called ‘background1′ and make the color green.

Then save the CSS style sheet as something like ’sample1.css’.

Next you would open an html file in the same folder that has some text in it and ‘attach’ the external style sheet.

You attach the sheet by selecting the ‘Text’ dropdown menu and choosing ‘CSS Styles’ then ‘Attach Style Sheet’.

Once you have attached an external style sheet to a webpage, you can make changes to the external style sheet and change the content page. This is especially important if you have a website with multiple web pages.

The concept is, that by attaching an external style sheet to all of your web pages, you can update many web pages instantaneously by changing the one CSS style sheet that is attached to them.

In this manner, a large corporate website with 20,000 pages could be updated with new colors and fonts in less than 15 seconds!…Simply by changing the one external CSS style sheet.

So you see how useful CSS style sheets can be.

To get started, simply go into your HTML code after you have attached an external CSS sheet to your page in Dreamweaver. You can take any tag like a tag and start typing in a CSS class.

For example, . If you start adding a css class to any of these tags, Dreamweaver will start to auto-complete it for you and you can choose which class you want to add from a dropdown menu.

You can also use this to style page backgrounds, table backgrounds, fonts, and much more!

You only have to learn the fundamentals of CSS and then experiment with Dreamweaver and I promise you’ll be capable of using CSS with Dreamweaver in a matter of a few hours.

To learn more about Dreamweaver and Cascading Style Sheets, you can watch step by step videos at http://www.dreamweaverhowto.com

s for ‘Cascading style sheets’ which is a computer style sheet language. It gives web designers the liberty of affixing different styles like color, spacing, font and so on to the HTML documents of a website. The work pattern of CSS is same as a template, styles can be labeled and then applied to many web pages altogether. Numerous benefits are associated with CSS like effortless website maintenance, easy access to alter the style sheets, SEO advantages, etc are associated with it.

Use of CSS in your websites can make a website more search engine friendly, so that your website gets higher ranking in search engines. The bots very well understand the cascading style sheets and makes a website score fairer in online rankings.

As far as nature of search spiders are concerned, they are very lethargic. They usually avoid going through lengthy and complex HTML codes for getting the indexes. The search engine spiders prefer HTML coding with CSS as they are precise and clear when compared to any other table based coding. Lots of over work is saved by these external style sheets. Primary reason behind HTML codes getting clear and yield higher search engine rankings are the CSS files which help in designing and deciding the attributes. Overall download time of the website is minimized as combination on CSS and Java script files decreases the web page size. Thus the indexing becomes faster leading your website to higher rank positions.

Application of CSS makes a website light-weight which is preferred by major search engines like Yahoo, MSN and Google. CSS eliminates junk HTML codes and keeps them well organized making them a favorite among the search engine spiders. Bots are not concerned with complicated HTML coding but the website and its content.

CSS works not only for search engines but also for the website visitors, as it gives a well-formatted look to the web pages. Visitors also prefer websites that have standardized format and do not have old fashioned and complex HTML coding.

The great benefit of CSS is- it allows any web developer or designer to move almost all display code out of the HTML elements in the respective web pages, excluding the straight content. CSS makes it a lot easier to implement changes to the page and users only have to download display code once (in the linked CSS file).

Thus when search spiders are able to crawl easily and at faster pace due to smaller web page size, the chances of getting high rank doubles, making CSS extremely beneficial SEO tool.

Copyright © 2009

What is CSS ?

CSS or Cascading Style Sheets is a great tool to add a unique look to your web pages.  CSS enhances fonts, colors, and even the spacing of your web pages.  It is a useful tool to let you separate your HTML content from your style. For example, you can use your HTML file to create and organize the content, but all of the visual presentation including the background, fonts, colors, link effects, text formatting, and spacing are created with a CSS file.

Benefits of CSS

As discussed, CSS makes it easy for you to separate the style and layout of your HTML files from their informational content.  This means you can determine the look of your site in one file, and change the whole site by modifying that single file. It also means you can make your HTML changes by accessing one file.

This structure provided by CSS also means that you can work with your web pages so that they look good on any browser.  For example, a page on Mozilla can look very different than a page seen on internet explorer.  CSS eliminates that difference.

CSS gives you more control over how your pages look because it is a more detailed mechanism than HTML.  HTML wasn’t designed for style, it was designed for document structure.  CSS was designed for style.  This means it is easier for you as a business owner seeking brand development and recognition to define your “look” and give it a unique and consistent feel.

Users say that CSS also prints better than HTML documents.  Important if visitors are accessing your content, which they hopefully are, printing it, and taking it with them or better yet – sharing it with their friends and associates.  Additionally, the pages allow visitors to print the entire page as opposed to the partial pages that HTML often prints.

CSS decreases your page size significantly, making it easier for your visitors to load your site and all relevant graphics and copy.  It also means that your web pages can be seen quickly and clearly with handheld browsers.  This is huge because many people are now surfing the internet on their cell phones, smart phones, and PDAs.  If your site doesn’t load quickly, chances are people are going to leave.  If your site is quickly and clearly accessible – you may have a new customer!  Additionally, it will take up less space on your server if you’re running close to your limit – and save you less money if you’re being charge by bandwidth.  This is because CSS requires less code.

CSS enables you to position the code for your content at the top making your page search engine friendly. Properly marked up, HTML pages can easily found and properly categorized by search engines.

It is also fairly easy for anyone to learn because CSS already uses well-known coding elements and principals.

The benefits of CSS include making your web site:

• Faster to create

• Easier to maintain or change

• More adaptable to fit new and emerging technologies

• Compact

• Neater and cleaner in the HTML code

How do I use CSS ?

Cascading Style Sheets can be used in two ways – internally or externally. When used internally the CSS code is placed within the ‘head’ tags of each HTML file. The HTML code basically looks just like this:

2. Using the @import method, appearing as:

@import url(Path to stylesheet.css)

So what method do you choose?  That depends on what you need.  For example, internal is used when a designer needs to style only one page, or different pages with different styles.  Web page designers tend to prefer an external cascading style sheet. This is because, as noted earlier in the benefits list, you will only need to edit one CSS file to change the entire website. Webmasters also find external is better because they are easier to maintain, they’re more compact, and generally the appearance is easier to control and stylize.

Potential Concerns

Not all browsers can read CSS.  This is a real concern; however, the percentage has decreased to the point where less than 1% of browsers are affected.  What sites are affected?  Older browser versions, created before CSS was standard, including Netscape 4.0.  Because the vast majority of browsers are significantly newer than this, and because the World Wide Web Consortium has recommended the use of CSS, making it a widely acceptable and recognizable mechanism around the world, all concerns about using CSS are negligible.

Bottom Line

CSS is a tool that will make your web pages easier to organize and maintain, your website easier to change, your brand potentially stronger, your website more compact and easier to load, your search engine optimization will improve, oh and your pages will just look better.  There really isn’t a reason to not experiment with CSS and integrate it into your web site.  Once you begin using and designing with  CSS, you’ll likely find building sites is more fun, faster, and they look amazing.

We talk about table less design these days so that they are more search engine friendly. So what is this table free designs. Well, it is not really new it is just that search engines have started giving CSS more importance now as Web 2.0 standards are adapted by many.

CSS means Cascading Style Sheets and it is a simple way of displaying your content to the search engine which is better than tables. In short the spiders were having issues with tables so they have decided to go CSS way.

Well, you need to create correctly formatted may be based on Yahoo GRID base style sheets in your HTML pages that can make your site more accessible. You should test it with various browsers such as IE 6 and IE 7. It is important to test on Internet explorer because if you miss a simple tag, it will not display your page.

Your

website design decides your presence on the Internet. Many sites were originally made with tables and are now migrating to CSS, why? Because the communication of CSS with search engines is friendlier than the tables as stated above as well. Other benefits of CSS includes faster download, changes of color scheme is much quicker among others.

Recently at

Applelounge.com we have migrated our team from developing sites in tables to CSS, it was a daunting task. It is ongoing as new things are being introduced and lot of testing goes in CSS. So if you decide to get your site developed in CSS expect to pay more for it than a regular table based site.

CSS is certainly the new way moving forward with certain observations recently noticed by allocation of Google Page Rank to different sites, which is sites that have migrated to CSS have received higher PR rankings than the sites that do not have been implemented on CSS.

You should also consider in what version of HTML you are using. If you use a specific version then it might not work in all systems. So you will not get all your pages accessible, but with CSS you are bound to get it right. See for yourself on a major search engine such as Google.com.

You may consider inserting flash to give a better look to your site or applets or other plug ins that look great, however you need to be aware that these plug ins do not assist you in Search Engine optimization but add an extra pressure to your server. Of course use of such plug ins is important for interactive demo’s but these embedded tools should be followed by strict guidelines.

In Conclusion,

websites are evolving and so are search engines. Sites are competing each other on a global scale to be on top of each other by adopting technologies that help them the most. CSS is the way to go now and there might be another powerful weapon in the future that may further charge up your site. But in the near future, CSS is the way to go.