Specificity, Shared CSS, & Centering Content

Topics Covered in This HTML & CSS Tutorial:

CSS Specificity and Rule Hierarchy, Advanced Link State Styling, Transitioning from Embedded to External Stylesheets, Site-Wide Style Management, Text Alignment Properties, and Professional Content Centering Techniques

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll complete the Revolution Travel site's styling while mastering several critical CSS concepts that form the backbone of professional web development:

• CSS Specificity Mastery: As you refine the :visited and :hover states for navigation elements, you'll discover how CSS specificity determines which rules take precedence—a fundamental concept that separates amateur developers from professionals who can debug and architect maintainable stylesheets.
• Scalable Architecture: You'll transition from embedded styles (suitable for prototyping) to external stylesheets—the industry standard for production websites. This approach ensures design consistency across your entire site, streamlines maintenance (update once, change everywhere), and dramatically improves site performance through browser caching of your CSS files.
• Professional Layout Techniques: Learn to create balanced, centered layouts that work across all screen sizes. You'll master the techniques that give websites their polished, professional appearance rather than the left-aligned amateur look of unstyled HTML.

1. If you completed the previous exercise, sanfran.html should still be open, and you can skip the following sidebar. If you closed sanfran.html, re-open it now. We strongly recommend completing the previous exercises (3B–4C) before starting this one, as each builds upon the last. If you haven't finished them, follow the setup instructions below.

   Exercise Requirements

   0/3

   Complete previous exercises 3A-4B

   Essential foundation for understanding the current styling context

   Have sanfran.html open in code editor

   Primary working file for implementing CSS changes

   Browser preview window ready

   Real-time testing of CSS modifications

Customizing the Visited & Hover States of the Main Nav

Navigation styling requires careful attention to user experience. Let's create a consistent visual hierarchy that prioritizes usability over browser defaults.

1. Preview sanfran.html in a browser and observe the current link behavior:

   While the default link, visited, and hover styles function correctly, they create inconsistent visual cues in our main navigation. Notice that visited pages appear gray in the navigation bar—a design choice that can confuse users about site structure. If you haven't visited other pages yet, click a few navigation links and use the back button to return to sanfran.html to see this effect.

   For optimal user experience, navigation links should maintain consistent styling regardless of visit status. We'll override the default visited state to keep all navigation links blue, creating a cleaner, more professional appearance.

2. Return to sanfran.html in your code editor.

3. Building on our contextual styling approach from the previous exercise, we'll target visited links specifically within the navigation element. Below the existing nav a rule, add this new rule:

   nav a {
      padding: 10px;
      display: inline-block;
      font-size: 13px;
      text-transform: uppercase;
   }
   nav a:visited {
      color: #13aad7;
   }

4. Save the file and reload the page in the browser. Notice the improvements and the new challenge:

   • All navigation links now display consistently in blue—exactly what we want for professional navigation.

   • However, when you hover over visited links, the orange hover color no longer appears. This reveals a critical CSS concept: specificity hierarchy.

     The a:hover rule targets all links globally, but our new nav a:visited rule is more specific because it targets links within a specific container. CSS specificity determines which rule wins when multiple rules could apply to the same element. More specific selectors always override less specific ones, regardless of their order in the code. To restore hover functionality for navigation links, we need to create a rule with equal or greater specificity than our visited link rule.

   Navigation Link Styling Process

   1

   Add visited state rule

   Create nav a:visited selector to override default gray visited links with blue color

   2

   Fix hover specificity

   Add nav a:hover rule with higher specificity to restore orange hover color

   3

   Remove underlines and add focus

   Add text-decoration: none and include focus state for accessibility

Creating & Linking to an External Style Sheet

Now we'll transition from embedded styles to external stylesheets—a fundamental shift toward professional, scalable web development architecture.

