Learn CSS in 12 Minutes

I introduce CSS, explain how to link a CSS file with an HTML document and teach the syntax of the language along with the most common properties.
Support this channel at / jakewright
---------- More tutorials ----------
Learn HTML in 12 Minutes: • Learn HTML in 12 Minutes
Learn More HTML in 12 Minutes: • Learn More HTML in 12 ...
Learn JavaScript in 12 Minutes: • Learn JavaScript in 12...
Learn PHP in 15 Minutes: • Learn PHP in 15 minutes
---------- Text editors ----------
For Windows users, I recommend using Notepad++ to edit HTML files:
notepad-plus-plus.org
For Mac users, I recommend Sublime Text:
www.sublimetext.com
SUBSCRIBE FOR MORE TUTORIALS
kzbin.info_cente...
jakewright.net
Follow me on Twitter: / jaketvee
Like me on Facebook: / 267738313375279

[@corysarz]

2 hours of lectures and 3 hours of lab exercises and you showed the same stuff in 12 minutes. Well done. Thank you

[@IanDabre07]

without those 2 hours of lectures and 3 hours of lab exercises, you wouldn't have understood much from this video.

[@cutipowinic5107]

+Ian Dabre I disagree. Just watched this for the first time, without any prior html work, and pretty much understood it. It's not that complicated. Time to time I had to replay parts, but it's actually quite easy to understand..

[@IanDabre07]

cutipowinic so technically you watched the video for more than 12 minutes. if you had done a prior study of html even basics you could have watched this video without replaying any part. :)

[@paulphysman6891]

+Ian Dabre still even 5 replays < 5 hours

[@IanDabre07]

Paul Physman 5 replays > 12 minutes.

[@MohitKumargritch]

Anyone else watching in 2020? I didn't quite notice how old but relevant this video is !

[@adewalesadiq7798]

I am just watching as well.

[@ben3ng933]

I am watching today

[@fiendeceuninck8705]

I have to make a html and css for school...

[@revivalrivaille469]

well html and css are waay older so..

[@paramhanschaurasia471]

Yes me to watching today

[@northernforrest8669]

Comment{ Content quality: excellent; Explanations: clear; CSS: learnt; Webpage: complete; Hotel: Trivago; }

[@purplegamerwolves7570]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae eros non urna aliquet dictum eget id sapien. Nulla sagittis, dui nec ullamcorper iaculis, magna velit vulputate dui, molestie ultricies lectus libero sit amet nisi. Curabitur quam est, faucibus at ante vitae, tincidunt pharetra nunc. In aliquet elementum blandit. Vestibulum gravida lacus et lobortis faucibus. Quisque velit eros, feugiat ut tempor vehicula, congue id est. Maecenas in odio ex. Maecenas vestibulum, justo eget cursus varius, erat neque laoreet diam, at placerat lacus mauris lacinia diam. Suspendisse sed orci nisi. Aliquam in sollicitudin risus. Fusce quis dictum massa. Duis vitae mattis tellus. Duis nunc leo, volutpat sed nulla ac, vulputate accumsan quam. Ut egestas bibendum massa, ac tempus urna maximus eget. Pellentesque vitae efficitur libero.

[@jolls4676]

There are far more to learn about CSS than this. This is just very basic knowledge.

[@gusdoes897]

Hotel?

[@purplegamerwolves7570]

Gus Does Trivago

[@neo-we7yo]

SWEEDEN

[@gevorg827]

from now on i will use a paper to draw how the website should look with all the id's and stuff dope video man!

[@OmerMD]

It's much helpful that way

[@tryhardnoob1140]

As someone who codes, but is unfamiliar with html/css, this video was amazing.

[@surkey5055]

same

[@fraznofire2508]

A Nur they aren’t the standard languages to learn. There is no ‘standard’ language everyone must know to call themself a coder

[@eflrioninc4638]

Yes, same

[@amelia5375]

hey i feel html is standard language if there was one

[@caodung9137]

Same

[@obliviontb]

well I think this is the best 12 minutes spent on youtube EVER. Good Job!

[@A453]

obliviontb i agree with that it is the best 12 minutes i spent

[@yaj1v]

*college

[@yaj1v]

I disagree.

[@feyd1376]

