Karen's Vista
Learning HTML and CSS
Lessons and excerpts for this web page are taken from "Sam's Teach Yourself HTML and CSS in 24 Hours"
Chapter 1 - Understanding How the Web Works
- Listing 1.1 - Sample File
Chapter 2 - Structuring an HTML Document
- Listing 2.1 - The First Web Page
- Listing 2.2 - HTML Containing Paragraph and Line Breaks
Chapter 3 - Understanding Cascading Style Sheets
Chapter 4 - A Closer Look at HTML 5 Page Structure
Chapter 5 - Working with Text Blocks and Lists
- Lesson 5.1 - Text Blocks
- Lesson 5.2 - Unordered Lists, Ordered Lists, and Definition Lists
- Lesson 5.3 - Using Lists to Build Outlines
- Lesson 5.4 - Using the list-style-type Style Rule with style
Attribute in Multitiered Lists
Chapter 6 - Working with Fonts
- Lesson 6.1 - Special Character Codes
- Lesson 6.2 - Special Formatting Tags
- Lesson 6.3 - Using Font Style Rules to Create a
Basic Resume - Lesson 6.4 - Using Web Fonts
Hour 7 - Working with Colors and Borders
- Lesson 7.1 - Using Styles to Produce Background, Text and
Border Colors - Lesson 7.2 - Simple Rounded Corners
Hour 8 - Using External and Internal Links
- Lesson 8.1 - Setting Anchor Points by using the anchor tag
- Lesson 8.2 - Setting Anchor Points - Answers
- Lesson 8.3 - History Answers
- Lesson 8.4 - Using Styles to Display Link Pseudo Classes
Hour 9 - Using Tables and Columns
- Lesson 9.1 - Creating Tables with the table, tr, td, and th tags
- Lesson 9.2 - Specifying Table Cell Widths
- Lesson 9.3 - Alignment, Cell Spacing, Borders and Background Colors in Tables
- Lesson 9.4 - Alignment, Cell Spacing, Borders and Background Colors in Tables
Hour 10 and 11 - Images for Use on the Web
- Lesson 11.1 - Using the
Tag to Place Images on a Web Page
- Lesson 11.2 - Using Float Style Properties to Align Images on a Web Page
- Lesson 11.3 - Using Vertical-align Styles to Align Text with Images
- Lesson 11.4 - Using Thumbnails for Effective Image Links
- Lesson 11.5 - Define the Regions of an Image Map with map and area Tags
Hour 12 - Using Multimedia in Your Website
- Lesson 12.1 - Linking an Image to a Windows Media Video
- Lesson 12.2 - Using an Object Element to Directly Imbed a WMV Movie Clip
- Lesson 12.3 - Using the audio Element to Embed and Play an Audio File
- Lesson 12.4 - Using the video Element to Embed and Play a Video file
Hour 13 - Working with Margins, Padding, Alignment, and Floating
- Lesson 13.1 - Simple Code to Produce Four Colored divs with Borders and Margins
- Lesson 13.2 - Color Blocks realigned
- Lesson 13.3 - More alignments
- Lesson 13.4 - Changing the Margins
- Lesson 13.5 - Changing the Padding
- Lesson 13.6 - Adding Text and adjusting padding
Hour 14 - Understanding the CSS Box Model and Positioning
- Lesson 14.1 - Showing Relative Positioning with Four Color Blocks
- Lesson 14.2 - Using Absolute Positioning of the Color Blocks
- Lesson 14.3 - Using the z-index to Alter the Display of Elements in the Color Blocks Sample
Hour 15 - Creating Fixed or Liquid Layouts
- Lesson 15.1 - Basic Fixed/Liquid Hybrid Layout Structure
- Lesson 15.1a - Basic Fixed/Liquid Hybrid Layout Structure
- Lesson 15.2 -Basic Fixed/Liquid Hybrid Layout Structure (with content)
Hour 16 - Using CSS to Do More with Lists
- Lesson 16.1 - Creating a Basic List with Color and Border Styles
- Lesson 16.2 - Creating an Image Map Using CSS
Hour 17 - Using CSS to Design Navigation
- Lesson 17.1 - Basic Page with Vertical Navigation in a List
- Lesson 17.2 - Multilevel Vertical Navigation in a List
- Lesson 17.3 - Basic Horizontal Navigation from a List
- Lesson 17.4 - Navigation Elements Combined
Chapter 18 - Using Mouse Actions to Modify Text Display
- Lesson 18.1 - Creating a Simple Tooltip with CSS
- Lesson 18.3 - Using onclick to Show or Hide Content
Chapter 19 - Implementing CSS3 Transformations, Transitions, and Animations
- Lesson 19.1 - Showing a basic 2D Element
- Lesson 19.2 - Rotating a 2D Element
- Lesson 19.3 - Scaling a 2D Element
- Lesson 19.4 - Creating a 3D Cube