1. Return to sanfran.html in your code editor.
2. Select all the CSS rules inside the <style></style> tags. Begin with the body rule and include everything through the closing curly brace of the .img-right rule.
3. Cut the selected rules (Cmd–X on Mac or Ctrl–X on Windows).
4. Open main.css in your code editor (located in the Revolution Travel folder). This file should be empty and ready for your styles.
5. Paste the CSS rules (Cmd–V on Mac or Ctrl–V on Windows) into the CSS file.
6. Save main.css and keep it open for continued editing.
7. Return to sanfran.html in your code editor and save the file.

8. Preview sanfran.html in a browser to observe the unstyled appearance—this demonstrates how CSS transforms basic HTML structure into polished web experiences.

   Important: Never preview CSS files directly in the browser, as they display only code rather than rendered content. Keep your HTML file open in the browser tab for testing as we continue.

9. Return to sanfran.html and delete the now-empty style tags:

   <style>
   
   </style>

10. In place of the removed style tags, add this link element to connect your HTML to the external stylesheet:

    <link rel="stylesheet" href="main.css">

11. Understanding the link element attributes is crucial for troubleshooting:

    • The rel attribute defines the relationship—telling the browser this linked file contains styles
    • The href attribute provides the path to your stylesheet file (relative to the HTML document)

12. Save the file and reload the browser to see how this single line of code restores all your styling by linking to the external CSS file.

    Critical deployment note: When publishing your site to a web server, both the HTML files and the CSS file must be uploaded to maintain styling. Missing CSS files are a common cause of unstyled production websites.

Linking Styles to Other Pages

With your styles externalized, you can now implement site-wide consistency—one of the hallmarks of professional web development.

1. Return to your code editor with the sanfran.html file open.

2. Copy the link element you just created:

   <link rel="stylesheet" href="main.css">

3. Your project folder contains six HTML files that need styling. Each requires this link element to access your centralized styles.
4. Open about.html in the code editor.

5. Paste the link code into the head section, positioned after the title element:

   <head>
      <meta charset="UTF-8">
      <title>About Revolution Travel—Revolution Travel</title>
      <link rel="stylesheet" href="main.css">
   </head>

6. Save and close the file.

7. Repeat this process for the remaining HTML files, maintaining the same head structure. Link the stylesheet to:

   • contact.html
   • index.html
   • tips.html

   Ensure you save each file after adding the link element.

8. Verify all files are saved and closed before proceeding.

