#58: HTML & CSS – The VERY Basics

This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don't need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.

Where should you go after this? Check out this series from Google.

Comments

  1. User Avatar
    nanochrome
    Permalink to comment#

    I needed this a year ago!!!

  2. User Avatar
    Matt
    Permalink to comment#

    You’ve explained it better than my Lynda course did.

    Also, XHTML and CSS haven’t been updated for a loooooong time at Lynda. This makes a much better introductory.

    • User Avatar
      Matt
      Permalink to comment#

      This screencast* makes a better introductory.

      Sorry for the dp.

    • User Avatar
      Eduardo
      Permalink to comment#

      XHTML in Lynda.com just sucks! Chris, I think you could show some resources on how to learn (X)HTML/CSS , like blogs,online trainings and books.

  3. User Avatar
    Unimax
    Permalink to comment#

    A very good Tutorial

    Unimax SYSTEMS
    unimax.systems@gmail.com

  4. User Avatar
    Bogdan Pop
    Permalink to comment#

    Brand new WP theme for your blog?

  5. User Avatar
    cssah
    Permalink to comment#

    Thanks sooooo much that is what i want

  6. User Avatar
    Elizabeth
    Permalink to comment#

    Thanks. I’ve been struggling for 2 years to understand just what a div was vs a span. All the explanations I was given didn’t really do the trick. Watching this video was worth the time even for this small nougat of info. The rest was icing on the cake!

  7. User Avatar
    Mason Sklut
    Permalink to comment#

    Chris, what’s your main text editor these days? TextMate or Coda?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I think TextMate is far superior text editor, but I end up just using Coda because it’s so convenient.

    • User Avatar
      Noah Hendrix
      Permalink to comment#

      I totally agree I think Textmate is much better in terms of features, but FTP and codesense in Coda make it much nicer. Another thing Coda needs better support is snippets the default ones are no where near as useful as Textmates

    • User Avatar
      Andrew Vit
      Permalink to comment#

      I assume you know there are much more efficient ways to write HTML in TextMate than what you’re showing here… The fact that you’re manually writing your opening and closing tags is just for the beginners, right? There are some screencasts on the TextMate site that demonstrate how to efficiently write HTML (as well as other languages, shortcuts, and tricks): http://macromates.com/screencasts

  8. User Avatar
    Noah Hendrix
    Permalink to comment#

    I like the new layout, only weird art is all the white space at the bottom of the right banner area. It feels like the page is missing something.

    http://www.scrnshots.com/users/noahhendrix/screenshots/141921

  9. User Avatar
    Megh Suthar
    Permalink to comment#

    I really nedded this 6 month ago but now i need something else and it may come after 6 month.

    this thing took me about 2 month and look at here it’s 34 min only

  10. User Avatar
    Megh Suthar
    Permalink to comment#

    I was watching video and and i posted comment and page refreshed and now i have to wait for video- You should put Ajax on this comment system.

  11. User Avatar
    Lars
    Permalink to comment#

    Meeeeeeeeeeemmmmorrriiieeesss………

  12. User Avatar
    Combus
    Permalink to comment#

    No offence, but I actually liked the last theme much than this one. Probably this is still in development?

    Anyways, thanks for the screencast! It will be usefull to introduce my students into CSS (I’m teaching at my school… but I’m not a teacher, just another student :P )

  13. User Avatar
    MIguel A. González Mejido
    Permalink to comment#

    Hi Crish,

    I agree with the people, you have a kind of gift to explain the things in a simple way. I learn from you the last year a big amount of things thank you!!.

    I have a doubt, in the video you have a Dock scenario to work in design.
    Two questions:
    1) Is possible to set up a different “Dock” scenario for each desktop?, with spaces you can control a desktop but not the dock, with “you control desktop” you can do the same but not control the dock.
    2) Can you list the aplications in the dock fron left to right.

    Thank you!

    Miguel

    • User Avatar
      Gavin Steele
      Permalink to comment#

      Yeah I would love to know how you have separated the items on your doc into what look like groups?
      could you please let us know, cheers :)

    • User Avatar
      Gavin
      Permalink to comment#

      Does anyone else know what software you use to group items on the doc?

  14. User Avatar
    Rodrigo
    Permalink to comment#

    Gosh Chris! This one was pretty amazing for beginners; I suppose I’m sort of one but have been following the past screencast and twitter posts! lol

    I was thinking you should do a beginner feature every couple of screencasts so that beginners get a grasp of things and get on doing your other wonderful stuff. Its amazing how you explain things; I love it! Perhaps you should do one showing us around Coda and how it works.

    Thank you,

    Rodrigo.

  15. User Avatar
    joanvinallcox
    Permalink to comment#

    You have a gift for explaining basic concepts. Thanks so much!

  16. User Avatar
    Alper
    Permalink to comment#

    This is really helpfull chris , thank you so much , I hope you ‘ll find the time to record an entire serie of css for beginners , this could help a lot of people including myself….
    I’m stuck with lynda.com stuff , but it’s not that intuitive , hope to see more of this css stuff…
    thanks.

  17. User Avatar
    keith
    Permalink to comment#

    thanks, yea many posts are over my head. good tut. yea my page is done all html & would like to make improvements & have a better understanding of css

  18. User Avatar
    cssah
    Permalink to comment#

    thank Chris Coyier you use mac and use TextMate or Coda
    but i am use windows
    i used intype ,dreamweaver whwt is the best for windows machine ?.

    • User Avatar
      Grafiko
      Permalink to comment#

      Try notepad++ , i use it a lot…

    • User Avatar
      Sathish
      Permalink to comment#

      Try Notepad ++ its free and awesome.

      There is a quicktext extension for Notepad++. You just have to sit for 2 hours to manually write your frequently used codes into the quicktext extension’s configuration file. It will save a heck a lot of time in your future.

      I just type

      fl and ctrl+enter to type float:left;
      bgimg and ctrl+enter to type background-image: url(/images/(it also places the cursor right here for you));

      also
      html1strict and ctrl+enter to type the whole doctype thing :whistling:

  19. User Avatar
    Josh
    Permalink to comment#

    thank you God

  20. User Avatar
    Edwin
    Permalink to comment#

    I have a question, if you want to build web pages, What the best way to learn?

    • User Avatar
      Brussells
      Permalink to comment#

      I’d recommend looking at Chris’ trilogy of screencasts 25, 26 and 27. I’ve just started on 25 and it goes into the details you are looking for (page design etc).

  21. User Avatar
    Nout
    Permalink to comment#

    Thanks for this a great screencast!
    You explain verything very nice and basic!
    I think I’m gonna use this for the people I help with learning html & css!
    Nout

  22. User Avatar
    brettweaver
    Permalink to comment#

    I’m going to keep a link to this video handy and give it to everyone who asks me a basick question about html or css. Thanks Chris, good stuff. You do have a talent for explaining things.

  23. User Avatar
    luan Jenkins
    Permalink to comment#

    Hey Chris can you do something like this for JavaScript? Or do you know any place I can find videos similar to this?

  24. User Avatar
    Jim Peake
    Permalink to comment#

    You did a great job explaining for us non technical type’s. Thanks.

  25. User Avatar
    Tess
    Permalink to comment#

    what can I do if my pages aren’t using my css after uploading to the server vs. designing them locally?

  26. User Avatar
    Sathish
    Permalink to comment#

    Just watched this video. This is exactly what a beginner wants. May be there could be continuation of this, like how folder structures work, how to make a header, a basic nav bar and content part. This will really help beginners soon excel to intermediate. Theres no image tag shown, which beginners must be desperate to know.

    And don’t teach them about cross browser compatibility That will make me jobless :D

  27. User Avatar
    jason
    Permalink to comment#

    I think the center didn’t work because you didn’t save the css file after you styled the div.

  28. User Avatar
    Brussells
    Permalink to comment#

    Thanks Chris! Been delving into WP recently and this is the perfect place I need to start, and anyone else starting out should also. Am now going through the trilogy vids you have issued on installation of WP and editing ‘Starkers’.

    As mentioned previously you have a very clear, concise, easy to follow flow to the tuts, and it beats reading books hands down for learning the fundamental aspects of WP & css. Hopefully we’ll make a web designer of me yet :-)

  29. User Avatar
    jbope
    Permalink to comment#

    Chris,

    I agree with many above. Wish I would have seen this a year ago.

    Now I really hope you will continue this video to the next and the next level up to where your first photoshop to css video picks up.

    I watched those first and along with some other sites I figured it out, but I think you would do it better than the other sites.

  30. User Avatar
    tina
    Permalink to comment#

    Chris,
    wow, thanks!!!

  31. User Avatar
    Josh
    Permalink to comment#

    Solid. Thanks for all you do for the community, Chris.
    Also, way to rock the hint of Wisconsin in your accent!

  32. User Avatar
    nate
    Permalink to comment#

    You should do a css course for lynda.com –

  33. User Avatar
    MirzaLou
    Permalink to comment#

    Hi Chris and thank you for your time invested in these tutorials. Awesome work. I’ve recently installed Thesis as my WP theme and I’m having a little trouble understanding even though they say you don’t need to know coding. Plus, it didn’t help that I’m new to WordPress, too.

    I still think I need to know some basics about coding or CSS etc. to help me when using Thesis.

    So, being new to ALL of this I feel overwhelmed and confused. I want to learn more and needed to start from the beginning. I just didn’t know where the beginning was. Thanks to this screencast, now I do.

    The main reason for my comment was that Sathish suggested you doing a continuation regarding: folder structures, how to make a header, a basic navigation bar and a few other things to get beginners off on the right foot, so to speak.

    Well…could you? I mean, I know you could but would you?

    I’m also looking at your screencast #25, 26 & 27 for WordPress which I think will also be very helpful. I saw #25 already and now I’m off to watch #26 & 27.

    Thanks!
    MirzaLou

  34. User Avatar
    Alex Martin
    Permalink to comment#

    Thank you! I’m Alex and I like to do html and css. My mother helps me to do it. I’m 7 years old.

  35. User Avatar
    sij
    Permalink to comment#

    very helpfull!! thanks!!

  36. User Avatar
    stlouisphile
    Permalink to comment#

    I love your presentation. I would also talk about (briefly)doc types and how it affects the placement of your content and how a web page needs the declaration of ….

  37. User Avatar
    Carl - Web Courses Bangkok
    Permalink to comment#

    Oh this is great and something we will ask our students to checkout before we start our Web Site Design Course.

    Thanks for this!

    C

  38. User Avatar
    Frank F.

    Dear Chris,

    I’ve been trying to understand this stuff for 2 months, and coming up still in the dark. It is obvious you are well versed in this subject matter. You’ve made the light bulbs finally come on. And, the style of the presentation is perfect. It is actually better to see what you do when something doesn’t work right. Many thanks for this, and your work on JQuery too.

    CHEERS!!!

  39. User Avatar
    Happygirl01

    Thanks! very easy to follow.

  40. User Avatar
    raul
    Permalink to comment#

    hey!, really good job with this tutorial, I wanna know all you know, hahaha..

    have a good one, cheers!

  41. User Avatar
    George
    Permalink to comment#

    Thank you. By far the best beginner video on this subject I have come across.

  42. User Avatar
    Erbil
    Permalink to comment#

    Thanks for this great tutorial !

  43. User Avatar
    Eben
    Permalink to comment#

    The video has to reload every time I change tabs :(

  44. User Avatar
    Wartone
    Permalink to comment#

    Greetings Chris,

    I as many persons am grateful for your wisdom, i have been trying to get this css think for a while & i even have a lynda subscription & creativeedge none has presented this information in such a brilliant way as you have.

    Thank YOU!

  45. User Avatar
    Paul
    Permalink to comment#

    Thanks so much Chris,
    This was my first screen cast vid on basic HTML CSS stuff, and I learnt from it.
    Funny how one can be a programmer in many other fields for many many years and still can learn more about programming.

    This video you put together is just what I needed to give me a little helping direction in creating and modifying web pages.

  46. User Avatar
    Jane
    Permalink to comment#

    This is wonderful! I have a little boy and am trying to learn html and css to give him some basics since they don’t learn this at school.
    I like that you didn’t go too fast for me, a complete beginner, but didn’t take your “students” for idiots either!
    Perfect speed.

    Thank you!!

  47. User Avatar
    monika babutta
    Permalink to comment#

    hey its awesome….m sorry that m nt able to find words to explain the quality that u gave in this awesome stuff…………………..

  48. User Avatar
    Dinesh
    Permalink to comment#

    im getting life with this.. :P thanx a lot chris..

  49. User Avatar
    Luke
    Permalink to comment#

    I got the inevitable question the other day from my dad, whose website I maintain. “What’s with all of those hieroglyphics in those files? That doesn’t look *anything* like what shows up.”

    After several attempts to explain what was going on, I had him watch your video. He understands much better now. We both really appreciate the time you took to do this.

  50. User Avatar
    Toor
    Permalink to comment#

    In fact you did a nice job to explain the CSS, the way you explain it is really a beautiful.
    Thanks again.

    (Shafiq TOOR)

  51. User Avatar
    Giuliana Lopez Borde
    Permalink to comment#

    Thank you!!!!! *)

  52. User Avatar
    steph
    Permalink to comment#

    This WAS my very first tutorial on CSS and it was great, you made it super easy to understand, thanks so much!

  53. User Avatar
    Craig
    Permalink to comment#

    really cool the way you put this.

  54. User Avatar
    manuel
    Permalink to comment#

    Thanks a lot for this screencast. I can only repeat what others already said, you really explain things in an easy and fun to watch way :) thanks for the time you took to make this video! It helped a lot in getting me started in HTML and CSS today!

  55. User Avatar
    Davit

    Hello,
    and thanks a lot for this video. I am freshly starting with HTML/CSS so I can’t wait to see the other videos. As a first introduction that was nice.

    Greetings from Sofia, Bulgaria!!!

  56. User Avatar
    elasticeye
    Permalink to comment#

    My first video intro on this, veeery helpfull, a huge TNX and peace from Greece

  57. User Avatar
    Mark Mallarde

    Very nice job. I searched all over the internet for this information. Most people that understand this either cannot explain it or do not really want to.

  58. User Avatar
    Melissa
    Permalink to comment#

    Hi Thankyou so much for explaining the basics. Very helpful tutorial!

  59. User Avatar
    pete
    Permalink to comment#

    hey chris,

    i was wondering if there’s a text format for this tutorial? reading is a martial past time and i know i can do it almost anywhere. where as i require the internet to watch video’s etc…

  60. User Avatar
    John

    Chris, Thank you very much for this, as someone who is just trying to get a start in WebDesign you have a way of making tough topics look less daunting, can’t wait to go through the rest of the content, Cheers, John

  61. User Avatar
    nath
    Permalink to comment#

    you might wanna check out http://webdeconstructor.com/
    it’s an web-app that let’s you analyse what websites are made from by deconstructing their HTML structure in a

    matter of seconds

  62. User Avatar
    Diwakar
    Permalink to comment#

    i was wondering if there’s a text format for this tutorial? reading is a martial past time and i know i can do it almost anywhere. where as i require the internet to watch video’s etc…

  63. User Avatar
    Amy
    Permalink to comment#

    I LOVE this video. You are clear, concise and I REALLY like that you didn’t edit out when you hit a bump but simply paused, ferreted out the issue and explained afterwards what was happening and why. That’s far better than any book out there could do!

    Your repetition and paging back and forth a few times when you were trying to compare pages was exactly what my hands were thinking of doing just before you did it! Extremely effective teaching skills. THANK YOU!!

    I’m hoping to find more beginner tutorials from you on here. Maybe you could let people know on this thread if you have a second? And if they don’t yet exist, can I add my request that you consider them? You’re a fantastic teacher and that’s incredibly hard to find!

  64. User Avatar
    kamalesh
    Permalink to comment#

    This is foundation for any beginner in website designing and development. You laid the strong foundation of CSS and Html in me. Thanks for the video.

  65. User Avatar
    Sophie
    Permalink to comment#

    Hi Chris

    Thanks so much – that was the very first video I have watched about web design and I learnt so much! The only thing missing for me is where should i go next?

    Sophie

  66. User Avatar
    Derek Sparenga
    Permalink to comment#

    Great video for a first timer! Thanks!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag