HTML and CSS Tutorials
Jump to...Website Planning
- Web Design Best Practices: Avoid common mistakes when creating your website.
- Make a Plan: Make a plan to avoid wasted time and effort.
- Local Site Setup: Plan for growth to make site management easier.
- Content Creation: Discover the kind of content that brings success!
HTML Tutorials
Introduction to HTML
- Introduction to HTML: The basics are probably easier than you think.
- Make Your First Web Page: Make your first simple web page in just minutes! See how easy it is.
- HTML Attributes and Values: How to modify HTML elements to create exactly what you want.
Basic Text Formatting
- Blockquotes: The perfect way to draw attention to a text passage.
- Bold Text: Bold or Strong elements? Here’s when to use each.
- Headings: How to create headings and sub-headings in HTML.
- Italic Text: Are the italics tag and emphasis tag the same thing? Hint: not exactly.
- Line Breaks and Paragraphs: Single and double line breaks.
- Preformatted Text: Discover some good uses for preformatted text.
- Span Element: Use the span element to make quick text formatting changes.
NOTE | Text formatting options such as size, color, and more are listed in the CSS tutorials below. Many of the tutorials from this point on use CSS to style HTML. If you're not familiar with CSS you might want to jump down the page to the Introduction to CSS to get a basic understanding of it before proceeding into tutorials where it is an integral component. |
Color, Backgrounds, and Images
- Background Images: Use CSS to add a background image to your web page, divisions, and other elements.
- Button Sprites: The old "Javascript" image rollover was pretty cool for it's time, but this is better.
- Colors, CSS : Use CSS to change the text color and background color of your page.
- Colors, Gradient: Gradient colors with just CSS, no images needed!
- Colors, Hexadecimal: Hex colors explained in black and white . . . and a little color on the side.
- Colors, Named: All the allowed color names that browsers will recognize.
- Colors, RGB: RGB colors explained, included the alpha channel for transparency.
- Drop Caps: Use “drop caps” to dress up textual content.
- Images: How to add an image to your web pages.
- Image Alignment and Text Flow: How to align an image to the left or right and text flow around it.
- Image Clipping: You can clip an image with CSS so only part of the image is displayed.
- Image Margins: Create a cushion of space between an image and other content.
- Image Transitions: Fade one image into another for a cool transition effect.
- Image Use with Headings: Text headings or image headings—why not both . . . at the same time!
Lists
- List Basics: Ordered (numbered) and unordered (bulleted) lists in HTML.
- List Borders: Bordered lists are visually very cool—several examples are shown, code included.
- Colored List Bullets: Have list bullets in one color and the list items in another color.
- Flow Text Around Lists: Avoid the gaping holes. Check out this great looking list!
- List Image Bullets: Use images for bullets on your unordered lists. No more boring bullets!
- List Marker Position: List markers can be inside or outside the text flow. Get the details here.
Tables
- Table Basics: Understanding how HTML tables work is must have knowledge.
- Cellpadding and Cellspacing: One of these table attributes makes easier to read, one is deprecated.
- Span Table Rows and Columns: Here you'll discover how to combine rows and columns to form unique layouts.
CSS Tutorials
- Introduction to CSS: Understanding CSS will greatly enhance what you can do with HTML.
- Style Sheets: The three methods of using CSS in your web pages.
- Cascading Order: When style rules conflict, what happens?
CSS Classes
- CSS Classes: Class is in session, come on in! Discover all you need to know about CSS class names.
- CSS Generic Classes: Create multipurpose classes for convenience and ease of use.
- CSS ID Classes: How to use an ID class instead of a named class.
- CSS Pseudo Classes: An example pseudo-class is a link color change, but there are many more!
CSS Essential Knowledge
- Borders: Add borders to almost any HTML element using the CSS border property.
- Box Model: Understanding the box model is crucial to understanding CSS.
- Box Sizing: Here’s why two elements can be coded to the same size but end up different sizes.
- Float Property: How to "float" HTML elements to the left or right so content flow around them.
- Margins: How to create a cushion of space outside of the box model.
- Padding: How to create a cushion of space within the box model.
- Width and Height: CSS width and height are more versatile and offer more options than the HTML counterparts.
Text Formatting with CSS
- Abbreviations: Reveal the meaning of an abbreviation without spelling it out on the web page.
- Acronyms: Deprecated in HTML5. Recommended alternative: Abbreviations. Legacy tutorial is still posted.
- Text Colors: Use CSS to change text color, whether for an entire page or just one letter.
- Definition Element: Explain uncommon words without interrupting text flow.
- Font Family: How to change the fonts on your web page with the CSS font family.
- Font Size: How to change the font size of your web page text.
- Font Style: How to set the font style property. That just means normal, italic, or oblique.
- Font Variant: Create small caps—great for headings!
- Font Weight: How to set the font weight using CSS.
- Letter Spacing: Did you know you can control the distance between letters? Discover how right here.
- Line Height: Using CSS you can control the amount of space in between lines of text.
- Text Alignment: Use CSS to align text left, right, center, or justify it.
- Text Decorations: What are text decorations … ribbons, bows, sparkly things? No, they are...
- Text Indent: Here's how to indent the first line of paragraphs like you see in many books.
- Text Shadows: Create text shadows using only CSS. Creativity is fun!
- Text Transform: Transform text like magic—and no magic fairy dust is required!
- Word Spacing: Hey you, control freak, did you know you can control the spacing between words?
Advanced CSS Tutorials
- Contextual Selectors: CSS selectors that only kick in under specific conditions you choose.
- Display Style: Change the default display style of elements.
- Multiple Properties: Set multiple properties and values all in one style rule.
- Multiple Selectors: Set the same value for multiple selectors in one style rule.
- CSS Overflow Property: Set the rules for what happens to when your content overflows it's alloted space.
- CSS Positioning: Tutorial shows how to precisely place elements on a web page using CSS positioning.
- CSS Pseudo-elements: Use CSS to stylize parts of an element or automatically add content.
- Stacking Elements: Use CSS to stack elements of top of each other.
- Hiding Elements: Yup, you really can put stuff on your page and hide it...in case you don't have enough to do.
Tips, Tricks, and Techniques . . . the Cool Stuff!
- 5 Must-Know CSS Tips: Good to know tips to help spare you some frustration and grief.
- Anchor Points: Create "back to the top" links or a link to any place on a web page.
- Animated Borders: Element borders can have motion! Or am I trickster? Hint: both may be true.
- Animated Tooltip: Fade: This snazzy tooltip fades into view, revealing your tooltip content. Sharp!
- Automatic Steps Counter: Automate the numbering of steps (or chapters, rules, etc.), including sub-steps.
- Auto-Updating Copyright Notice: This copyright notice updates itself each year.
- Box Shadow: These shadows make it look like the box corners are lifting up, but no images are used.
- Styled Scrollbars: Style your own on-page scroll bars to match your site and add some super-pizzazz to page.
- Corner Ribbon: Add a CSS attention-getting ribbon to the corner of a page, no images, link to anywhere.
- Fake Watermark: How to create a realistic fake watermark without editing the image in a graphics program.
- Creative Box Corners: Cool design techniques—knock-out corners and folded corners without using images.
- CSS Shapes: Circles, triangles, ovals, and speech bubbles shapes can all be drawn with CSS only.
- CSS Speech Bubbles: Create speech bubbles to give photo subjects something say. No image bubbles.
- Daily Content Rotator: Have a daily quote, link, fortune, video, or whatever that changes automatically.
- Delayed Content: Have hidden content that opens and fades into view after a time delay that you specify.
- Fieldset Element: The fieldset element is very cool, and has a lot more uses than most imagine.
- Hide and Reveal Content: You can have a content overview, and with a click users can get more details.
- HTML Base: If you’re not using this, you should probably read this tutorial.
- CSS Image Borders: Oh yeah, you can use images for borders, and the results can be pretty darn cool!
- Image Growth: Watch these thumbnails images magically grow before your eyes.
- Picture Frames: Use CSS to frame your photos with attractive, multi-color picture frames.
- Random Link Script: Have a link that changes randomly. Feature your products, affiliate links, or anything.
- Scalable Background Images: How to use a full-screen background that scales to the viewing device.
- Rotate Content: Rotate content on when the cursor is placed on it—you can even spin it. This is cool.
- Text Tricks: Not really tricks, but I had to call it something. Just some simple attention-getters.
Related Articles
- 301 Redirect: How to automatically redirect people and search engines from an old page to a new page.
- Canonical URLs: Boost your website's SEO juice by using canonical URLs.
- Color Theory: Help for the color confused by a colorless color rebel. Or something.
- Copyrights Online: Copyrights regarding online content is an important issue. Do you know the basics?
- Designing with Breathing Room: Master the art of balance—the vital role of white space revealed.
- External Javascript: Placing Javascripts in external files instead of on-page has multiple benefits.
- HTML Doctypes: All you need (probably) to know about DOCTYPES in one short page.
- Image Formats for the Web: Which formats are best? Which formats are best supported?
- Meta Tags: There are dozens of them. Here's the most important ones and how to use them.
- Robots Meta Tag: How to tell the search engines what you want and don't want them to index.
- Robots.txt: Issue directives to the search engine spiders with a robots.txt file
- Server Paths: Understanding server paths is vital to peak performance and unbroken links.
- Server Side Includes: Discover how to leverage the power of SSI to add dynamic content into your web pages.
- To Catch a Thief: How to find people stealing your content. Two free ways for text, two more for images.