9. Open packages.html and add the stylesheet link, noting this file's existing embedded styles:

   <head>
      <meta charset="UTF-8">
      <title>Featured Travel Packages—Revolution Travel</title>
      <link rel="stylesheet" href="main.css">
      <style>.featured-package {

   Best practice: Always place external stylesheet links before embedded styles. This ensures your global styles load first, with page-specific styles able to override them when necessary.

10. Save and close the file.
11. Test your implementation by opening any HTML page in the browser and navigating through the site using the main navigation. Experience the power of centralized styling—consistent design across all pages, maintained from a single CSS file.

Centering the Logo & Nav Content

Professional web design requires careful attention to visual balance and hierarchy. Let's center key elements to create a more polished, intentional layout.

1. Open main.css in your code editor (if not already open).

2. Locate the header rule and add the text-align property:

   header {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
      text-align: center;
   }

Centering the Page Content

Content centering transforms amateur-looking left-aligned layouts into professional, intentionally designed experiences that work well across all screen sizes.

1. Return to main.css in your code editor.

2. Modify the main rule to add automatic horizontal centering:

   main {
      width: 90%;
      max-width: 800px;
      margin-bottom: 30px;
      margin-left: auto;
      margin-right: auto;
   }

3. Save the file and reload any page to see the transformation. All main content now centers beautifully within the browser window.

   The centering technique you just applied is a cornerstone of responsive web design: set a flexible width (90%) with a maximum width constraint (800px), then use auto margins to center the container. This creates layouts that work elegantly on both mobile devices and wide desktop monitors.

4. Apply the same centering approach to the footer for visual consistency:

   footer {
      width: 90%;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
   }

5. Save the file and reload to see the complete centered layout—header, content, and footer all properly aligned for a cohesive design.

Fine-Tuning Margins & Padding

Professional layouts require attention to spacing details that separate polished sites from amateur efforts. Let's optimize the spacing relationships throughout the design.

1. Return to main.css in your code editor.

2. Modify the body rule to eliminate default browser margins:

   body {
      font-family: sans-serif;
      margin: 0;
   }

   All major browsers apply default margins to the body element (typically 8px). While this provides basic spacing for unstyled HTML documents, professional designs require precise control over spacing. Removing default margins allows the header border to extend to the browser edges, creating a more intentional, designed appearance.

3. Save the file and reload any page to see how the header border now extends fully across the browser window—a significant improvement in visual polish.

4. With the default margins removed, add deliberate spacing to the header for optimal visual balance:

   header {
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
      text-align: center;
   }

5. Save the file and reload to see the improved header spacing—the logo now has appropriate breathing room above and below.
6. Navigate to the Travel Tips page and notice how the list items lack the refined spacing of paragraph text. This is because our typography styles haven't been applied to list elements.

7. Extend your paragraph styling to include list items by modifying the p rule selector (note the essential comma):

   p, li {
      line-height: 24px;
      margin-bottom: 22px;
   }

8. Save the file and reload the Travel Tips page to see dramatically improved list readability—proper line height and spacing make content more scannable and professional.

Fine-Tuning Heading Styles

Typography hierarchy guides users through your content and establishes visual credibility. Let's refine the heading styles for optimal readability and brand consistency.

1. Navigate to the About Us page in your browser and examine the heading styles. The default bold weight, while functional, may be too heavy for your design aesthetic.
2. Return to main.css in your code editor.

3. Create a shared rule for both h1 and h2 elements to eliminate code duplication and ensure consistency. Add this rule above the existing h1 rule:

   h1, h2 {
      font-weight: normal;
   }
   h1 {

4. Save the file and reload the About Us page to see the refined, less aggressive heading appearance. The normal font weight creates a more sophisticated, editorial feel.
5. Return to your code editor and examine the individual h1 and h2 rules—notice they both specify the same orange color, creating unnecessary repetition.

6. Add the shared color property to the combined rule for more maintainable code:

   h1, h2 {
      font-weight: normal;
      color: #e45c09;
   }

7. Remove the redundant color properties from the individual heading rules, leaving only their unique properties:

   h1, h2 {
      font-weight: normal;
      color: #e45c09;
   }
   h1 {
      font-size: 28px;
      line-height: 36px;
   }
   h2 {
      font-size: 18px;
   }

8. Save the file. This refactoring demonstrates professional CSS architecture: shared properties in combined selectors, unique properties in individual rules, creating more maintainable and logical stylesheets.

Optional Bonus: Styling the Footer Content

Footer design often receives insufficient attention, yet it's crucial for establishing site hierarchy and maintaining professional credibility through the entire user experience.

1. Enhance the footer with subtle, professional styling that doesn't compete with main content:

   footer {
      width: 90%;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      color: #999;
      font-size: 12px;
      text-transform: uppercase;
   }

2. Save the file and reload any page to see how the muted color and smaller text size create appropriate visual hierarchy—footer information remains accessible without demanding attention.

3. Add a subtle visual separator between main content and footer:

   footer {
      width: 90%;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      color: #999;
      font-size: 12px;
      text-transform: uppercase;
      border-top: 1px solid #ccc;
   }

4. Save the file and reload to see the clean border separation.

5. Complete the footer refinement by adding appropriate spacing above the text:

   footer {
      width: 90%;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      color: #999;
      font-size: 12px;
      text-transform: uppercase;
      border-top: 1px solid #ccc;
      padding-top: 20px;
   }

6. Save the file and reload to appreciate the completed footer design—professional, unobtrusive, and perfectly balanced within the overall layout.

Congratulations! You've successfully implemented a professional, scalable CSS architecture using external stylesheets, mastered CSS specificity concepts, and created a polished, centered layout that works across all pages. These skills form the foundation of professional front-end development and will serve you well in creating maintainable, scalable web projects.