Finding the right typography for the job is a harder task for online users, however. The Internet is full of text, but not just any text. Only a very few fonts can be interpreted by the majority of computers, which leaves web designers with little choice in their text, until CSS. With CSS, designers have full control of their typography making it much easier to use a unique font. Below we’ve listed 30 great examples of typography using CSS that are sure to inspire you to keep searching until you find that right font for your next web design project.

Life in Greenville

Greenville is a happenin’ city. This website does a great job of communicating that from the get go with inspiring typography.

Austin East Ciders

Austin East Ciders utilizes a great combination of script fonts and sans serif fonts to market online.

Circle Meet Ups

This website serves as an online calendar. The homepage (above) is created intuitively as a flyer for upcoming events.

Goodness Popup

This culinary website is intended to direct people to the right table for New York Fashion week. Immediately, the great use of type setting communicates a restaurant menu feel.

Viljami Salminen

As a designer, this guy knows how to get his readers’ attentions. Utilizing weathered type-faces, he creates an old pressed look.

Senic

Type behind type can be confusing for the eye. Yet this design does a great job with high contrast in color and boldness of fonts.

Captain Dash

Finding harmony amongst script and sans can be meticulous. These designers pull it off with ease.

Hello Bar

This website belongs to developers who are trying to redesign how we browse the web. For them, it’s no less than necessary to stand out in their typographic design.

Build Responsively

Build Responsively is a 2 page layout design which serves one purpose: inform people of a responsive design seminar. Communication is key; their fonts are spot on.

255 Creative

This light font with colors interspersed and set on a minimal background is quite eye-catching. It seems that they certainly know how to design a smashing website in looking at this design of their own header page.

Haus of Design

With a name like Haus of Design, the bar is pretty high for developers like these. No worries here; they nail the elegant yet relevant fonts on their front page.

Headset Press

At first glance, you’d think this site was a designer’s portfolio. It’s actually an informational blog-site for Cycling enthuists. Excellent type and setting generate a welcome feeling.

Deciduous

This design company has a great organic feel. The curvey letters and subdued bright colors really help amplify the simple typography.

Think Green Meeting

This company is all for thinking green; so is their typography. Check out the excellent use of CSS throughout the site.

Visual Box Site

This website is a hub of creative visual content. The web design isn’t very traditional, but with the aid of modern type-design, this site comes to life.

James Lai Creative

Sometimes type can get overwhelming. In casual applications, it’s necessary to keep it reserved. This site demonstrates simple design with a fashionable application.

Sursly

Some argue that art is about breaking rules. This site definitely utilizes good typography to do so.

Square Space

In modern design, simple is better but simple can be hard to obtain. Square Space executes minimal typographic design with ease.

Sofa

Again with the subtle and simple design, Sofa uses unique font choices to generate some clean CSS typographic effects.

Toby Powell

Toby Powell knows how to use the right type for the right purposes. Using bold fonts where needed, his readers know exactly where to look.

Colour Pixel

Balancing type and design can be pretty challenging when incorporating lots of colors. Colour Pixel really utilizes a sleek typographic approach to maintain stability.

Zach Klein

Zach Klein took time to make sure his fonts were set correctly. Sometimes this is all it takes when coding for good typography.

The Under Signed

When typography becomes the focal point of a design, the designer has demonstrated the skill of an excellent typographer. Check out The Under Signed to see what I’m talking about.

This is Aaron’s Life

Minimal designs always tend to make use of great fonts. Perhaps it is because more of the effort is placed into the type than anything else.

80/20

A special font can do a lot in moderation. Take 80/20 for example, their header acts as a logo but it’s only type.

Aentan

Aentan is another great example of using short CSS to ensure that all the text fits together despite its simple design.

Anthony James Bruno

Here, we find a pretty cool use of consistent font choice. The note to make here is the styling in the coding. Carefully resizing the important things can really save you trouble when searching for multiple fonts.

Stefan Coisson

Adding hand-drawn elements into a design can give a page a very original look. The title of the website is a stunning hand-drawn font that really draws the eye.

Twisted Intellect

Twisted Intellect does an excellent job laying out a beautiful serif font perfectly. The centered text underneath the title of the page is perfect in placement, and the all caps is pulled off nicely on this page.

