Before getting into the nitty gritty of applying CSS it’s worth taking some time to understand the HTML structure of the page in _s.
Conceptually I always think of an HTML page as a series of boxes each nested inside one another – each having a unique name with different types of boxes sharing characteristics.
In HTML terms there are three important ways of identifying and categorising these boxes:-
- ID – a unique name used to identify a specific element on a page/document
- Class – used to assign general properties to one or many elements on a page/document
- Role – ARIA “role” attribute helps make it easier for those using assisitive technology devices to navigate through the page
So for _s and most WP themes
- Page container <div id=”page” class=”hfeed site”>
- Site header <header id=”masthead” class=”site-header” role=”banner”>
- <hgroup>
- navigation <nav class=”site-navigation main navigation” role=”navigation”>
- Main content <div id=”main” class=”site-main”>
- main area – primary <div id=”primary” class=”content-area”>
- site content <div id=”content” class=”site-content” role=”main”>
- widget area – secondary <div id=”secondary” class=”widget-area” role=”complimentary”>
- widget are – tertiary <div id=”tertiary” class=”widget-area” role=”supplementary”>
- main area – primary <div id=”primary” class=”content-area”>
- Site footer <footer id=”colophon” class=”site-footer” role=”contentinfo”>
- site info <div class=”site-info”>
- Site header <header id=”masthead” class=”site-header” role=”banner”>
Or to more easily visualise it https://themeshaper.files.wordpress.com/2012/10/html-visual1.png
Peace
G