A perfect dish is not cooked without salt or sugar and so these two ingredients are most important part of our kitchen. Without them, we could not imagine living a single day.
CSS and JS are the same important for a website. A perfect design is not perfect without them. You can ignore one but couldn’t be left both at the same time.
CSS(salt) and js(sugar) have their own benefits, features and provide us the facility to decorate a web page.
Today we are going to learn about CSS in WordPress and Genesis framework. We will also learn to use conditional CSS on a site.
Simple CSS
CSS can be of two types 1. class and 2. id
1. class = <div class=”demo”>Content</div>
.demo {
width: 10px;
}
2. id = <div id=”demo”>Content</div>
#demo {
width: 10px;
}
In the CSS, a class selector is a name preceded by a full stop (‘.’) and an ID selector is a name preceded by a hash character (‘#’).
The difference between a class and an ID is that a class can be used to identify more than one element, whereas an ID can be used to identify only one element.
Here what you can learn more about this difference from CSS-tricks https://css-tricks.com/the-difference-between-id-and-class/
Here are some of the common CSS class name you should to know about.
a {
color: #0073e5;
}
a:focus,
a:hover {
color: #333;
text-decoration: none !important;
}
a:before {
content: " ";
display: table;
}
a:after {
content: " ";
display: table;
}
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus {
transition: all 0.2s ease-in-out;
}
p {
margin: 0 0 20px;
padding: 0;
}
ol,
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
hr {
border: 0;
border-collapse: collapse;
border-top: 1px solid #eee;
clear: both;
margin: 30px 0;
}
b,
strong {
font-weight: 700;
}
/* Quotes */
blockquote,
cite,
em,
i {
font-style: italic;
}
mark {
background: #ddd;
color: #333;
}
blockquote {
margin: 30px;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
font-size: 3rem;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
/* Embed Image, Videoo, Iframe , Image Object */
embed,
iframe,
img,
object,
video,
.wp-caption {
max-width: 100%;
}
img {
height: auto;
vertical-align: top;
}
figure {
margin: 0;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem;
font-size: 20px;
}
/* Body */
body>div {
font-size: 18px;
font-size: 1.8rem;
}
body {
background-color: #fff;
color: #333;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.625;
margin: 0;
}
/* Text Selection
--------------------------------------------- */
/* Mozilla based browsers */
::-moz-selection {
background-color: #000;
color: #fff;
}
/* Works in Safari */
::selection {
background-color: #000;
color: #fff;
}
/* Input form style
--------------------------------------------- */
::-moz-placeholder {
color: #333;
opacity: 1;
}
::-webkit-input-placeholder {
color: #333;
}
/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
background-color: #333;
border: 0;
color: #fff;
cursor: pointer;
font-size: 16px;
font-size: 1.6rem;
font-weight: 600;
padding: 15px 30px;
text-decoration: none;
white-space: normal;
width: auto;
}
button:focus,
button:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
.button:focus,
.button:hover {
background-color: #0073e5;
color: #fff;
}
/* Tables
--------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 40px;
width: 100%;
word-break: break-all;
}
tbody {
border-bottom: 1px solid #eee;
}
td,
th {
text-align: left;
}
td {
border-top: 1px solid #eee;
padding: 6px;
}
th {
font-weight: 400;
padding: 0 6px;
}
td:first-child,
th:first-child {
padding-left: 0;
}
/* Screen Reader Text
--------------------------------------------- */
.screen-reader-shortcut,
.screen-reader-text,
.screen-reader-text span {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.widget_search input[type="submit"]:focus {
background: #fff;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto !important;
color: #333;
display: block;
font-size: 1em;
font-weight: bold;
height: auto;
padding: 15px 23px 14px;
text-decoration: none;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/*! Media
--------------------------------------------- */
@media only screen and (max-width: 480px) {}
@media only screen and (min-width: 767px) {}
@media only screen and (min-width: 960px) {}
/* Print Styles
---------------------------------------------------------------------------------------------------- */
@media print {
*,
*::before,
*::after {
background: transparent !important;
box-shadow: none !important;
color: #333 !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]::after,
a[href^="#"]::after,
.site-title>a::after {
content: "";
}
thead {
display: table-header-group;
}
img,
tr {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 2cm 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
blockquote,
pre {
border: 1px solid #999;
page-break-inside: avoid;
}
.content,
.content-sidebar {
width: 100%;
}
button,
input,
select,
textarea,
.breadcrumb,
.comment-edit-link,
.comment-form,
.comment-list .reply a,
.comment-reply-title,
.edit-link,
.entry-comments-link,
.entry-footer,
.genesis-box,
.header-widget-area,
.hidden-print,
.home-top,
.nav-primary,
.nav-secondary,
.post-edit-link,
.sidebar {
display: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
orphans: 3;
page-break-after: avoid;
page-break-inside: avoid;
widows: 3;
}
img {
page-break-after: avoid;
page-break-inside: avoid;
}
blockquote,
pre,
table {
page-break-inside: avoid;
}
dl,
ol,
ul {
page-break-before: avoid;
}
}
This is just some of the basic CSS classes and Column Classes are not included. There is various column class includes in default Child theme or you can use a plugin like Shortcode column.
Explanation:
- a – link <a href=”/”>Link</a>
- p – paragraph <p>This is a paragraph</p>
- button – A button <button>Click me!</button>
- ul li ol – List tag
- b – bold <b>I am Bold </b>
- img – Image <img scr=”path to image url”>
- embed – content from other site like Youtube
- ::selection – Text Selection
- ::placeholder – Input form
- ::before – something before a class
- ::after – something after a class
- @media – Limit a CSS to a spefic screen size.
- @media print – when Print mode is on.
- !important – This line in a CSS is very important.
Identify Conditional CSS
Finding a conditional CSS is not hard but can be a time taking work when you have multiple conditional tags at different places.
The first thing you need to find the div class under where a content is. and Check the responding CSS to get a list.
You can create your own CSS class based on different class and div id. It is recommended not use !important rule for every CSS class you write. Make stylesheet to load at a different priority.
WordPress Conditional CSS
WordPress includes various Conditional Tags which can be used to design the specific page without compromising with other page CSS.
Check the <body class=”here “> to find the list of various tags for that particular post or page.
Conditional Tags includes for various post and pages
1. Home
We can use ‘.home’ or ‘#home’ depends on the content we are adding on the front page.
2. Blog
We can use ‘.blog’ or ‘#blog’ depends on the content we are adding on the Post page.
3. Archive
We can use ‘.archive’ or ‘#archive’ depends on the content we are adding on the front page. The CSS will be for global archive page including category and tag archive or we can use separate CSS tag like:
a) archive – CSS includes ‘.archive-tag’, ‘tag-#’
(#=id or tag name)
b) category – CSS includes ‘.archive-category’, ‘category-#’
(#=id or category name)
4. single (post) – CSS includes ‘.single ‘ , ‘single-post’ , ‘postid-#’.
5. page – CSS includes ‘.page ‘ , ‘page-id-#’.
6. Search – .search {some css }
There will be additional CSS in everybody class. Make sure you are working on the correct one.
Genesis Conditional CSS
Genesis also includes some important CSS classes to make our life easier working with CSS. Some popular CSS includes
1. .content-sidebar
.content {
float: left;
width: 65%;
}
.sidebar {
float: right;
width: 30%;
}
2. .sidebar-content
.content {
float: left;
width: 65%;
}
.sidebar-content .content {
float: right;
}
.sidebar {
float: right;
width: 30%;
}
.sidebar-content .sidebar {
float: left;
}
3. .full-width-content
.full-width-content .content {
width: 100%;
padding: 10px 50px 40px 50px;
}
4. .js
.genesis-nav-menu .menu-item {
display: inline-flex;
margin: 5px;
}
.js .genesis-nav-menu .menu-item {
display: block;
float: none;
position: relative;
}
Real example:-
@media only screen and (min-width: 960px) {
/* Site-Inner
--------------------------------------------- */
.site-inner {
margin-top: 70px;
max-width: 1140px;
}
/* Content
--------------------------------------------- */
.content {
float: left;
width: 65%;
}
.sidebar-content .content {
float: right;
}
.full-width-content .content,
.landing-page .content {
float: none;
margin-left: auto;
margin-right: auto;
}
.full-width-content .content {
width: 100%;
padding: 10px 50px 40px 50px;
}
/* Sidebar
--------------------------------------------- */
.sidebar {
float: right;
width: 30%;
}
.sidebar-content .sidebar {
float: left;
}
}
As the class name clearly shows what a conditional CSS is about. You can always tweak it as per your needs.
Resources:
https://codex.wordpress.org/CSS