Build Your Own Business Website header image

Lesson 6 – Inheritance and Specificity in Thesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

In this Thesis theme video tutorial lesson we will learn about the CSS concepts of Inheritance and Specificity and how they are applied in the Thesis theme. Inheritance is the process by which a style is passed on from parent element to child element. Specificity is the means by which a browser distinguishes between potentially conflicting CSS declarations. Understanding how the Thesis theme uses these concepts can make styling and troubleshooting much easier

We will start off by looking at Inheritance and see how it is used to assign font color to various Thesis theme elements. Next we’ll examine Specificity and see how it affects the display of headings in the Thesis. theme Then we return to the Thesis custom body class system and see how this system uses specificity to style the site name and tag line. Finally we examine the structure and styling of the Thesis Navigation Menu. We look in detail at how Inheritance and Specificity can be used to customize the appearance of the Thesis Nav Menu.

CSS Inheritance and Thesis

  • Understanding Parent/Child Relationships in the Thesis theme
  • A practical example – font color
  • What can be inherited?

CSS Specificity and Thesis

  • Understanding Specificity
  • A simplified method of calculating Specificity
  • A practical example – Thesis headings

CSS Specificity and the Thesis Custom Body Class System

  • Thesis custom body classes
  • Specificity within the custom body class system
  • A practical example – Thesis h3 tag
  • Another practical example – Site Name and Tag Line

The Structure of the Thesis Navigation Menu

  • The nav menu building blocks
  • Nav menu link states
  • Nav menu link state classes
  • Properties that are inherited

Specificity and Inheritance in the Thesis Navigation Menu

  • The least specific style definition
  • Change the style by increasing the specificity of the style definition
  • Rule position – the specificity tie breaker
  • Specificity trumps position

Specificity in the Structure of the Navigation Menu

  • Add elements to increase specificity .menu ul a
  • Connect elements to classes ul.menu a
  • The difference between ul.menu a and .menu ul a
  • Incremental addition of elements .menu a, .menu ul a, .menu ul ul a

Classes The Thesis Theme Applies to the Navigation Menu

  • Levels of customization granularity
  • Classes added to menu items
  • Top level menu items – Pages – li .tab .tab-1
  • Top level menu items – Categories – li .cat-item .cat-item-1
  • Submenus – Pages – ul .submenu .submenu-1
  • Submenus – Categories – ul .children
  • Submenu items – Pages – li .item .item-1
  • Submenu items – Categories – li .cat-item .cat-item-2

Examples of Styling Elements of the Thesis Navigation Menu

  • Top level menu items
  • Submenus
  • Individual menu items

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment