Jeff Smith is the managing director of Karma Technologies, a company that specialises in building quality websites, ecommerce sites, desktop applications and company Intranets. Jeff feels strongly about implementing ways to be green into their business practices, to a point they are almost a paper-free company. At Karma they feel strongly about green issues.
Archive for the ‘CSS’ Category
Designing Using Css, Cascading Style Sheet Website Designs
Many website development companies, in earlier times used simple HTML to design websites. However, when certain design needed to be changed, it became very tedious to carry out those changes across all the pages of the website. Cascading Style Sheets, also popularly known as CSS, solved this tiresome task of making changes to every web page or the HTML document
Website development companies started using CSS to make their work easy of formatting the HTML document. Before CSS was introduced HTML tags were used to characterize fonts, tables, headers, paragraphs, and so on. The browser would then read these tags and present a formatted HTML page to the user. Tags for various formatting structures were embedded within the HTML and the content of the website. With more HTML tags getting introduced it became a little difficult for the website development company to manage the content and the presentation of the website. Introduction of cascading style sheets made it possible to separate content from the style of the website. One of the significant advantages of CSS was that it allowed the developers to organize the formatting and content of more than one page at one time

CSS has been evolving for quite some time now and web development companies have been adapting to the latest versions. After scaling out CSS1 and CSS2 versions, CSS3 is currently being developed and is being modularized. There are various ways in which the CSS can be sourced for the HTML page in the browser.
The web page designer/developer can define style sheets that can be referenced from an external file or embedded into the HTML page itself.
The user can have styles defined for the browser that will override the styles applied to the webpage. Such a CSS file is stored on the local computer of the user.

Though CSS has simplified things for designers and website development companies, there are still some limitations that must be certainly considered when using cascading style sheets.
The browser support for CSS is not standardized yet and older versions of some browser cannot decipher the style tags. Thus the desired layout of a webpage is not completely obtained.
Designers at times need to compromise on the visual effect of the webpage, as it is not possible to have different backgrounds for every graphic element.
CSS does not support any shapes other than a perfect rectangle thus putting a limitation on use of aesthetics for various shapes.
CSS does not allow full control on the vertical placement of the layout as much as it does for the horizontal placing of elements on the webpage.

There are few other drawbacks that might limit the use of CSS. However, these are being worked on in current version CSS3 and certainly with the advantages and the ease that CSS offer, it is unlikely that website development companies stop using CSS.
More HTML Tips and Tricks:
What are Cascading Style Sheets (CSS)
Cascading Style Sheets, also known as CSS, are the most popular and neat way of formatting an html page.

There are two versions of Cascading Style Sheets (CSS). CSS Level 1 was launched in 1996 and is supported by all browsers. This version is the older of the two and is used mostly for font formatting, text alignment and line spacing.

CSS version 2 came out in 1998. This one is a lot more powerful than its predecessor allowing you not only to format text but also to position elements on your web page. This version of CSS is so powerful that all good web designers use it instead of using html tables.

The word Cascading reflects how style sheets work. An Html document can be linked to several style sheets, for example it could be linked to 2 sheets, an internal style sheet (styles within the head tag of a html document) and an external style sheet (a .css document).

An important aspect of Cascading Style Sheets is the operation of inheritance. If a certain aspect of formatting is not specified for a child element, it will inherit the formatting of its parent element.

When you use CSS, you can avoid the use of most html format tags making your code much easier to read. Here’s an example:

If we want to have a Blue size 12pt title at the start of a every article on our web site we would have something like this in our html code:

title

You might be thinking “that doesn’t look too bad”… but what happens if you have 50 titles throughout your site? You would have to repeat this process over and over again, and you will be at risk of using different formats for your titles and by doing so breaking the consistency of your design. Not only that, if you decide to change the color or font of all your titles you would have to go through the process of changing all 50 font tags…

Here’s when CSS comes in handy!!! Instead of using font tags for my titles I would use this:

In a separate .css document I would add a new style called “titles”. It would look something like this:

.title { font-size 12pt; color:blue;}

and in my html I would replace my font tags with:

Title

And voila!!! All titles that are within the titles class will be formatted in the same way. The beauty of style sheets is that they can be linked to as many web pages as you want making the whole process of adding more content to you site a whole lot easier.
Sebastian De Masi is the Founder of 06WebDesign.com. 06WebDesign.com provides resources to help you create an effective and lucrative online solution for your business and establish an online presence amongst the most reputable companies World wide.