I don't normally leave comments after videos, but this is really a good tutorial. Quick and simple to learn. Thank you!

[@zxxczczczcz]

Nice

[@inceptsquad9516]

@@zxxczczczcz Noice

[@hypergames4818]

c r i n g e

[@marcspectre7826]

CRINGE 😬

[@jimbateman225]

I've been using html, and css for many years. This was the best 12 minutes I've seen, and it actually, and finally explained..WHY I have been doing all of it for so long without knowing why. Thanks. P.S. I'm 72. Started in 1995 on a Tandy.

[@redrebble12]

Wow! You're old! (I don't mean to be rude, it's just shocking to find someone that old who still codes!)

[@govindsinghrathore4671]

Living legend here guys. I mean in good ways.

[@veenusav]

Super

[@killerskiely100]

Dear Legend, You are a legend

[@eduardojunior4768]

lol, i agree.. it's unbelievable.. all i needed at this moment of despair

[@andrebowen6083]

I'm trying to figure out why 18 people down voted this video. 12 minutes, fast talking, your first word of the video was starting instructions....SUBSCRIBED.

[@brandond2531]

Andre Bowen Because you can't really fast track this stuff. If you don't know why it's called CSS, or can't tell the diff between classes and ID's, then you need to slow down a bit.

[@DarrylMendonez]

Brandon D Just change the speed in the settings so that it goes slower.

[@skexofiner.nsystemz]

It didnt work for them

[@divyababbar8465]

I am one from india ... For us , english - speaking men are very fast as hindi is spoken slower than english... But this person speaks english slowly thus even reaching to more 1,25,00,00,000 people .... Or as you say , 1,250,000,000 more people Thank u Jake wright

[@yuv54]

The way you started from pen and paper to coding !!! Great 12 minutes!

[@morgand3777]

I love how straight forward and to the point this video was. Its like every second of the video was valuable information. It wasn't skipping around looking for relevant information like I'd do with other videos. Thank you.

[@ailsapm]

Wouldn't it be great if all tutorials were this phenomenally on point, clear and perfectly paced? A tour de force, Jake. brilliant stuff.

[@christinec1674]

I'm only 2:45 in and I already have an appreciation for your style of teaching. The way you drew the webpage and marked it out makes it so clear! Subbed and Liked

[@MrLeonOfficial]

This was literally one of the most informative videos I’ve watched and I’ve been trying to learn as I go for about 9 months. Thank you so much!

[@roman.venica]

all tutorials should be like this, well done my friend

[@abellsatime378]

maybe a little slower but yeah this is good

[@BobaT__]

Yes, but explained a little slower. The pacing is too hard to keep up with if you have no experience with CSS

[@derekbrown5123]

Quick, precise, very clear, and very informative. You are a very efficient but great teacher. Excellent, excellent work.

[@OrnateOwl]

" You are a very efficient but great teacher" There is no contrast here, so "but" can be replaced with "and" to join the two clauses. :)

[@ArthurDavenport]

I'm trying to relearn basic web design after 15 years and you have SAVED ME. I am a visual/kinesthetic learner and CSS tutorials are so hard to comprehend. Starting with the basic paper sketch was absolutely fantastic. I kept screaming while watching this because you finally helped so much make sense. Thank you thank you thank you!!!

[@20102010az]

This is one of the best learning I've had in any 12 minutes. Great introduction, thank you.

[@ODITno]

Thank you for going straight to the point, great video!

[@ProjectAmoeba_]

I learned a tremendous amount through this one video. I'm currently taking a web development class at my community college, and although we focus more on client/server applications, I still like to dress the pages up and make them look pretty. I was able to take what you did here and use it as the foundation for my page design. Thank you for your help!

[@justinahurry]

I haven’t done any CSS for years and this helped me refresh my memory. Thanks!

[@assailant8722]

CSS is so incredibly powerful and so simple, but due to lack of instruction I've really been struggling with it. I always knew that if I could just have someone explain it simply and clearly, everything would click into place. This finally did it. Thanks!

[@typewhenasked]

So glad I found your 12 minute videos. They are so easy to follow and your explanations are so clear. Thank you.

[@AntonioMeres]

This happened when someone is mastering a subject. Thank you so much for this information. Cheers from Chile! :D

