O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

HTML & CSS Video How-To

Video Description

Skip the reading and learn by watching!

Short, clear videos show you visually how to perform individual tasks in HTML and CSS

HTML & CSS Video How-To is a series of short, 2- to 5-minute how-to videos that walk you through a specific task or technique related to creating web pages with HTML and CSS.

Adapted from Julie C. Meloni's book Sams Teach Yourself HTML and CSS in 24 Hours, each video is self-contained and focused entirely on one particular task. You can either go through the videos in sequence or you can jump into a particular task, see how something is done, and then jump out again.

About the Instructor

Julie C. Meloni is a software development manager and technical consultant living in Washington, D.C. She has written several books and articles on web-based programming languages and database topics, including the bestselling Sams Teach Yourself PHP, MySQL and Apache All in One.

Skill Level

  • Beginner
  • Intermediate

Just a couple minutes is all you need to learn how to...

  • Create and View a Basic Web Page
  • Create a Style Sheet of Your Own
  • Add Classes to Your Style Sheet
  • Outline an HTML5 Document
  • Use New HTML5 Semantic Elements
  • Add Attributes to HTML
  • Construct Three Types of Lists
  • Add Special Characters
  • Create a Basic Résumé
  • Use CSS to Set Background, Text, and Border Colors
  • Create Rounded Corners on Paragraphs
  • Link to an Email Address
  • Style Link Pseudoclasses
  • Build a Basic Table
  • Change the Features of a Table
  • Create a Tiled Background
  • Place Images on a Web Page
  • Experiment with Image Alignment
  • Create Your Own Imagemap
  • Add Sound with the AUDIO Element
  • Add a Video with the HTML5 VIDEO Element
  • Specify Margins to Affect Page Elements
  • Use CSS to Align Elements on a Page
  • See the Difference Between Margins, Padding, Borders, and Content
  • Show the Difference Between a Fixed and Liquid Layout
  • Build a Fixed/Liquid Hybrid Layout
  • Style a List to See the Box Model
  • Change How the List Indicators Look
  • Create Vertical Navigation with CSS
  • Create Horizontal Navigation with CSS
  • Display Additional Rollover Text
  • Change the Appearance of a Page After a Click
  • Rotate a 2D Element
  • Make a 2D Box Shrink with CSS Transitions
  • Make Links Print Friendly
  • Test Print Styles Without Wasting Paper
  • Create a Random Quotes Area
  • Build an Image Rollover
  • Create a Basic Web Form
  • Use the New HTML5 Input Controls
  • Comment Your Code
  • Indent Code for Clarity
  • List Your Pages with the Major Search Sites

Who Should Use These Videos

  • Anyone who wants to learn how to use HTML and CSS to create, edit and maintain web pages
  • Casual web designers and developers at all levels

Table of Contents

  1. Learn how to...
    1. Use FileZilla QuickConnect FTP 00:02:17
    2. Use an Index Page 00:03:08
    3. Create and View a Basic Web Page 00:02:26
    4. Format Text in HTML 00:02:52
    5. Create a Style Sheet of Your Own 00:03:10
    6. Add Classes to Your Style Sheet 00:06:21
    7. Outline an HTML5 Document 00:04:18
    8. Use New HTML5 Semantic Elements 00:04:02
    9. Add Attributes to HTML 00:04:06
    10. Construct Three Types of Lists 00:03:49
    11. Create a Basic Résumé 00:06:09
    12. Add Special Characters 00:02:25
    13. Use CSS to Set Background, Text, and Border Colors 00:04:11
    14. Create Rounded Corners on Paragraphs 00:03:02
    15. Link to an Email Address 00:03:02
    16. Style Link Pseudoclasses 00:03:28
    17. Build a Basic Table 00:03:01
    18. Change the Features of a Table 00:03:16
    19. Crop in GIMP 00:01:07
    20. Create a Tiled Background 00:03:08
    21. Place Images on a Web Page 00:02:22
    22. Experiment with Image Alignment 00:01:45
    23. Create Your Own Imagemap 00:03:26
    24. Add Sound with the AUDIO Element 00:02:34
    25. Add a Video with the HTML5 VIDEO Element 00:02:19
    26. Specify Margins to Affect Page Elements 00:02:44
    27. Use CSS to Align Elements on a Page 00:02:48
    28. See the Difference Between Margins, Padding, Borders, and Content 00:02:55
    29. See the Different Overflow Values 00:02:09
    30. Show the Difference Between a Fixed and Liquid Layout 00:03:11
    31. Build a Fixed/Liquid Hybrid Layout 00:05:07
    32. Style a List to See the Box Model 00:04:30
    33. Change How the List Indicators Look 00:03:43
    34. Create Vertical Navigation with CSS 00:04:22
    35. Create Horizontal Navigation with CSS 00:01:52
    36. Display Additional Rollover Text 00:03:05
    37. Change the Appearance of a Page After a Click 00:04:14
    38. Rotate a 2D Element 00:01:42
    39. Make a 2D Box Shrink with CSS Transitions 00:02:01
    40. Make Links Print Friendly 00:02:26
    41. Test Print Styles Without Wasting Paper 00:02:40
    42. Create a Random Quotes Area 00:02:45
    43. Build an Image Rollover 00:02:45
    44. Create a Basic Web Form 00:02:19
    45. Use the New HTML5 Input Controls 00:03:50
    46. Comment Your Code 00:03:35
    47. Indent Code for Clarity 00:02:19
    48. List Your Pages with the Major Search Sites 00:01:51