Home
Username:
Password:
CSS 2/3 Tutorials

What is CSS? / Pure CSS Websites

Subtitles of the Movie

In this movie we take a tour of some good web sites for inspiration and demonstrations of CSS. These sites offer examples of what can be done with pure CSS design. Now, essentially these are web sites that use CSS to create elegant and effective web designs without misusing HTML. All things that we see are controlled with CSS and HTML is used only to structure that content. So, let's go ahead and jump over into our browser and take a look at csszengarden.com. If you've never been to csszengarden.com I do recommend that you check it out because it is quite informative. Now csszengarden.com was designed to make people get excited about using CSS, so if you look here we have some pretty nice design elements. We have an image over here to the left-hand side, different floating columns, all sorts of good stuff. Now, depending on how you feel about this specific esthetic you may or may not appreciate Zen Garden that much, but whenever you understand a little bit more about what's going on here you should find this very, very interesting because every element that you see here in terms of visual presentation is being controlled by CSS. If I go to the View Menu down to Page Style I can say No Style. Essentially what this is doing is it's allowing us to turn off, or select our different Cascading Style Sheets associated with this page. So if I say No Style we will be presented with our core HTML document. So as you can see here, it's just providing us the HTML content and you're not seeing anything visual in terms of images, so it's taken all of the purely visual items and removed it from our document so that this document would be presentable across multiple devices. So, that's really, really a great thing. Now I'm going to go back here and go: View, Page Style, and Current Style. So, that's really demonstrating how powerful CSS is, however, CSS Zen Garden is more than just that demonstration. CSS Zen Garden allows designers to take the same HTML document and change the CSS so that we have completely different designs. So, if I take a look over here to the right-hand side of this design, we see Select a Design. I'm going to click on this Make Ôem Proud. Make Ôem Proud loads up another nice design here. It's a little bit different than the previous one, and actually if you look at it, it's totally different. The only thing that remains the same is the HTML document. You can continue to explore the different designs that have been submitted here just by clicking on the different links in the Select A Design section. A lot of the things that you'll end up seeing here on CSS Zen Garden is pretty amazing, and it's pretty inspiring as well. Of course there are more designs than what's available here with the Select A Design, and you can click on View All Designs. It's going to allow you to come in here and select any of the different designs that have been seen on CSS Zen Garden in the past, so definitely a really nice place to see the full power of CSS as well as to be inspired to create some of your own designs. Now, to that end, there are also a couple of other web sites that have good galleries that are nice to go into and see and gain inspiration from. So if you go here to www.cssbeauty.com you'll end up seeing this is a web site dedicated to CSS design. Now, of course there's News, Jobs, Communities, but there's also your Gallery, and in your Gallery you'll end up seeing some nice little designs including something such as the Unstoppable Robot Ninja. So if you see here, this is a nice little CSS-based design, and you know, feel free to wander around in the galleries and explore and see what people have been up to. Now, the last web site we're going to take a look at is CSS Vault. This is www.cssvault.com, and CSS Vault is another nice place to go for a gallery. So if you go to the Gallery you're going to end up seeing these latest entries and you can click on any of them that might interest you and you can go to that web site and check out what's going on with the design. Now with some fresh examples in mind of how you can use CSS, you might be inspired with the freedom that CSS gives you for web design because if you can envision it, CSS can more or less make it a reality. Of course, good web design is also going to be complimented by good graphic skills so if you have either the ability to create good graphics, or the willingness to learn how to create good graphics, you will be able to create some really nice web sites by the end of this Course. With that being said, this course does not cover how to create web graphics, but there are a number of different Titles available through Virtual Training Company that do, so I recommend that you check out those Training Courses if that's what you're interested in. And that concludes this movie on looking at some of our pure CSS designs.

Tutorial Information

Course: CSS 2/3
Author: James Street
SKU: 34028
ISBN: 1-935320-64-5
Release Date: 2009-08-28
Duration: 13.5 hrs / 147 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available