[@troyhiscock4407]

Jake, I have to commend you on your style of teaching. You give the audience the tools to self-learn in a direct, concise manner. I only wish there was a library of these videos on all subjects. Well done!

[@mattrichards77mr]

Short, Precise and very informative.. definitely 'A Must Watch' for those interested in CSS & HTML

[@sleaye]

Dude, thank you so much for this video. I am trying to learn webdesign, and I just can not get a hold of CSS. I appreciate the time you put into this! So easy to understand and thorough at the same time.

[@shybunadarajan6]

Great, loved the way its explained.you made CSS look so simple. great work

[@ali1t]

Best and most useful video so far in explaining HTML/CSS!!! Well done and Thank you!

[@Zazume_]

This is the most straight forward tutorial I have ever seen in my entire life. I love it.

[@SuperDaxos]

This video is just plain awesome. It helped me out a LOT

[@TaaronGorbahn]

This is so good. I needed to pause the video and tell you how simple and approachable you made CSS.

[@jakewrightnet]

Thank you, I'm really glad that it's helpful :)

[@alexandersnyder9105]

I thought this was the best of them. It came true!

[@bcsurreal]

Phenomenal ! I just started a coding program and this has clarified TONS of information and made it super east to understand!! thank you!!!

[@valoredramack9117]

I took one web design class 6 years ago, this was a really good refresher.

[@Mohammed-hw4kz]

Here's the code if anyone is interested (my version): HTML: pastebin.com/DErr1fk3 CSS: pastebin.com/LgA9qZGp

[@alexhesson9005]

+Mr. White it doesnt quite work

[@kierenspittles9047]

+Mr. White You sir are a good man. Just remember to put the CSS file type at he begginig +Alex Hesson

[@tomwatkins1185]

Hero.

[@sreejithmunthikodu]

Thanks for saving 12 hours of my life!!!

[@u.s7072]

Dude. Thank you. Being self taught, I've managed to become very advanced in C# before learning basic html / css. It's pretty easy to pickup so this is way better for me than a 12 hour course meant for beginners. Absolutely perfect, even 8 years later.

[@aueinstein]

This is the best 12 minutes of my life on KZbin. This is 2021, and the difference between a teacher then and now is clear. Didnt even realise its old until I noticed the archaic windows style. Thanks man

[@shivangitiwari2485]

I just couldn't control myself from commenting,best tutorial video ever ... great job 👏

[@zxc9884761]

Such a great channel, you saved my life!

[@MicroLarj]

Your tutorials really helped me understand basic web programming in such a short time. Thank you!

[@DiscoPh3v3r]

Quick, well made, and easy to follow. The holy grail of tutorials. Thank you.

[@marouaneb4703]

What my teacher learned my in a couple of months, have you done in 12 minutes. Well done!

[@marknasri3490]

it is the best video i have seen, thx

[@Dino-xf3vj]

Probably the best video on the web! To the point and no time wasting.

[@pauls7056]

Jake, your 12 minute videos are excellent. It's great to see how a pro approaches a subject. I love the way you set it up ready for the content. Thanks for posting.

[@breyanaanderson5182]

thank you! Explained it perfectly. ive had recent doubts surrounding my capabilities on web development seeing as im a creative and also an intellectual but i was intimidated by the word coding and the actual code because I did not understand this makes me so excited to start one of my newly found old passions. I cant think you enough for this video

[@erenjaeger4654]

+Breyana Anderson :D i too got interested in web designing bcoz of this awesome video and that awesome guy :D !

[@damiondavis9024]

me too!

[@archismansural5076]

This could not have been better 👍👍

[@timoacker7538]

I love how you give a review at the end of the video, it's very helpful

[@Waqar_Ahmed75]

Shout out to this guy for such an eloquent presentation. Never thought I would learn so much from such a short-limit video.

[@ARoundThing]

You should make tutorials for all programming languages also. You're a great teacher.

[@avent1586]

I totally agree with you. He's great teacher

[@avent1586]

Are you else learn CSS and HTML?

[@alejandroperez5368]

Well, this is no programming language. Why are you assuming he knows anything on that topic?

[@TopBagon]

You can't ask a skydiver to make tutorials on the rock climbing can you?..

[@GlassEyeGaming]

