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
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.
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.
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
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).
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.
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
(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.
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 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
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.
New tutorials and videos are added frequently; you can subscribe to the newsletter to keep up with new additions.
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 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.
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.
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 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.
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.
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 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.
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.
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+
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.
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?
|
