After following the tutorials for CSS and HTML, there are still unanswered questions when it comes to putting it all together. From the tutorials, you learn that each CSS declaration follows this pattern (be careful for every keystroke and line feed)
selector1,
selector2,
selector3 {
style designator1:style1;
style designator2:style2;
style designator3:style3;
style designator4:style4;
}
You can also use a single line, although it is harder to read and remember what it means.
selector1, selector2,selector3 {style designator1:style1;style designator2:style2;style designator3:style3;style designator4:style4;}
This article will lend some insight into the inner thoughts of designers for Wordpress themes, specifically twentytwelve theme using the top navigation menu as the example.
CODE EXECUTION:
All code is executed sequentially. This means that if you declare a style higher up on the page, then you can undeclare it lower down. It also means that you can declare different styles in a top-down approach of increasingly narrower specificity. For instance, begin at the top and select all Object types for the most general style. Then select a subset of those types to single out for a different style. Continue to the most specific selector last.
SELECTORS
Selectors can be declared by any of three designator types (in increasing specificity)
Object Type (object)
Group Name (class)
Individual Name (id)
and combinations of designators using container-within-container approach.
Individual Name Object Type (id object) #this-id div{}
Group Name Object Type (class object) .this-class a{}
Individual Name Group Name Object Type (id class object) #this-id .this-class a{}
Other selectors follow a train of descendents and ancestors to arrive at the selection group.
.class1 .class2 .class3 object
(this part is a little fuzzy because sometimes you need the ancestors, and other times you don't)
Finally a special trick for navigation menus
.sub-menu a:hover > ul {display:hidden;} /*hide the hover feature for smartphones/
For hover mode on a sub menu item you wish to hide it until you hover over its parent. Later you will want to use 'display:inline-block;' or 'block;' for mobile devices since hover does not work on these devices.
OVERRIDE A STYLE
When you declare a style for a selector and then want to remove part of that style, you can simply declare it again and use the style 'none'.
Example: Begin by setting color, background color, font and other major styles that will permeate all elements regardless of screen size. Then repeat the selector for the smaller screen and change only those styles that are to be changed.
.main-navigation a{color:white;background:blue; font-weight:normal;font-size:12px;}
Minimal code to get the job done requires both a top-down sequence and an outer-to-inner selection strategy for selectors and styles.
RESPONSIVE LAYOUT BASED ON SCREEN SIZE
To get css to respond to screen size, use this command
@media screen and (min-width:600px){
/*code styles here for all screens larger than 600 pixels*/
}
PUTTING IT TOGETHER
Note: To follow this code example, create a child theme and copy the style.css file from twentytwelve into the child theme. This way you will retain your style with any theme updates.
twentytwelve theme uses top-down to designate navigation for smart phone styles first and then overrides these styles for screens larger than a minimum width. It begins with showing the Menu button for smartphones.
/* Navigation Menu above other navigation groups/.main-navigation {/*set styles for navigation container) margin-top: 24px; margin-top: 1.714285714rem; text-align: center;}.main-navigation li { /*set display for all navigation link items/ margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; font-size: 0.857142857rem; line-height: 1.42857143;}.main-navigation a { /*set text color for all links in the menu/ color: #5e5e5e;}.main-navigation a:hover,.main-navigation a:focus {/*set hover text color for all links in the menu/ color: #21759b;}.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {/*hide menu for smartphones—overridden later/ display: none;}.main-navigation ul.nav-menu.toggled-on,.menu-toggle {/*display toggle button for smartphones—overridden later/ display: inline-block;}
/* Minimum width of 600 pixels. Now override styles for all screens larger than smartphones*/@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {/*style for all top level links/ border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; display: inline-block !important;/*this displays the top level navigation links/ text-align: left; width: 100%; } .main-navigation ul {/*new style for link containers/ margin: 0; text-indent: 0; } .main-navigation li a, .main-navigation li {/*display all links/ display: inline-block; text-decoration: none; } .main-navigation li a {/*re-style all links/ border-bottom: 0; color: #6a6a6a; line-height: 3.692307692; text-transform: uppercase; white-space: nowrap; } .main-navigation li a:hover, .main-navigation li a:focus { /*change text color for hover/ color: #000; } .main-navigation li {/*re-style margins and locations for navigation links/ margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; } .main-navigation li ul {/*re-style sub-headings for hover/ margin: 0; padding: 0; position: absolute; top: 100%; z-index: 1; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .main-navigation li ul ul {/*re-style sub-sub-headings for hover/ top: 0; left: 100%; } .main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation .focus > ul {/*display settings for hover elements/ border-left: 0; clip: inherit; overflow: inherit; height: inherit; width: inherit; } .main-navigation li ul li a {/*re-style sub-heading elements for normal screens/ background: #efefef; border-bottom: 1px solid #ededed; display: block; font-size: 11px; font-size: 0.785714286rem; line-height: 2.181818182; padding: 8px 10px; padding: 0.571428571rem 0.714285714rem; width: 180px; width: 12.85714286rem; white-space: normal; } .main-navigation li ul li a:hover, .main-navigation li ul li a:focus {/*re-style hover colors for sub menu items/ background: #e3e3e3;/*—example of more selective elements to override/ color: #444; } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {/*display style for primary
color: #636363;/*element link same as for current link /
font-weight: bold;/*so you know which primary link was selected/ } .menu-toggle { /*turn off the menu button for normal screens/ display: none; }
}
I hope this article helps you code better CSS.