Good lord you type fast my friend. Great video!

[@inesreisx]

hi Jake, just found your channel as someone who's learning to code ~pasito a pasito~ and felt this was a very simple and clear video, thanks so much!

[@tsheposepadile]

One of the best tutorials I've ever watched. Thank you, Jake. 👌

[@savedbygrace2993]

Thankyou!! I'm glad I found your vid. Whoelse is watching in 2019? 🙋🏻‍♂️

[@5richmedia5]

me too

[@emmanuelulu1491]

i am learning

[@death2011ghost]

I have web techono class and I didn't learn anything on CSS for the whole week until I saw this

[@p-pizza]

Me

[@mjfet]

me

[@yuriyprykhodko]

Jake, this is awesome! I know CSS already, so the reason I watched this was that I didn't believe you can actually teach CSS in 12 minutes... But now I know you can -- this video is an excellent introduction! Well done!

[@abstractg9589]

This is probably the best vid I’ve seen explaining this. I’m more of a visual learner so the diagram u drew at the beginning literally put everything into context for me. 4min in n I had finally got the concept. Great vid! Thank you so much

[@mariaabigailellisor9467]

My teacher assigned a 20 min video for "online" class and this helped me understand CSS so much more. TY

[@JoshMsTech]

What your doing is epi,c man!! It really helped me out a lot! Please continue this series.

[@nato5868]

hi from the past!

[@evanparcon]

Thanks for this, am a newbie and I can follow. exactly what I needed . Glad I bump on this video. ;) I am looking for a mentor hopefully I can find someone I can shadow from.

[@GnarledStaff]

I love how you type out the multiple ways of showing something- explain why you are deleting text- and then show the shortcut. This is quality content.

[@johnbroadley7240]

The most productive 12mins I have spend on KZbin in months! ..great work and well presented thanks!

[@krunchyc8250]

12 minutes and 11 seconds! I want my money back! A good foundation to build upon, thank you :)

[@xSirenityx]

Great tutorial series - Jake could you please consider making tutorials in Java, C++, C#, C, Python, etc as well? Thanks from all of us!

[@aziznicholaos5693]

[@aziznicholaos5693]

U tutorials there is code

[@pashtotube1hd713]

[@SenoPaul]

Phython needed

[@animations4all]

This is the most straight forward, concise intro. Very well done. Thank you.

[@ladiran]

Amazing video! I really like the clarity of the explanations and the way you projected everything on the screen; very bold and clear. Thank you.

[@NikhilYadav-mj6wj]

Watching this before my job interview

[@NithishS99]

did u crack

[@NikhilYadav-mj6wj]

@@NithishS99 Nah they rejected me :(

[@musiccon4634]

@@NikhilYadav-mj6wj haha

[@zeyx6534]

@@NikhilYadav-mj6wj rip xD

[@baborsregime9922]

Felt sad

[@AndrejaPopovik]

While the "learn html in 12 minutes" videos were brilliant and thought me everything I needed to know to start with HTML and create a desire to expand my knowledge by discovering new tags on my own and applying them on test websites this video I'm afraid was not good. It started off great with that piece of paper and it everything with the tags and the whole HTML part was clear to me, but then you started of with CSS too fast and introduced far too many CSS elements and although I understood what was happening it was nearly impossible to memorize everything. So I think you should do another CSS video which firstly starts with the explanation of hash and dot and then slowly go through all of the elements such as float, padding etc. simmilar to how you did your HTML videos. Hope you will take my suggestion seriously and do another video because you explained html in the most simplest way and I am sure you can do it with CSS too.

[@byduhlusional]

hey. if you need a more in depth tut for html/css or even actual programming languages like Python, etc. go to codecademy.com I learned there as well on how to code css.

[@AndrejaPopovik]

Yes, a friend of mine also mentioned the same. Thx for the advice. Will look into it.

[@Eitrii]

+Shoop Lor freecodecamp is really good too

[@AndrejaPopovik]

Hazrijordan Thank you :)

[@0x28]

+Moduhlize CodeAcademy is far insufficient for any proficient level. At my university it was discouraged to use such websites because they don't cover crucial fundamentals.

[@floridasalters5021]

FANTASTIC!!! The paper drawing/outline made all the difference to my understanding of css. TY for this!

