You are previewing CSS Cookbook, 3rd Edition.

CSS Cookbook, 3rd Edition

Cover of CSS Cookbook, 3rd Edition by Christopher Schmitt Published by O'Reilly Media, Inc.
  1. CSS Cookbook
  2. A Note Regarding Supplemental Files
  3. Foreword
  4. Preface
    1. Audience
    2. Assumptions This Book Makes
    3. Contents of This Book
    4. Conventions Used in This Book
    5. Using Code Examples
    6. We’d Like to Hear from You
    7. Safari® Books Online
    8. Acknowledgments
  5. 1. Using HTML Basics
    1. Introduction
    2. Picking a Text Editor
    3. Coding a Basic HTML Page
    4. Understanding DOCTYPEs and Effects on Browser Layout
    5. Marking Up Headers
    6. Making Appropriate Quotations
    7. Adding an Image
    8. Adding Audio with HTML5
    9. Incorporating Video with HTML5
    10. Using strong and em Effectively
    11. Creating Lists
    12. Making a Link to a Web Page
    13. Coding Tables
    14. Creating an HTML vCard (hCard)
    15. Marking Up an Event (hCalendar)
    16. Validating HTML
  6. 2. CSS Basics
    1. Introduction
    2. Applying CSS Rules to a Web Page
    3. Using Basic Selectors to Apply Styles
    4. Applying Child Selectors
    5. Applying Adjacent Selectors
    6. Applying Attribute Selectors
    7. Using Pseudo-Classes
    8. Using Pseudo-Elements
    9. Determining When to Use Class and ID Selectors
    10. Understanding CSS Properties
    11. Understanding the Box Model
    12. Associating Styles to a Web Page
    13. Understanding the Origin
    14. Understanding the Sort Order Within CSS
    15. Using !important to Override Certain CSS Rules
    16. Clarifying Specificity
    17. Setting Up Different Types of Stylesheets
    18. Adding Comments Within Stylesheets
    19. Organizing the Contents of a Stylesheet
    20. Working with Shorthand Properties
    21. Setting Up an Alternate Stylesheet
    22. Using Floats
    23. Using Self-Clearing Floated Elements
    24. Using Absolute Positioning
    25. Using Relative Positioning
    26. Using Shackling Positioning
    27. Stacking Elements with z-index
    28. Validating CSS Rules
  7. 3. Web Typography
    1. Introduction
    2. Specifying Fonts
    3. Using Web-Safe Fonts
    4. Setting an Ampersand Flourish
    5. Embedding Font Files
    6. Forcing a Break on Really Long Words
    7. Specifying Font Measurements and Sizes
    8. Gaining More Cross-Browser Consistency with Font Sizes
    9. Setting Hyphens, Em Dashes, and En Dashes
    10. Centering Text
    11. Setting Text to Be Justified
    12. Indicating an Overflow of Text with an Ellipsis
    13. Removing Space Between Headings and Paragraphs
    14. Setting a Simple Initial Cap
    15. Setting a Larger, Centered Initial Cap
    16. Setting an Initial Cap with Decoration (Imagery)
    17. Creating a Heading with Stylized Text
    18. Creating a Heading with Stylized Text and Borders
    19. Stylizing a Heading with Text and an Image
    20. Creating a Pull Quote with HTML Text
    21. Placing a Pull Quote to the Side of a Column
    22. Creating a Pull Quote with Borders
    23. Creating a Pull Quote with Images
    24. Setting the Indent in the First Line of a Paragraph
    25. Setting the Indent of Entire Paragraphs
    26. Creating a Hanging Indent
    27. Styling the First Line of a Paragraph
    28. Styling the First Line of a Paragraph with an Image
    29. Creating a Highlighted Text Effect
    30. Changing the Text Selection Color
    31. Changing Line Spacing
    32. Adding a Graphic Treatment to HTML Text
    33. Placing a Shadow Behind Text
    34. Adjusting the Space Between Letters and Words
    35. Applying Baseline Rhythm on Web Typography
    36. Styling Superscripts and Subscripts Without Messing the Text Baseline
    37. Setting Up Multiple Columns of Text
  8. 4. Images
    1. Introduction
    2. Transforming Color Images to Black and White in IE with CSS
    3. Setting a Border Around an Image
    4. Setting a Rounded Border Around an Image
    5. Removing Borders Set on Images by Default in Some Browsers
    6. Setting a Background Image
    7. Creating a Line of Background Images
    8. Positioning a Background Image
    9. Using Multiple Background Images on One HTML Element
    10. Setting Images on a Border
    11. Creating a Stationary Background Image
    12. Stretching Images As the Browser Resizes
    13. Stretching an Image Across the Entire Browser Window
    14. Making Images Scalable
    15. Setting How a Browser Renders an Image
    16. Rotating Images with CSS
    17. Setting Gradients with CSS
    18. Creating Transparent PNG Images for IE6 and Later
    19. Using Transparent PNG Images with JavaScript
    20. Overlaying HTML Text on an Image
    21. Replacing HTML Text with an Image
    22. Building a Panoramic Image Presentation
    23. Combining Different Image Formats
    24. Rounding Corners with Fixed-Width Columns
    25. Rounding Corners (Sliding Doors Technique)
    26. Rounding Corners (Mountaintop Technique)
    27. Rounding Corners with JavaScript
    28. Setting a Shadow on an Element with CSS
    29. Placing a Drop Shadow Behind an Image
    30. Placing a Smooth Drop Shadow Behind an Image
    31. Making Word Balloons
    32. Hindering People from Stealing Your Images
    33. Inserting Reflections on Images Automatically
    34. Using Image Sprites
    35. Clipping Background Images
    36. Applying Masks to Images and Borders
  9. 5. Page Elements
    1. Introduction
    2. Eliminating Page Margins
    3. Resetting Browser-Style Defaults for Elements
    4. Coloring the Scroll Bar in IE
    5. Techniques for Centering Elements on a Web Page
    6. Placing a Page Border
    7. Placing a Border Around the Browser’s Viewport
    8. Customizing a Horizontal Rule
    9. Adding a Lightbox
    10. Changing the Opacity on Elements
    11. Adjusting the Opacity of Background Colors
  10. 6. Lists
    1. Introduction
    2. Changing the Format of a List
    3. Changing the Color of a List Bullet
    4. Writing Cross-Browser Indentation in Lists
    5. Placing Dividers Between List Items
    6. Creating Custom Text Markers for Lists
    7. Creating Custom Image Markers for Lists
    8. Inserting Larger Custom Image Markers for Lists
    9. Making a List Presentation Rich with Imagery
    10. Creating Inline Lists
    11. Making Hanging Indents in a List
    12. Moving the Marker Inside the List
    13. Styling a Definition List
    14. Styling a Screenplay with the HTML5 dialog Element
    15. Turning a List into a Directory Tree
    16. Creating a Star Ranking System
  11. 7. Links and Navigation
    1. Introduction
    2. Easily Generating Text-Based Menus and Submenus
    3. Removing Underlines from Links (and Adding Other Styles)
    4. Changing Link Colors
    5. Removing Dotted Lines When Clicking on a Link in Internet Explorer
    6. Changing Link Colors in Different Sections of a Page
    7. Placing Icons at the End of Different Kinds of Links
    8. Changing Cursors
    9. Creating Rollovers Without JavaScript
    10. Animating Rollovers on Links with CSS3 Transitions
    11. Creating Text Navigation Menus and Rollovers
    12. Adding Submenus to Vertical Menus
    13. Building Horizontal Navigation Menus
    14. Building Horizontal Navigation Menus with Drop-Down Menus
    15. Building a Navigation Menu with Access Keys
    16. Creating Breadcrumb Navigation
    17. Creating Image-Based Rollovers
    18. Creating Collapsible Menus
    19. Creating Contextual Menus
    20. Making Tool Tips with the title Attribute
    21. Designing a Dynamic Tabbed Menu
    22. Changing Styles on Anchored Links
  12. 8. Forms
    1. Introduction
    2. Modifying the Spacing Around a Form
    3. Removing the Space Around a Form
    4. Setting Styles for Input Elements
    5. Changing Styles on Form Elements When a User Clicks on Them
    6. Applying Different Styles to Different Input Elements in the Same Form
    7. Setting Styles for textarea Elements
    8. Setting Styles for select and option Elements
    9. Creating a Macintosh-Styled Search Field
    10. Styling Form Buttons
    11. Creating an Image Submit Button
    12. Setting Up a Submit-Once-Only Button
    13. Creating a Submit Button That Looks Like HTML Text
    14. Making an HTML Text Link Operate Like a Submit Button
    15. Designing a Web Form Without Tables
    16. Designing a Two-Column Form Without Tables
    17. Integrating Form Feedback with a Form
    18. Styling Access Keys in Web Forms
    19. Grouping Common Form Elements
    20. Entering Data into a Form That Is Similar to a Spreadsheet
    21. Sample Design: A Login Form
    22. Sample Design: A Registration Form
  13. 9. Tables
    1. Introduction
    2. Setting the Borders and Cell Padding for Tables
    3. Setting the Cell Spacing
    4. Setting the Style for Captions
    5. Setting the Styles Within Table Cells
    6. Setting the Styles for Table Header Elements
    7. Removing Gaps from Images Placed in Table Cells
    8. Eliminating Gaps Between Table Cells
    9. Creating Alternating Background Colors in Table Rows
    10. Adding a Highlighting Effect on a Table Row
    11. Sample Design: An Elegant Calendar
  14. 10. Designing Web Pages for Printing
    1. Introduction
    2. Applying a Stylesheet for Printing to a Web Page
    3. Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages
    4. Making a Web Form Print-Ready
    5. Displaying URIs After Links
    6. Inserting Special Characters Before Links
    7. Setting Page Breaks for a Printed Document
    8. Sample Design: A Printer-Friendly Page with CSS
  15. 11. Page Layouts
    1. Introduction
    2. Building a One-Column Layout
    3. Building a Two-Column Layout
    4. Building a Two-Column Layout with Fixed-Width Columns
    5. Creating a Flexible Multicolumn Layout with Floats
    6. Creating a Fixed-Width Multicolumn Layout with Floats
    7. Creating a Flexible Multicolumn Layout with Positioning
    8. Creating a Fixed-Width Multicolumn Layout with Positioning
    9. Using Floats to Display Columns in Any Order
    10. Designing an Asymmetric Layout
    11. Designing Resolution-Independent Layouts
  16. 12. Hacks, Workarounds, and Troubleshooting
    1. Introduction
    2. Overriding Inline Styles
    3. Diagnosing CSS Bugs and Browser Issues
    4. Using Bookmarklets to Troubleshoot CSS
    5. Using Browser Extensions to Troubleshoot CSS
    6. Patching Up Internet Explorer 6
    7. Patching Up Internet Explorer 6 with JavaScript
    8. Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer
    9. Using CSS Filters to Deliver CSS Rules to Almost Any Browser
    10. Setting Up an Intelligent CSS Delivery System for Modern Browsers
    11. Testing a Site Design on More Than One Platform with Only One Computer
    12. Testing a Website with a Text Browser
  17. 13. Designing with CSS
    1. Introduction
    2. Enlarging Text Excessively
    3. Creating Unexpected Incongruity
    4. Combining Unlike Elements to Create Contrast
    5. Leading the Eye with Contrast
    6. Checking for Enough Color Contrast
    7. Emphasizing a Quotation with Smart Quotes
    8. Setting a Moving Background Scene When a User Resizes the Window
    9. Adding Animation to Elements on a Page
    10. Creating a Fireworks Display As a User Scrolls
    11. Customizing the View Source Stylesheet for Firefox
    12. Designing with Grids (CSS Frameworks)
    13. Sample Design: A Cohesive Web Design
    14. Sample Design: The U.S. Flag
  18. 14. Interacting with JavaScript
    1. Introduction
    2. Determining Whether JavaScript Is Available Within a Browser
    3. Applying a Different Stylesheet Based on the Time of Day
    4. Redirecting to a Mobile Site Based on the Browser’s Screen Width
    5. Adding a JavaScript Framework to a Web Page
    6. Using CSS3 Selectors in IE6 and IE7
    7. Zebra-Striping an HTML Table with JavaScript
    8. Highlighting a Table Row with Mouseovers
    9. Adding Effects to Simple Image Rollovers
    10. Making a Row of Elements with a Variable Amount of Content the Same Height
    11. Setting a Link to Open a New Window
    12. Making an Entire div Element Clickable
    13. Supporting Transparent PNGs in IE6 with JavaScript
    14. Delivering HTML5 and CSS3 to Browsers That Can Handle Them
  19. A. Resources
    1. General HTML and CSS Instruction
    2. Design Resources
    3. References
    4. Tools
  20. B. CSS 2.1 Properties and Proprietary Extensions
  21. C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
  22. D. CSS3 Selectors and Pseudo-Classes
  23. E. Styling of Form Elements
    1. Anatomy of the Appendix
    2. Tested CSS Properties
  24. Index
  25. About the Author
  26. Colophon
  27. Copyright
O'Reilly logo

Making a Link to a Web Page

Problem

You want to link to another web page.

Solution

Using the anchor link:

<p>This book's <a href="http://www.csscookbook.com/">Web site</a> contains
links to download more materials.</p>

to link to another page in the same website, link to its file:

<p>Check out the <a href="about.html">About page</a> for more information.</p>

Discussion

Along with the img element (see Adding an Image), some browsers display a tool tip if a title attribute and value are present within the anchor link, as shown in Figure 1-12:

<p>This book's <a href="http://www.csscookbook.com/" title="Link to the book
site">Web site</a> contains links to download more material.</p>
A tool tip displayed over a link

Figure 1-12. A tool tip displayed over a link

Linking to another web page on the same site

When you are creating links within the same site, use relative links instead of anchor links. Relative links are addresses that are valid only if you are visiting from certain web pages.

For example, suppose you have a website composed of four pages within the same root folder, the main directory that contains the website files, as shown in Figure 1-13:

  • httpdocs/

    • index.html

    • aboutus.html

    • contactus.html

    • services.html

Sample directory structure

Figure 1-13. Sample directory structure

Including everything that is needed to point a web browser to a location in a link means that you created an absolute link, which looks like this:

<a href="http://www.csscookbook.com/services.html">Services Page</a>