Quipsologies – Under Consideration

This site is interesting. Since they are communicating so much information on one page, they are required to find efficient and creative uses of typography. The logo is just one example of their stunning use of typography.

Website designers know the importance of CSS application that can transform any drab looking website into an attractive and secure one. CSS has now come up with an upgraded version- the CSS3 that can be used to organize the layout and style of the web page. CSS3 comes with a treasure trove of exciting new features and capabilities to make your website look more appealing.

Here are some of the exciting capabilities of CSS3:

Easy and User-friendly

The capabilities of CSS3 can be used in an effective way in design and development of a website. The primary objective of CSS3 is to make web designing easy and user friendly. Therefore, major complications from the earlier version of CSS have been removed for facile operability. The new changes brought about in CSS3 need to be seen to be believed. It makes sure that a web page now appears exactly the way a web developer had envisaged and designed. Moreover, using CSS3 can add great speed to the processing of the website.

Cleaner HTML Codes

One of the major advantages is that CSS3 is capable of giving better search engine results. The HTML code becomes much cleaner, resulting in easing the load off the search engine crawler. The real content can be located easily and you can put any content in any corner of your website, irrespective of the number of pages in your website. This has made web designing much more simplified, since you can apply styles to your entire website from the same CSS3 files.

Light Coding and Faster Loading

Another plus from the CSS3 series is the light weight coding. Website development has become a child’s play even for a novice who can now use CSS2 codes and make the website lighter and load faster. CSS3 does away with the table layout format due to which the site requires lesser memory and a faster loading.

Better Control Over Website

Website designing makes it essential for you to validate the site in all formats of the browsers. By using CSS3, you can gain better control over your website by incorporating more compatible style elements. Fonts, line heights and formatting become much easier and faster. Developers having certain disabilities can use the CSS3 to design a website. Additional functionalities such as crafting specific CSS files for printing and for mobile devices have been made available on the CSS3 platform. Thus websites can be made compatible with all applications supporting multimedia.

Individual Modifications

With the advent of CSS3, changes and modifications can be now made in individual and isolated modules. The CSS3 format allows developers to segregate structures from presentation. In doing so, you separate the presentational characteristics in style sheets and define document structures in a separate heading. This simplifies the maintenance of a web page and increases efficiency and comfort of developing a website. Thus, with the new CSS3, website designers have a lot of more liberty in developing web pages.

The new CSS3 is such a complete package in website designing, that once you use it, you get hooked to it. The old style sheets tag now seems to be a thing of the past. CSS3 has come and conquered the style sheet arena with a big bang.

1. Button Maker

The button maker tool is provided by Adam Kalsey. Just pick some colors, enter some text, and you’ll get a button you can download for your site.

2. Button Maker Online

Use this online free button maker tool to easily and visually create those popular “XHTML valid” micro buttons (80×15). You can also opt for the larger 88×31 button instead.

3. Button Maker

Button Maker is a wonderful free tool to generate the CSS codes for your buttons. You have access to different colors for different parts of the button. Sliders on top of the color choosers let you modify the size and shape of the button which you can see on the left. To obtain the code, you click on the button.

4. Da Button Factory

Create buttons online quickly. You can create buttons of different sizes and download the output as PND,JPEG,GIF or ICO.

5. Free Flash Button Generator

If you are looking for a source to create Flash buttons, then the Free Flash Button Generator will do the job splendidly. You start by selecting a button style. Colors can be changed through the HEX values. The bottom pane lets you add links to the button and the names of the links. Clicking one final button generates your button and its corresponding HTML code.

6. Web 2.0 and Grudge Style Button Generator

This online button generator does a bit more than generating grudge and Web 2.0 buttons. It also generates a menu system from your buttons.

7. Glassy Buttons

Generate glossy buttons online and download the zipped file of buttons. As you can see in image below there are lots of options to generate buttons.

8. As Button Generator

With As Button Generator, you can create buttons by editing through a tabbed interface. The customization options cover a lot of ground and will satisfy all of your button creation requirements.

9. HTML and CSS Rounded Corner Button Generator

This site is for developers looking for a very simple but 2-in-1 button creation online tool. With HTML and CSS Rounded Corner Button Generator you can create buttons but modifying their colors and obtaining a ZIP archive that contains PNG image file of the button as well the HTML and CSS code.

