How to CSS Style HTML Video Series

A Complete CSS Video Series for Free

Note: Click the High Definition Button and Full Screen Button, to see these videos at the highest quality level.

I hope everyone enjoyed the series of articles I wrote recently on CSS. You definitely could add CSS Expert to your resume if you read the whole thing. But, where are the videos? I’ve assembled 6 videos below that go through every subject covered in the articles. I hope you enjoy them. (Hint: Comment Below)

If you haven’t read my Complete HTML W3C Tutorial, you should do that first.

How to CSS Style HTML, Video 1

YouTube Preview Image

In this video:

1. I introduce Cascading Style Sheets

2. I show you how to add CSS to your HTML code

3. I go over how changing one tag, effects the other tags.

4. Then I go over CSS classes.

5. How to edit CSS class properties

A whole lot more…







How to CSS Style HTML, Video 2

YouTube Preview Image

In this video, I describe in detail every single property you can use to style text including: font, font-family, font-size, font-weight, font-style, font-varient, line-height, letter-spacing, word-spacing, text-align, text-decoration, text-indent-text-transform, vertical-align, color, and background-color.

And a whole lot more…









How to CSS Style HTML, Video 3

YouTube Preview Image

In this video, I show you how to edit the properties of your background, tables, lists and even cursors. At the end of this video, you will know every property available in Cascading Style Sheets. Some of the properties taught include: background, background-image, background-repeat, background-position, background-attachment, border-collapse, border-spacing, caption-side, and cursor.
And a whole lot more…



How to CSS Style HTML, Video 4

YouTube Preview Image

In this video, I’ll show you the box element. Everything is considered a box in CSS, so they are a good thing to learn about. I’ll explain the differnce between padding and margins. I’ll show you every single property available for box elements and how to edit them.

Also, I’ll provide you with the complete HTML and CSS code behind three differently styled box elements.

Box element analysis is the perfect way to start understanding div elements.

How to CSS Style HTML, Video 5

YouTube Preview Image

In this video, you’ll be introduced to div elements. I’ll give you the code behind many styled divs. Show you how to create 2 and 3 column CSS layouts. And how to create and layout your whole page.

If you understand the information found in this video you will be well on your way to designing your own WordPress Themes. With good use of organization, you will find that you can create extremely complicated looking web templates.

Get excited because you are one video away from being a Cascading Style Sheet Guru!

How to CSS Style HTML, Video 6

YouTube Preview Image

In this video, I describe the difference between liquid and fixed CSS layouts. I then explain how to use relative, fixed and absolute positioned CSS layouts. You will be a CSS Expert after this video.

If you have any questions leave them below in the comments section.

Till next time…

17 Responses to “How to CSS Style HTML Video Series”

  1. Do you plan to keep this site updated? I sure hope so… its great!

  2. admin says:

    When I want to solve a problem, I read the top 10 to 15 books on the subject and then create a solution. Is there a subject you would like to see covered?
    – Think Tank

  3. samantha says:

    wow! thanks for these video tutorials! its really a big help to have a guide in learning the css codes.. they are pretty much confusing!

    • admin says:

      No problem. I’m going to cover the whole gamet of web technologies. HTML, CSS and Javascript are done. AJAX, PHP, mySQL and Flash Animation are coming up. Hope you enjoy – New Think Tank

  4. Shane says:

    I love your videos, and although I am getting really good with HTML and CSS, and have messed with PHP (someone’s theme), but where should I go after I get done with HTML and CSS, should I jump right into PHP, or maybe javascript or XML stuff?

    Thanks,
    Shane

  5. san says:

    what is em? what does it stand for? Like px stands for pixel, what about em itself?

    • admin says:

      An em equals the current document font size. So if the font size is 12 pts, 1 em equals 12 pts. A point is equal to 1/72nd of an inch. Web designers are starting to use em over px as of late because they size better depending on the screen size. Remember in the past pretty much everyone had the same size monitor.

      Many developers are now starting to chose % over em though. The reason why is because % resizes with better results than em.

      Thanks for bringing this up. I might do an article on this topic to elaborate further.

  6. san says:

    that was freaking awesome
    what the different between box and div, they seem to have the same function and able to do the same thing

    • admin says:

      Thank you 🙂 There isn’t a tag called box, but instead when we say an element is a box element we mean that it has margins, borders, and padding. A div has these and so it is considered a box element. Does that clear everything up?

  7. kru says:

    Thank you, I appreciate what you’ve done. I’ve learned a great deal with your videos. It definitely made the learning curve manageable.

    Thanks again.

  8. Akshay says:

    Hi
    How to create different style definitions for different media without creating multiple copies of document ?

  9. Kevin Levin says:

    You are as awesome as anything can be !!

Leave a Reply

Your email address will not be published.

Google+