[@MultiMarkusJ]

I can say that what you were able to break down in 12 mins was explained precisely as I needed to understand it Your pace, and style of delivery is on point. I was able to grasp everything without the need to fell like I had to write anything down. Jake, thanks. I get it!

[@mohamedtaherhassanin]

Super CSS Class

[@ahmetyasar9256]

Epic!

[@maito2201]

I am an absolute beginner and I start coding boot camp tomorrow and now I feel a little less nervous because of this video. And I feel like I have a good grasp on some of the basics thank you.

[@jasonkelly3662]

This is the best intro to CSS I have seen so far. Thank you.

[@ashleighcarolan6348]

Hi, I'm doing this on mac and having a bit of difficulty, I think the codes are different for textedit so I was wondering if you could tell me the differences between coding in text edit and coding in notepad.

[@neilmcbride01]

There is no difference in the code itself. the only thing some text editors will do is automatically place elements for you.

[@MissAllieK]

I code on a Mac and have 2 things to comment: 1. Try the program Brackets. It's free and amazing for coding HTML and CSS. 2. Did you save your code as .html & your stylesheet as .css? TextEdit automatically saves as .txt by default.

[@dansmith4012]

Noah Allen Textwrangler is another good option. I use Textwrangler for all text whether coding or plain text on the Mac

[@kp5644]

me too! this is my 10th video trying to find out why my html window isnt reading my css link. I checked to see if the its saved in proper format. Somebody help!

[@teefkiller]

learn CSS in 6 minutes with 2X speed.

[@NithishS99]

why click when you can watch the entire video while hovering the mouse above the thumbnail -JK

[@naufalpvk5055]

@@NithishS99 savage😲😲😎😎

[@benjaminolivo3423]

@@NithishS99 whoa man, slow down 😂

[@srivenkateswaraswamy3403]

@@NithishS99 😂

[@muhammedbasheerkk8871]

😁😁😁

[@RCRice]

I'm so happy I could cry right now, thank you! New to this and my attempt to research and learn became quickly discouraging...but not anymore! Thanks again.

[@shurjendu]

Brilliant. Your phlegmatic delivery and your concision is mad appreciated.

[@crownology2464]

Me: * Blinks * Him: And thats how you code an AI that knows everything without any data

[@HamFriedR1ce]

i mean he gave a good explanation but he just went over everything on a normal pace i just watched a 30 min html video so i was kinda lost but i understood so i guess he could go a little bit slower

[@michaellim1818]

How did you do that. The automatic closing of opening like ?

[@SpaceWeedMC]

It is the program that does that. If you download Brackets (Free editor software for programming), it will also do it automatic :)

[@michaellim1818]

Thank you! I will download it asap :)

[@SpaceWeedMC]

No problem! It's very good, i use it everytime i code :)

[@michaellim1818]

Any website recommendations? Where I can learn more of coding for free because I can't afford school now. I'm learning html css and javascript now.

[@petea3562]

Go to Udemy.com and look for deals. There are a lot of them. Look for the courses with the most students. Hope this helps!!!

[@ayushkarma93]

2hours of other videos couldn't teach me what you taught in 12 minutes. So glad i found this. Thank you!

[@FunnyVideos-ni4iu]

You Sir have the midas touch in teaching. My years of css confusion was cleared in 12 mins with your video! i wish all teachers taught like this. Thank you very much!

[@p0larfr0st20]

I have some trouble. The selected link doesn't go bold and the bullet points stay. Am I doing something wrong?

[@p0larfr0st20]

The text doesn't change either.

[@veetoutas]

Me too

[@Narigopia]

Seems to be that the word "selected" is somehow a reserved word and cannot be used to name a class. I change the name to something else and now works.

[@seobusiness7161]

yea me too

[@seobusiness7161]

Narigopia didnt work

[@usergroupX]

@1:35"Subtract 10 ?" do I really have to know MATH to be a developer?

[@jakewrightnet]

Surely you're joking? :L

[@Walht]

Who knows

[@michaelhofby]

Jack Low *nose

[@Walht]

*knees

[@usergroupX]

yes.. kidding .. (although I did hear that question) PS: thank you so much for your great video man!

[@AmitChristian]

Best 12 minutes, I spent in recent time. Thank you.

