The Best Online Sources for Learning CSS
WMT Section: Webmaster Tips - WMT Category: Web Design Tips
Written by Webmaster-tips.net

Email
cssonlinetutsites.jpg
One of the main building blocks of any website is CSS. Most styling that you see on any website is done through CSS. Without it, the Web would be pretty bland and just plain boring. If you don’t already know CSS, you’ll be amazed at some of the creative things that you can do with it - especially now with the release of CSS3.

Who needs to take a paid course or purchase a book when you have the Web? If you’re looking to learn CSS on your own time and for free, here are 15 online sources that can help you with that.

W3Schools

W3Schools is a popular choice for learning CSS as well as HTML, JavaScript, PHP and more. Here you can learn about the basics, styling, the box model (an inevitable part of CSS), along with advanced topics. W3Schools offers examples, quizzes for testing your knowledge, and references for future use.
image07w3sc.png
Once you’re done learning about CSS, you can get your own CSS Certificate by taking an exam on the W3Schools website. The cost is $95.00 and study materials are provided to you for free. Upon completion you’ll have a CSS Developer Certificate to prove your skills to the world.

CSS Basics

As the title implies, this source only teaches you the basics. There are 18 chapters to go through and they can all be downloaded and/or printed for your convenience. Some of the chapters included are: syntax, classes, IDs, divisions, spans, margins, padding, borders, lists, and positioning.

CSSeasy.com

CSSeasy is just that, an easy to navigation site that lets you learn CSS “the modern way”. What is the modern way you ask? Well, it involves viewing the source code of an actual layout and playing around with it to see what happens when you change something. Many people swear by this method of learning CSS (and other programming languages).
image00csseasy.png
CSSeasy provides you with 8 different layouts to view and edit as you please. Once you open up the layout, go to “view source” and then you can copy and paste the code into your HTML editor, so that you can play around with it.

Mozilla Developer Network

The Mozilla Developer Network is a learning center where you can learn HTML, CSS, and JavaScript. It serves as a resource with links to a variety of CSS tutorials and training materials. There are three sections of material: introductory level, intermediate level, and advanced level. This is a great page to bookmark for future reference.

1KeyData

1KeyData (also known as 1KD), is very similar to W3Schools and CSSeasy. It has many of the same topics as well as useful resources. Additionally, 1KD provides tutorials in German. Their CSS tutorial includes topics on: media types, IDs, margins, borders, padding, font, tables, positioning, the box model, and more.
image041keydatra.png
As the website states, “by the end of this tutorial, you should understand the basic concepts of CSS, as well as using common CSS properties to style your HTML code”.

Adobe Developer Connection

Adobe Developer Connection is much like Mozilla Developer Network as it provides various CSS resources for learning the basics and core concepts. You can also learn how to design with CSS in Dreamweaver, which is great for anyone who uses this program regularly (or wants to use it regularly).

CSSTutorial.net

CSSTutorial.net is a place to learn CSS step-by-step and it was made with beginners in mind. It includes: introduction to CSS, CSS Tutorial: Part 1, CSS Tutorial: Part 2, CSS Tutorial: Part 3, CSS & Images, and CSS in Web pages. Along with this you’ll have access to a forum, various tutorials, videos and news all regarding CSS.
image03csstutnet.png
New tutorials and videos are added frequently; you can subscribe to the newsletter to keep up with new additions.

HTML.net

HTML.net, much like CSSeasy, has tutorials broken up into lessons (16 total). Besides English, the content is available in 10 different languages.You can also change the layout of the website to suit your preferences. Lessons include: colors and backgrounds, fonts, text, links, margins and padding, borders, height and width, positioning, and more.

CSS Dog

CSS Dog provides tutorials for beginners and advanced users. Additionally, you’ll also find CSS references and information on CSS3 selectors. Each section (beginners and advanced) is broken up into many sub-topics.
image05cssdog.png
Under beginners you’ll learn about: syntax, units, colors, fonts, text, images, links, margins, padding, outlines, scroll-bars, and more. Under advanced, you’ll learn about: visibility, positioning, pseudo classes, pseudo elements, text effects, printing, layouts, and more.

