CSS: The Very First Steps – New Premium Tutorial
This one is for those who are hoping to take their first steps into web design. This 70 minute Premium video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you’ll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.
Don’t know what CSS stands for? Need help diving into CSS? Never created a website before? If so, this screencast was tailor-made for you! Sign up for a Premium membership!
Join Tuts Premium

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at Nettuts+, Psdtuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.






so tempting now
cool! ^_^ i cant wait to read it! ^_^
Very nice tutorial. Thanks.
Finally, a Tuts for 100% beginners
I’m glad I’m a Tuts+ member!!!
Thanks JW
Keep them coming.
I want to start learning. As you are a beginner, I think you can help me how to start.
Because of health problem I almost locked up in my house for a long time, so that don’t know anyone who can help me about this. Pls help me.
@Jeffrey Way
I have a recommendation. The free Tuts and Tuts+ content can be organized or filtered as for “Beginners”, “Some experience” and “Advanced”? That way we can get the right content faster
I think that would be a fabulous idea
I reckon this would be an excellent idea as well – that way you wouldn’t get all those people in the comments complaining about the beginner tuts, even though they’re clearly marked as “For Beginners”
Bravo Jeffrey! I have your PSD to HTML/CSS to Wordpress Plus Tutorial constantly playing in the background while I work so that I can learn the ins and outs of a basic site.
Between that tut-set and the jQuery series on ThemeForest, you’ve taught me so much – I’m so grateful!
Didn’t see it in the Latest plus box on the dashboard, I agree their needs to be a better system for downloading Plus content. Also when I login to the dashboard I don’t want to be redirected to the Account page, I just want to download some plus content!
@Jeffrey Way
Just something I thought should be mentioned should you decide to take this tutorial (beginner css) any further, but be sure to mention how adding padding and such affects the width of objects and such. That may be kinda confusing to someone new if they are trying to place items in a container with a specified size and it doesn’t seem to wanna line up right.
Also, I don’t know if this is something you could easily go back and fix now, or if you would want to bother, but, at around 59:30 into the video, there is overlapping audio. Sounds as if audio from another video got overlaid onto this one
Hey David. Can’t believe you bothered to watch.
This was for beginners.
I’m utterly baffled about the 10 second audio problem there. Actually – I don’t think I did any editing of this video. Very strange. I’ll try to fix it soon.
I already knew enough CSS to get by but this tut really helped.
That was an awesome tutorial, it taught me so much more than i already knew.
Thanks =D
I find it funny that they offer “source files” when you can easily snag css files from any website ^^. I guess if it makes things easier then it’s useful…
Part of me is selfish and wants to see more jQuery or PHP tutorials, but part of me felt a little proud that such an awesome tutorial came out of a site that I’m a member of.
I’m not the intended audience, but even I picked up alot of best practice and that might sound crazy but it’s true! Plus as well, teaching others seems quite natural to Jeff so keep it coming!
Why is this a plus tutorial? I’m guessing that most of the readers of Nettuts are way beyond an introduction to CSS. So for those who already have a plus account, I’d bet this isn’t going to do a ton for them.
I guess I see a tutorial like this as a way to show people what a plus tutorial is like and if it is worth it. But I think it is weird that you are making a plus tutorial for beginners, beginners probably being the demographic that would be on the fence about spending money on a subscription. While the more advanced users, who already have a plus account for all the other great tutorials on this site, probably already know most of the information in a tutorial like this.
Don’t get me wrong I think this site is great, just think this is a little out of place.
i hear you on this one. i am beginner and wasnt a member but payed to see this tut…
I couldn’t disagree more, Andrew.
Surely there are subscribers of the site who excel in certain areas like graphics for whom a beginners guide to CSS is a great way for them to spread their wings?
If we all know it all already then the site is somewhat redundant.
Good to have you on board Leonardo!
You make me understand YEAAARRRSSS of ununderstanding (if this word exist…)
Thank you !!!!! ^^
R.
Great tutorial — this and the CI ones are really good, very clear and professional.
Very nice tutorial. Thanks.
I have waited for almost a year for this! Thank you so much! You Rock!
Thanks for a fascinating and informative tutorial on CSS. It has clarified so much for me.
Just one thing, since I would like to practice everything I learnt, could we have this as a non-streaming flash movie? Or even as a printable tutorial.
It is a very big stream and I can’t DL it to my desktop.
Great tutorial for those who are jsut starting and trying to understand about webdesign basics like me.
I am glad i joined as a member
it would be great if you could continue this tutorial and do the second part, creating pages and adding a cool effect navigation bar.
New to CSS, but loved this video… the way you taught just makes sense and I picked it up pretty easily. Looking forward to more advanced editions. Great job!
Give more examples
Awesome Jeff
Jeffery,
I’m sort of a newbie to css and think this would help me but… unfortunately about 15 min into the tutorial flowplayer stops and gives me the loading icon and never ever loads again. Is there a problem in the streaming of the vid?
I pay for a monthly subscription and really would like to view the whole tutorial. Is it possible to download this tut directly to my desktop.
Also when directed to this content I sometimes get two options on the right
1. Download Video
2. View Screencast
Both are not always available. Just thought I’d let you know.
Thanks,
Athear
Hi Athear – If you view the Net Plus tab specifically, there will be a link for you to download the video.
The screencast nor the download are working properly. The screencast stops loading around 12 minutes and the downloads will not complete in Safari or Firefox.
It’s working now.
The video doesn’t seem to be working.
It should be working now. Thanks for your patience!
Is there anyone who can pay Plus account for me, because there is no PayPal in my country, and I just love these tutorials?
I would pay whatever it costs, if there is someone who could help me. I have a Moneybookers account, so I will pay to whoever who can create a Plus account for me after my payment to him.
Thank you