Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.
Once you've developed a site or two with a framework, you'll have a good feel for when they're appropriate and when they are not. With that in mind, let's take a look at some of the more popular CSS frameworks. Blueprint is one of the oldest and most respected frameworks around. It includes a CSS reset, a layout grid, best practices typography, form styles, print styles, and more. It's also one of the better-documented frameworks as well, with its own wiki and live demo pages that you can explore. You can find it at www.blueprintcss.org.
52framework is a full-featured framework focused on the newer features of HTML5 in CSS3. It includes fallback support for older browsers and is also extremely well documented, with demo pages and video overviews of all the major features. You can find it at 52framework.com. The 960 Grid System is one of the most popular CSS grid-focused frameworks. It offers grid layouts based on the commonly used dimensions of 960 pixels, with a dizzying array of options for creating multiple-column layouts.
One of the very nice features of the 960 Grid is that the download also includes Photoshop and Firework templates based off the grid framework to make site mockups even easier. You can find it at 960.gs. Another very popular framework comes from Yahoo! The YUI 2 framework is small in size but very powerful in terms of layout options. In fact, there are more than one thousand layout combinations available with YUI 2 Grids.
It's also very well documented, with sections dedicated to getting started, using the grids, and how it works on mobile devices. You can find it at developer.yahoo.com/yui/grids. If you're looking for something a little bit more stripped down, check out css-boilerplate. This is a framework developed by one of the creators of Blueprint. It's designed to be a lightweight framework with a greater emphasis on semantics.
It may lack the features of other frameworks, but it provides a solid starting point for projects, without the larger footprint. It's hosted a Google code, and you can find it code.google.com/p/css-boilerplate. Baseline is a lightweight framework focused on typography. It features a true baseline grid for type, solid typographic conventions, and a flexible four-column layout grid.
It's a great framework for someone looking for advanced typographic styles without additional overhead. You can find it at baselinecss.com. There are of course many other frameworks for you to research and experiment with as you explore whether CSS frameworks are right for your projects or not. As you experiment with the frameworks that I've mentioned here, be sure to search for additional frameworks to compare. Have fun trying out some of the CSS frameworks I've shown you here. Just keep an open mind and be honest about the pros and cons of using these frameworks as you start to work on them within your own projects.
Find answers to the most frequently asked questions about CSS Fundamentals.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.