1. Awwwards

2. Webcreme

3. Unmatched Style

4. Best Web Gallery

5. CSS Design Awards

6. Css Cake

7. Css-Showcase

8. The Design Inspiration

9. Moluv

10. CSS Winner

11. CSS Heaven

1. Sexy Drop Down Menu w/ jQuery & CSS

Preview Demo

2. Create The Fanciest Dropdown Menu You Ever Saw

Preview Demo

3. CSS3 Mega Drop Down Menu

4. Sliding Jquery Menu Tutorial

Preview Demo

5. Create Vimeo-Like Top Navigation

Preview Demo

6. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Preview Demo

7. Drop Menu

Preview Demo

8. A Cross-Browser Drop-Down Cascading Validating Menu

Preview Demo

9. Superfish v1.4.8 – jQuery Menu Plugin By Joel Birch

Preview Demo

10. jQuery (mb)Menu 2.7

Preview Demo

11. Smooth Navigational Menu (v1.31)

Preview Demo

12. Longed-For Multi-Level Drop-Down Menu Script

Preview Demo

13. Reinventing a Drop Down with CSS and jQuery

Preview Demo

14. Styling Drop Down Boxes with jQuery

Preview Demo

14. Designing the Digg Header: How To & Download

Preview Demo

15. A Circular Menu With Sub Menus

Preview Demo

16. Perfect Signin Dropdown Box Likes Twitter with jQuery

Preview Demo

17. Fancy Sliding Menu for Mootools

Preview Demo

1. CSS3 Generator

CSS3 Generator helps developers generate cross-browser snippets for various CSS3 properties. It gives developers full customization functionality, including border-radius, text-shadow, RGBa, box sizing and box resizing. Just click on the simple drop-down menu and generate the code for the desired effect.

 2. CSS3 Maker

Border Radius makes your designs look more elegant with less effort. Enter the desired value, and it will generate code for rectangles with different border specifications. Use it to make your designs adorable.

 3. Grid Designer

Grid Designer is an online tool for designing grids. It comes with different options to allow you customize columns, pixels, gutters and margins.

4. CssTxt

Csstxt helps you in illustrating the lots of different ways to add a style to a text file with the help of ‘a’, ‘p’ or ‘div’ tags.

 5. CSS3, please!

CSS3, please is a multipurpose tool with versatile features like border-radius, box-shadow and linear gradients. It is an online application that shows immediate results on the right side of the window, helping developers create useful cross-browser CSS3 code in a jiffy.

 6. SkyCssTool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

7. CSS3Pie

CSS3 PIE comes with a quick demo and some controls for executing a few CSS3 properties, such as border-radius, box-shadow and linear gradient. Move the controls to see the changes in the accompanying box. Then, mark the check box to show the CSS box and view the generated code.

8. CSS Tab Designer

CSS Tab Designer is a unique and easy to use software to help you design CSS-based lists and tabs visually and without any programming knowledge required. With the CSS Tab Designer, you can quickly design your list visually, choose from a variety of styles/colors (60+ different designs/colors supported), generate strict XHTML compliant code.

9. CssToolbox

CSS Toolbox includes a number of tools for fast-tracking and enhancing the development of style sheet code, such as an advanced CSS Formatter and CSS Validator.

10. Boxed CSS

Boxed CSS is a free website that offers you CSS grids : they are free to be downloaded and modified, without a linkback required.

 11. Widget Pad

Widget Pad can enhance the CSS3 capabilities introduced in Webkit browsers with a simple but effective auto-generator. It covers CSS properties such as opacity, rounded corners, transforms and more.

12. CSS Menu Maker

Css Menu Maker is for Making professional CSS menus simple, for the average webmaster.

CSS stands for Cascading Style Sheets is a language with the sole purpose of describing the formatting or looks of any document being written in markup languages. Most commonly it is being employed in styling of HTML or XHTML based web pages along with application in some other forms of XML based documents XUL, SUG and plain XML. CSS serves the important purpose of creating a distinction in between document’s presentation and document’s content for any document being written in markup language. Elements like font specifications, color and layout etc constitute the presentation of any document.