If you want to create a link from the index page to another page on the same website, use a relative link. A relative link is a little bit leaner than an absolute link and, as in this example, can cite just the filename itself within the href attribute:

<a href="services.html">Services Page</a>

Relative links contain neither the full http:// protocol nor the domain name.

When a browser navigates to a relative link, it uses the domain name of the page it is currently viewing to assemble the link to where it should go next.

Moving up folders

Just as your personal computer probably contains numerous folders holding numerous files for a project, websites are also composed of folder sets and files. To link from one document to another document within the same website, use relative links.

For example, say you have a main technical specs page within a specs folder, which itself is in a widget folder. The organization of the files on the server might look something like this:

  • products/

    • widget/

      • specs/

        • specs.html

To provide a link to the main widget page from the technical specs page, use ../ to tell the browser to go up to the parent directory:

<a href="../widget.html">Widget Page</a>

If you want to go up two parent directories and link to the main products page from the technical specs page, you would format the link like so:

<a href="../../products.html">Product Page</a>

Using the root relative link

The process for using relative links to move between the folders of a large website can sometimes be tricky, if not convoluted. Another type of link to use in such a case is a root relative link.

Here is how you would use a root relative link to code the link from the technical specs page to the main product page in the preceding example:

<a href="/products/products.html">Product Page</a>

The forward slash signifies the protocol and domain name of the URI, a sort of shorthand for links.

Linking to certain elements within a web page

You can also link to certain elements within an HTML document by creating anchors. You can create an anchor by assigning an id attribute to an HTML element:

<h2 id="hireme">Hire Me</h2>

Then, link to that anchor by prefacing the id name with a hash symbol (#):

<a href="#hireme">Hire Me</a>

When clicked, the browser navigates to the part of the document that has the corresponding id name.

Note

If a document is not longer than the browser’s viewport or window, there won’t be any noticeable change that the browser has skipped to an anchored link.

Designers use anchors to create a table of contents at the top of a web page that lets you quickly navigate to other parts of the document. This approach is particularly useful on web pages with a large amount of content to help users avoid excessive scrolling.

See Also

Chapter 7 on links and navigation

The best content for your career. Discover unlimited learning on demand for around $1/day.