[@nazifarahmanadhora635]

absolutely love the way he teaches a package of vital elements in just a few minutes!!!!

[@simpleprogrammer5834]

Still helpful in 2019 😉👍

[@alejandroperez5368]

Yeah, but in 2029 everything has changed. I'm sorry

[@simpleprogrammer5834]

@@alejandroperez5368 for sure that Programming is in an Instantaneous developing speed every Year but with a Strong basic Ground AND keeping awareness of Upcoming Updates "that's what successful developers do"!

[@alejandroperez5368]

@@simpleprogrammer5834 HTML is not a programming language. The hell you talking about

[@simpleprogrammer5834]

@@alejandroperez5368 for sure you don't know what this video is about 😅

[@alejandroperez5368]

@@simpleprogrammer5834 I think you still don't know what HTML and CSS are. I'm sorry!! You need to look somewhere else

[@countprogon]

Starting my freelancing career in a few, wish me luck!

[@SPAWN_DNB]

Good luck! I am hopefully looking to do the same, message me your email address and we can share some tips along the way? :D

[@countprogon]

@@SPAWN_DNB Nice idea bro, inbox me and we will message through our journeys!

[@SPAWN_DNB]

@@countprogon I don't know how to inbox you on here haha! Inbox me and I will reply!

[@countprogon]

@@SPAWN_DNB me neither bruh😂

[@davidadrianwood2992]

From a COMPLETE rookie/beginner - thank you! Really useful, and more 'real-world' than most of the tutorials I've seen.

[@notoriouswreck3237]

straightforward and to the point. too many tutorials stretch out for no real good reason

[@konnekko1178]

i thought it was a counter strike source (css) video lmao

[@RC568]

@@sallo2718 Dang it, me too

[@caseymccray3861]

lol

[@RiaLuna1]

@@sallo2718 hahahahahaha u made my day

[@cludgsgaming]

css stands for cascading stylesheet

[@cludgsgaming]

pneumonoultramicroscopicsilicovolcanoconiosis sounds good...

[@Asmr-um9dl]

I did exactly everything you did. But my header didn't change colors. what did I do wrong?

[@cammy944]

same for me

[@OfficialPlistra]

did you change the styles file from styles.txt to styles.css? did you reference the styles.css file from the html file? did you id the divs properly? pls, tell

[@Asmr-um9dl]

i just did it a different way. i got it to work.

[@thenewera2486]

I really appreciate your video series, including html i am new to all this but have dabbled around with it, but never really looked into it until i saw this and wow i cant believe how simple you made this tutorial. I paused it a couple times to catch up, as i was doing the html site with you and css on another page. Cant thank you enough.

[@YourMomsSideDude]

This is the best 12 minutes I have EVER spent on KZbin.

[@lecousinmachin]

Great class, but what is the goal of going so fast that a newbie is hardly able to follow?

[@jakewrightnet]

Because most people are impatient and want the results immediately so I try to make the videos short in an attempt to actually teach some good practice to people who don't want to invest lots of time in learning languages thoroughly.

[@lecousinmachin]

Jake Wright I understand, but I made a mistake somewhere and it's kind of hard to spot it afterward at this pace. I need to redo the whole thing and nobody's saving time doing that. But thanks anyway, these tutorials of yours are great! I'm a print graphic designer who is trying to learn html/css/javascript to follow the rest of the world in the internet adventure.

[@Cephlin]

lecousinmachin you can slow the video down ;)

[@3halfshadows]

It's good for people who aren't newbies

[@Toya9125]

Hans Langer exactly! I felt a little rusty and needed a quick refresher and as he sped along I followed because I understand and just needed some reminders. I guess that's where it's extremely useful

[@abhiramim1782]

Anyone in 2022??

[@MOHIB51015]

Nah 2024

[@Ultramudkip2]

2025

[@Pcbrsx]

One of the few ones that focus on explains from "what you want to get" and then "how write the code you need to get it", and not only "what happens, when you write especific codes", amazin work and love how you start from hand made -> coding -> final digital result

[@faseehshaikh]

Thank you so much, besides building the concept of css and html basic doucment structure, that drawing that you made is simply classic. That drawing made me understand why i need css and what html will look like without it! Thank you so much!!