A number of advantages can be achieved by the distinction or separation of presentation and content some of which are listed:

• Content accessibility is improved.

• All the constituents of document presentation are handled with a lot more flexibility as well as improved control.

• Multiple pages can be made to share the same formatting.

• Allows with the flexibility to present a single markup page in different styles.

• Any repetition present in the structural content can be reduced along with minimizing complexity.

The hard work and research of designers never seems to get to an ending. Brilliant designs and implementations continue to arrive in every aspect of technology. Remarkable tools techniques continue to add up in CSS and there are a number of such attributes which are very much unknown but play important part in content presentation, typography and layouts. Some of these important techniques are discussed with a state of mind of providing guideline that these tools should be learnt and then apply the right one at right place.

These tips and tools are for CSS3 and CSS2.1.

1. Font Size Adjust: This is a very useful property which provides flexibility for using different aspect ratios without making them appear like too tiny or huge. It generates sparkling results when properly utilized.

2. White Space: Majority of beginners of CSS ignore this property of white space considering it unimportant. This perception is true but only up to a limited extent as one can go along without this using property for some time but once its importance being uncovered it becomes inevitable. It becomes an element of repeated use because it is very much handy.

3. CSS3 Gradients: Quite often there is a need of different sorts of patterns. Strips, multi-color stops, checkered patterns and a lot more exclusive background design patterns can be generated with the help of CSS3 gradients.

4. 3D Hologram: CSS can be used to achieve holographic effects. A new tool in this regard is the 3D hologram which changes perspective on the basis of device orientation.

5. Progress bars: A number of nice looking progress bars have been created with CSS3 fancies without images.

6. Pseudo Class: CSS stuff can be controlled much easily and effectively in different formats, places and states with pseudo classes without consuming much space.

7. Space Combinator: This is another overlooked attribute with even some professionals not aware about the full potential of this tool.

8. CSS Animations: This can be used as enhancement layer in designs.

9. Attribute Selector: It can perform element selection on the basis of “rel attribute” also.

10. CSS Selectors: Complex selectors can be used to keep the markup neat and semantic.

This list is by no means limited and importance of techniques can vary depending upon situation.

CSS3 (Cascading style sheet ) is an advanced version of style sheet programming language for website presentation. The term cascade refers to the specific style of font to be loaded in a page. CSS is written mainly to facilitate the web pages with the presentation which includes separating of the text from one another creating a better and clear view which pay way for categorization of data in a single page with fast access of information.

Presentation of web page included the usage of different optional features of coding so as to show variation in data with layout,color, font, table, .. showing new effects on page to attract users attention.

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

New features over the existing:

CSS3 has new improvements over the existing levels of CSS1 and CSS2 bringing different outlook over the web page using the CSS3. Some of the catchy features to be noted which depict well about the CSS3 are…

Box and Text Shadow

Programmers can create a shadow effect over the Box and Texts with the help of Box-shadow and Text-shadow with out using a flash tool.

Custom web fonts

Using the font rule that is @font-face we can make use of any font style out of the options we have while creating a web page.

Layers

Layers are of very effective on their expression of transparency which allows more layered effect of background pictures making the sheet look showy on their appearance with more stuff of expression.

Rounded corner

Corner are made into smooth curved effect instead of the sharp box like effect showing a blunt neat finishing with the help of border-radius rule which can be applied to all four corners of the sheet.

Animation

Animation is made easy in the CSS were web kit-transform is used to spin circle graphics. Which has a best effect when viewed with the Mac Chrome or Safari.

Gradient button

Gradient is cross browser supported Which is much flexible and scalable, a gradient button has more advancements showing variation in text shadow, box shadow, border with rounded corner which can show a shade over the button with the help of gradient color adjustment. A white transparent image is used to give a gradient effect as all the browsers don’t support CSS3 features. Gradient can be shown as light and intensive effects giving pleasant appearance.

Drop down menu

A drop down menu is well suited to the environment once it works with Chrome, Firefox, safari, .. showing a good look on the corners, box effect and text shadow.

Round image

Round image is achieved effective with border radius and box shadow. Round borders and shades on the image gives a pleasant appeal over the image presented in a neat and eye catching look.

Web Browsers to support