For more information visit http://www.06webdesign.com
More HTML Tips and Tricks:
How Can I Create A Cascading Style Sheet?
Ive looked OVER 1 million tutorials..I know that but its just that,I want something like this:
Can someone explain step by step..because those tutorials DONT teach me anything
Thanks.
Similar Posts
- —> Sheet
- SC 2031, SCIENCE & INDUSTRY, MINT SHEET 50-20 CT CV $27 | Science Tube
- Clipper City Holy Sheet joins Mutiny Fleet | Beernews.org
- Wingnut Math : One Penny Sheet
More HTML Tips and Tricks:
How Do I Get A Css (cascading Style Sheet) Onto My Website?
I need to have a cascading style sheet on my website (capecodshellcreations) and do not know how to build it using my Yahoo Sitebuilder Program. Anyone know how to do this?
More HTML Tips and Tricks:
The Low Down On Cascading Style Sheets
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.
Mikhail Tuknov is a search engine optimization specialist providing web site search engine optimization (SEO), pay per click (PPC) management and web analytics services.
More HTML Tips and Tricks:
CSS Tricks and Tips
Fun CSS Tricks You Can Use
CSS or Cascading Style Sheets allow you to implement a few neat effects on your webpages easily. You can implement these CSS effects on your site by simply copying and pasting the code.
Rollover Color Text Links
Have your text links change color when the mouse passes over them by inserting this code into the HEAD of your document:
LINKS WITH NO UNDERLINE Remove the underline from any or all of the links on your page by putting this in the HEAD of your document:
Or, remove the underline form individual links by forming them like this:
link
Links With A Line Above And Below Them
This is an interesting look that works especially well as a hover attribute for your links, but can also be applied to all of your links. It will show the normal underline and a line above the link:
HIGHLIGHTED TEXT
Highlight important text on your page or words you want to stand out, easily:
highlighted text
Try adding it to your link hover for a neat effect:
Background Image That Isnt Tiled
This will create a background image that doesn’t repeat:
You can also center it, however it will be centered as the background of the entire document, not centered on the screenful:
Author – Dan Grossman runs http://www.websitegoodies.com where you can find over 250 hand-picked resources, articles, and tools! Dan also publishes the free weekly “WebDevPortal” newsletter for website owners! Subscribe today and get articles like this every week: subscribe@websitegoodies.com?subject=article-subscribe.
More HTML Tips and Tricks:
Why Cascading Style Sheet (CSS) is Better?
Top 10 Reasons Why CSS is Better than HTML Tables
It has long been debated that the use of style sheet languages such as CSS is said to be much more efficient than the use of ordinary HTML tables. Ever since the growth of the world wide web, professionals of the industry have sought ways on how to improve the presentation of their websites both efficiently and effectively. Style sheet languages such as CSS have perfected this need and became the universal language for designers and developers alike. The question is, what are the reasons why CSS is much more useful than the use of HTML tables?
Several advantages has been cited on the use of CSS in web design. Some of those advantages are as follows:
- Faster loading of pages
- Efficient and easy
- Consistency
- SEO friendly
- Accessibility
- Maintainability
- Usability
- Sophisticated layouts and designs
- Bandwidth efficient
Faster Loading of Pages
One common problem of using tables for web layout is the slow loading process. This is usually caused by using too much markup tags in one HTML file such as “td align”, “td width”, “bgcolor”, “width”, “height”, “br”, “font face”, “font color”, “cellpadding”, “cellspacing”, “border”, etc along with the content of the HTML. CSS makes up for this by separating the content of the web page which is text and images into the HTML file and the visual presentation such as the web design, positioning, and text sizes into a CSS file. In a CSS-based layout, table tags or markups are replaced by using its own language such as the popular “div”. This replacements includes:
- Instead of the usual table tags such as td align or td width CSS have replaced this by using divs .
- Removed all layout editing markups such as height width cellpadding cellspacing border bgcolor font tags from the HTML. All layouts are found in the CSS file.
- header tags such as h1 or h2 are used for font tags headings.
- Breakline tags br is not used.
Because CSS have cut the use of too much markups, websites can load a lot faster than using tables which is good when attracting visitors to a website. Visit an online Web design Philippines site to learn more about CSS and its use in web design.
Efficient and Easy
As mentioned above, by using CSS, the layout of the HTML is separated from the content thus allowing a quicker, efficient, and easier redesign. Tables would require more time as the HTML content and layout tags are in the same file. By simply editing the CSS file, designers could easily rearrange the size or the color of an element found in a website.
Consistency
In relation with the above statements, web designers can easily redesign the whole website by just editing the CSS file. Unlike the use of table in which a designer would have to open every HTML file just to edit a simple element found in every page such as a header, CSS can offer an easy way to edit it all in one CSS file. All it takes is opening the CSS file, edit the elements found in the header (such as width, height, etc), and re-upload it.
SEO Friendly
There are several reasons to this. This reasons are:
- Because CSS is much faster to load than tables search engine spiders could easily crawl through the website.
- Because CSS doesn t require too much markup which makes it easier for search engine spiders to crawl the website.
- The use of header tags such as h1 h2 or h3 makes it easier for the search engine spiders to determine the information in a website.
- The use of Javascripts for visual effects are replaced by CSS own effect engine which makes it more SEO friendly.
Accessibility
Because of the Internet’s rapid growth, disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices. Tableless Web design considerably improves Web accessibility in this respect. Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure.
As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds, mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page. For more web design and development solutions, then visit an online Web design Philippines site.
Maintainability
Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as HTML editors, changing the positional layout of elements on a whole site may require a great deal of effort, depending on the amount of repetitive changes required. Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.
By use of CSS, virtually all of the layout information resides in one place. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.
Usability
By combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content submission forms. This allows a contributor, who may not be familiar or 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.
Sophisticated Layouts and Designs
Unlike the use of tables, CSS offers freedom in designing. Because of the rigid, inflexible, and grid based form of tables, designers cannot utilize their potential in designing. CSS offers absolute positioning of elements paired with the z-index property allows CSS-based designs to position elements on top of one another (like layers in Photoshop), allowing for more unique, complex, and beautiful layouts.
Bandwidth Efficient
A stylesheet will usually be stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network. Visit a Web design Philippines site to get the solution you needed with your website.Visit
Author – Margarette Mcbride is a copywriter of Optimind Web Design and SEO, a web design and seo company in the Philippines. Optimind specializes in building and promoting websites that are designed for conversion.. http://www.myoptimind.com