Grow your CSS skills. Land your dream job.

#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. I needed this a year ago!!!

  2. 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.

    • Matt
      Permalink to comment#

      This screencast* makes a better introductory.

      Sorry for the dp.

    • 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. Unimax
    Permalink to comment#

    A very good Tutorial

    Unimax SYSTEMS
    unimax.systems@gmail.com

  4. Brand new WP theme for your blog?

  5. Permalink to comment#

    Thanks sooooo much that is what i want

  6. 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. Chris, what’s your main text editor these days? TextMate or Coda?

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

    • 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

    • 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. 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. 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. 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. Permalink to comment#

    Meeeeeeeeeeemmmmorrriiieeesss………

  12. 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. 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

    • 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 :)

    • Gavin
      Permalink to comment#

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

  14. 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. joanvinallcox
    Permalink to comment#

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

  16. 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. 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. 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 ?.

    • Try notepad++ , i use it a lot…

    • 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(http://cdn.css-tricks.com/images/(it also places the cursor right here for you));

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

  19. Josh
    Permalink to comment#

    thank you God

  20. Edwin
    Permalink to comment#

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

    • 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. 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. 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. 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. You did a great job explaining for us non technical type’s. Thanks.

  25. 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. 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. 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. 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. 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. tina
    Permalink to comment#

    Chris,
    wow, thanks!!!

  31. 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. nate
    Permalink to comment#

    You should do a css course for lynda.com –

  33. 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. 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. sij
    Permalink to comment#

    very helpfull!! thanks!!

  36. 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. 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. 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. Happygirl01

    Thanks! very easy to follow.

  40. raul
    Permalink to comment#

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

    have a good one, cheers!

  41. George
    Permalink to comment#

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

  42. Thanks for this great tutorial !

  43. Eben
    Permalink to comment#

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

  44. 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. 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. 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. 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. Dinesh
    Permalink to comment#

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

  49. 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. 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. Giuliana Lopez Borde
    Permalink to comment#

    Thank you!!!!! *)

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

  53. Permalink to comment#

    really cool the way you put this.

  54. 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. 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. My first video intro on this, veeery helpfull, a huge TNX and peace from Greece

  57. 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. Melissa
    Permalink to comment#

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

  59. 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. 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. 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. 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. 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. 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. 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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".