A good effect on the usage of the CSS3 is sensed fully with the help of web browsers such as Firefox 3.6+, Chrome, Web-kit,Safari,.. Were the other web browsers does not support the features and improvements of the CSS3…

Thanks to CSS, we can now define a website’s appearance in a fraction of the time we used to, but why stop there? A good CSS editor can make the entire CSS process even faster, more accurate and…well… just more enjoyable. Most of us use Dreamweaver for all of our CSS editing needs, but it’s expensive and doesn’t offer some of the features you get from cheaper, often free alternatives.

First-rate CSS editors make writing CSS much easier, but that’s not all they’re good for. The vast majority will check your CSS for errors and let you delve into the code associated with your sites and the sites of others. With so many people now using these CSS editors, support it very easy to get hold of. There are loads of inexpensive editors available, so why not give a couple a try? You’ll find a review of the 10 best below.

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

1. Notepad++ (free)

Windows users can’t do much better than the free source code editor, Notepad++. Besides a long list of features, which includes auto-completion, syntax highlighting, bookmarking, drag and drop and regular expression search/replace, Notepad++ has been designed to be good to the environment, using as little CPU power as possible. Users can feel smug in the knowledge that their editor is actively reducing their greenhouse gas emissions!

Notepad++ is not just for editing CSS. You can use it for editing C, C++, Java, PHP and a whole host of other programming languages. Its tabbed interface is great, letting you work on several projects simultaneously, and all icons used are instantly recognisable. Furthermore, Notepad++ has been around for a while now, so does not suffer from the bugs which afflict many newer editors.

2. Style Master ($59.99)

Style Master, for Mac and Windows, is an editor suitable for beginners and experts alike. Newcomers to coding will find its in-depth tutorials easy to follow and old hands will be impressed with the number of features on offer for analysing and debugging sites.

Such features include MRI, which suggests selectors for any element you click on, and X-ray, which reveals the dimensions, padding, margins and position of any element and works in Safari, Firefox and Internet Explorer. Style Master comes with 20 handy CSS templates for you to use, all of which are perfectly clean and well laid out.

3. Stylizer (free version)

Available for Mac and Windows, Stylizer, from Canadian company Skybound, helps you to create and edit CSS fast. It places a website and stylesheet side-by-side, so that you can see every change you make in real time. No longer, therefore, will you have to rely on writing in a text editor and constantly refreshing a browser window. Its grid-like interface looks superb, is extremely user-friendly and makes CSS errors a thing of the past. Image replacement, clear fixes, positioning and other complex techniques are made much easier for CSS novices.

Stylizer’s strongest features include Bullseye, an inspector which uncovers all the CSS rules affecting any element you click on; Cleanser, which parses and validates any CSS you import; and Two Click Colouring, which helps to simplify the colour picking process. Stylizer is ideal for beginners who want to be able to code without learning the boring basics.

4. PSPad (free)

PSPad is a versatile editor for Windows. It’s a small programme, just 3.1MB to download, but carries real weight with many developers. It specialises in syntax highlighting and can deal with a large number of file types. Standard features include templates, search and replace in files, a HEX editor and an integrated free version of the superb CSS Editor, TopStyle Lite, which must be downloaded separately. Even if you’re just looking for a standard text editor, PSPad could be the one for you- its character and word frequency checker is ideal for those writing keyword-based articles.

5. Xyle Scope (free)

Cultured Code’s free CSS suite for Mac, Xyle Scope, is a very accomplished and highly recommended programme. Users can run it in Browser Mode, which lets you surf the web in Safari, or Selection Mode, which brings up the HTML and CSS associated with any part of a displayed web page you click on, allowing you to correct annoying CSS errors.

Although primarily designed to let you uncover and investigate code, Xyle Scope can also be used as a CSS editor. It also integrates well with superior, external text editors like BBEdit, TextMate and TextEdit. You can enter CSS yourself or let Xyle Scope help you if you’re a beginner.

6. Stylesheet Maker ($34)

CoffeeCup’s Stylesheet Maker, Windows only, is a nice and simple CSS editor which lacks some features of more technical rival software, but makes up for it with straightforward design. You can use it to open, edit and save in CSS, HTML and .txt formats, and create CSS for Netscape and Internet Explorer, testing it in multiple browsers. This is really one for beginners only. They’ll love the class and ID wizards which greatly help in creating full-featured CSS with control over text placement, fonts and backgrounds.

7. CSSEdit ($30)

CSSEdit, by Mac Rabbit, is a highly effective, well structured and pretty cheap CSS editor which you’re bound to enjoy using. Available for Mac only, it’s been designed solely with CSS in mind, unlike some of the other editors in this list. It works perfectly with TextMate (which is a very cost effective combo, by the way) and in harmony with other external programs, like Transmit.

CSSEdit’s packed full of great features, which include Preview, which makes changes to your website in real time (no refreshing) and X-Ray, which shows you exactly where an element is on your page. My favourite feature, however, is Milestones, which lets you fix bugs without the fear of losing work. I recommend you heed the CSSEdit warning: “May cause extremely attractive websites and bouts of validating code. Use with care.”

8. JEdit (free)

While novices will find Stylizer and CSSEdit much easier to get to grips with, JEdit, for Windows, Mac and Unix, is one for the experts. Developers can use it to edit, auto indent and syntax highlight over 130 languages.

What separates JEdit from other editors is the 150 or so plugins available, which have been released over the past 12 years since it was first created. These include spell checker using Aspell, text auto-complete and the XML plugin that’s needed for editing CSS, as well as XML, HTML and JavaScript. Besides plugins, you can customise with macros to create your ideal editing environment.

9. Style Studio ($49.99)

Style Studio CSS Editor, for Windows, has been designed to make CSS quick and easy to write and implement. Drag and drop, auto-replace and custom hotkeys for code snippets reduce your CSS struggle. Its inbuilt CSS validator makes sure that your CSS is clean and error-free every time as it automatically pinpoints problems. Its Browser Filter detects the browser your visitors are using, adjusting the CSS accordingly so your site’s always looking at its best. Windows users will feel instantly at home using Style Studio as it has been closely modelled on MS Office 2000 and XP.

10. Rapid CSS 2010 (€ 29.85)

Rapid CSS 2010, from Blumentals Software, is a popular CSS editor which can save you lots of time and effort. Beginners will appreciate the fact that they can get Rapid CSS to write CSS for them, rather than inputting it manually, and everyone will love its CSS Checker and Validator, similar to that of Style Studio, which allows you to instantly target and fix problems. Rapid CSS is also integrated with CSE HTML Validator for extra safety.

Besides the CSS Checker, other extremely handy features in this Windows only editor include the multi item clipboard, X-Ray (similar to CSS Edit), search and replace in files, CSS code compressor, built-in CSS reference and CSS inspector, which adds, removes and modifies CSS properties without the need for property names.

Understanding Divs, Css, and How They Work Together by Ethan and Adam

If you are new to XHTML, you should not miss this video. This video will help you understand how DIVs and CSS work together. The tutorial work on Dreamweaver and with this, it’s more easier to follow what the author was doing. In this website, you can find other videos, maybe useful for anyone who is beginner with CSS, Web layout in PTS…
Watch the Video

Create a Fully CSS Website Layout by Nathaniel

The most famous people in Youtube about posting Design Tutorial Videos. In this video, you will see how to design a complete basic website layout with css, learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! And there are other videos in his website helpful for designer. Check it all!
Watch the Video

CSS Tips & Tricks series by Stephen Korecky

Not a big collection but this series is helpful for you, who want to learn CSS  Tips and Tricks that users on over the internet are doing. This series contains 8 episodes and maybe continue to update.
Watch the Video Series

How to Convert a PSD to XHTML by Jeffrey Way

This video is a complete tutorial from PSD slicing and CSS styling… You can see how he did this video with PST, Visual Studio … He said this movie will shows you exactly how to convert a PSD into perfect XHTML/CSS. Yes, i think so.

Watch the Video

Converting a Photoshop Mockup by Chris Coyier

The video below is a part two of series made by Chris Coyier after lots of great feedbacks he received with part one right here. Because of part one is just 10 minutes lenght, he did the part two and in the great video he did, he show you everything, exactly how he created the CSS-Trick layout, but it’s just a mini-version of the current version of CSS-Tricks.
Watch the Video