Develop PHP

Don’t let the name fool you, Develop PHP is more than just a place to learn about PHP. It’s also a great resource for learning the fundamentals and properties of CSS and includes video tutorials.

Code Style

Code Style is a place to get your CSS questions answered and a place to learn how to write better CSS code. It includes a CSS glossary, CSS font-family glossary, and media dependent style sheet glossary. If you’re looking for great CSS resource pages to bookmark, this is definitely one to have.
image01codestyle.png
You can also learn about using CSS3 styles with JavaScript in order to add advanced styling to your pages like rounded corners and drop shadows. It also provides you with a CSS validator to install on your computer.

Studies Inn

At Studies Inn you’ll find CSS tutorials ranging from syntax, internal CSS style sheets, external CSS style sheets, inline CSS, classes, backgrounds, outline, padding, margins, lists, tables, and much more. On top of that you’ll find tutorials on other topics, free scripts, and technology articles.

CSS Portal

CSS Portal is the ultimate site for resources, tools, examples, and online generators. Along with learning CSS, you can: validate your CSS code; use the CSS layout generator to create fluid or fixed layouts; find CSS templates to use for your websites; use the CSS menu generator; and format your CSS code with their code formatting generator.
image06cssportal.png
Under sources you’ll find books, color names, hacks, news, properties, software, snippets, templates, and tutorials. Under tools you’ll find a CSS validator, generators, and editors. So as you can see, CSS Portal is definitely a site that you’ll want to reference often for all of your CSS needs.

Easy CSS Tutorial

At Easy CSS Tutorial, you can learn the basics all the way up to advanced topics. There are 6 sections to go through: basics, links and lists, text and fonts, working with images, box model, and CSS layouts. Each section is broken up much like a course, allowing you to conveniently go at your own pace.

Tuts+

Tuts+ gives you 30 days to learn HTML and CSS. The free course is broken down into 30 days, which each day being a new topic. If you can stick to it for 30 days, you’ll know all that you need to know in no time.
image02tutsplus.png
Since this course is HTML and CSS mixed together, you’ll learn more than you will at the sources above, which just focus on CSS. Topics include: lists, heading tags, anchors, images, the basics of typography, zen coding, CSS frameworks, how to slice a PSD, how to create snippets, and much more.

With all of the FREE available resources online to learn CSS, there is really no excuse not to at least know the basics.

What your favorite source for learning CSS and referencing back when needed?

Email
 
< Prev   Next >

Social Media Links

rss-cube.png
WMT Rss Feeds
twitter-bird3-square.png
@WMT_Joomla
TwitterCounter for @wmt_joomla
mail-square.png WMT Newsletter newsletterkaofeed123.png  
Image
Advertisement

Joomla Templates

Advertisement

Webmaster-tips Useful Resources - Hosting

Researching the top hosting providers for your new website? Try webhostingreviewboard.com's comparison charts.
Recommendation to newbies: Always start small and get a shared hosting first if you are new. Have a look at iPage shared hosting service to begin.
Best shared hosting to support your website.

Webmaster-Tips

Contact Us!
Site Map

Write for webmaster-tips.net

Do you have any Joomla custom work either on template, component, module or plugin to show off?
Or do you offer free tips and resources for webmasters?

Submit News to WMT...

About Webmaster-tips.net

Webmaster-tips.net is a Joomla CMS related portal that publishes authentic Joomla Extensions, tips and resources for webmasters. Follow wmt_joomla on Twitter
Joomla Components | Joomla Modules | Joomla Plugins | Joomla Templates | Flash Stuff | Icons | Graphics | Wallpapers
Copyright 2006 - 2014 Webmaster-Tips.net. All Rights Reserved.