Archive for the 'CSS' Category



Introduction to Cascading Style Sheets (CSS)

Saturday 20 September 2008 @ 11:51 am

What is CSS?
What are cascading style sheets? Let’s suppose for a minute that you wanted all your paragraphs in a multi-page document to be center-aligned. If you omit the attribute and value for the

tag, what do you think the browser will do? It will simply use its default setting, which is left-aligned. So, every time you create a new paragraph, you have to remember to type in the attribute and the value. If you forget, your document won’t look like you want it to be.
Now that would be no big deal if you only had to deal with one or two pages and one or two tags, but what if you are dealing with a website that has 50 pages and hundreds of different tags.
CSS was introduced in late 1996, as an elegant cousin to HTML that promised several things, including:

• more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
• a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
• compatibility across browsers and platforms; and
• less code, smaller pages, and faster downloads.
CSS represents the Word Wide Web Consortium’s (W3C’s) effort to improve on the tag and attribute based style of formatting. The idea is that style sheets provide a way of customizing a whole page and even whole sites at one time and in much richer detail than the simple use of tags and attributes.
Plus, CSS is sort of like the cornerstone of Dynamic HTML, which is another subject that you should investigate. We aren’t going to get into that subject too much other than to show you how to add DHTML effects to your web using Front Page and possibly importing some already created DHTML applets into your web.
So CSS is a technology that gives you, as a webmaster, much more control over all these things that you would ever have in HTML alone. So let’s dig in to the basics.

Conclusion
It is worth the effort to learn and implement CSS’s because they provide unsurpassed control over the layout of Web pages. They’re also the most efficient way to maintain and update a large site, and they make for smaller pages that download faster.
CSS works through individual style sheets rules that consist of selectors and declarations. These rules can be embedded in an HTML document, linked to or from an HTML document, imported to an HTML document, or added inline within an HTML document. Each method of adding CSS to Web pages has its own benefits.

Resource : http://techapps.esc2.net/resources/m_Web_Mastery/Day2/Intro%20to%20CSS.doc

Share



Top 12 CSS Frameworks and How to Understand Them

Saturday 30 August 2008 @ 8:11 am

Most designers would have heard of the term ‘CSS Frameworks’, for those who don’t know or aren’t sure, here is a brief description from: Wikipedia:

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage. .


Sounds great doesn’t it, something that is going to make designing and developing a website that little bit easier. It will take away the repeating of the same old boring stuff and if you write your framework correctly you will be guaranteed your code will meet W3C recommendations. That will leave you plenty of time to design your site, the fun side of the job!

There are a number of Frameworks you can freely download and use, you will need a fair bit of CSS knowledge, some patience and a fair bit of time to get yourself familiar with the layout. The page layout structure is pretty standard across almost all Frameworks, it could be: Header; Main Content; Sub Content; Local Nav; Main Nav; Footer. They also have simple layout structures: Vertical Nav; Horizontal Nav; One Column; Two Column… The variations on structure goes on and on… Any structure you want, basically.

What I am trying to say is that if you are a serious designer/developer you need to use a good Framework, something that in the long term is going to save you a lot frustrations and time. Maybe you will or already have written your own Framework. I have my own, well two actually. One purely for WordPress and one for everything else. Not much difference in the two, but I do like to follow a particular method when designing for WordPress, just my preference.

There is a lot more to CSS Frameworks than I have written here, but I am not going to bore you, download them and try them out. If you don’t like it don’t use, its not for everyone. As with everything else in the world there are a few critics of CSS Frameworks, the pros do outnumber the cons, its all about opinion.

As for me I love them, and I am very grateful to the writers of the following ten CSS Frameworks:

12 of the best CSS Frameworks

1.Elements CSS Frameworks (Source: Project Designs)

2.WYMstyle: a CSS framework (Source: Daniel Reszka)

3.YAML CSS Framework (Source: High Resolution)

4.YUI Grids CSS (Source: Yahoo)

5.Boilerplate CSS Framework

6.Blueprint CSS

7.Schema Web Design Framework
(Source: David Golding Design)

8.CleverCSS

9.Tripoli Beta CSS Framework
(Source: Monc)

10.ESWAT Web Project Framework
(Source: Philip Karpiak)

11.CwS CSS Framework
(Source: Content with Style)

12.My (not really mine) CSS Framework
(Source: That Standards Guy)

Credit : http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Share