This is the custom css I used to customize the Frontier theme shown on the previous page:
______________________________________

/* Enter Your Custom CSS Here */

#container {
margin: 0 auto;
box-shadow: 0 0 0px #000;
}
body {
background-color: #505050;
color: #303030;
font-family: roboto, Sans-serif;
font-size: 16px;
line-height: 1.5;
}
.single-view .entry-content {
font-family: armata, Sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.8;
letter-spacing: -0.3px;
}
.entry-title,
.entry-title a {
text-decoration: none;
color: #7494bf;
font-size: 20px;
font-family: 'roboto condensed';
font-weight: 700;
text-transform: uppercase;
}
h1 {
font-size: 36px;
color: #7494bf;
text-transform: capitalize;
font-weight: normal;
}
h2 {
font-size: 28px;
color: #7494bf;
text-transform: capitalize;
font-weight: normal;
margin-top: 20px;
}
.frontier-widget {
background-color: #e0e0e0;
margin: 0 0 10px;
padding: 8px;
border: 0px;
box-shadow: none;
word-wrap: none;
}
.widget-title {
background-color: #7494bf;
margin: -8px -8px 8px;
padding: 4px 8px;
color: #EEE;
font-family: 'Roboto Condensed', Sans-serif;
font-size: 16px;
text-shadow: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}
.widget-title a {
color: #FFF;
text-decoration: none;
}
#top-bar {
background-color: #7494bf;
border-bottom: none;
padding: none;
min-height: 1px;
width: 100%;
}
#header {
margin-top: -29px;
}
#bottom-bar {
background-color: #e0e0e0;
color: #000;
width: 100%;
min-height: 34px;
border-top: 2px solid #000;
text-shadow: none;
}
#nav-main {
background-color: #7494bf;
width: 100%;
border-top: 5px solid #ffffff;
border-bottom: none;
padding-left: 0px;
line-height: 1.2;
}
#nav-main .nav-main a {
display: block;
padding: 8px 14px;
color: #FFF;
font-family: 'Roboto Condensed', Sans-serif;
font-size: 16px;
text-shadow: none;
}
#comment-header, #respond, #no-comments, .comment-body {
background-color: #FFF;
margin: 0 0 10px;
padding: 8px;
border: none;
box-shadow: none;
}
.blog-view, .single-view, .author-info, .archive-info, .form-404 {
background-color: #FFF;
border: none;
box-shadow:none;
margin: 0 0 10px;
padding: 10px;
-ms-word-wrap: none;
word-wrap: none;
}
hr {
width: 600px;
color: #bbc9dc;
background-color: #acc7ed;
height: 4px;
}
______________________________________________

You can copy and paste the above if you so wish. To make any changes from the parent stylesheet you can copy and paste the code into a child theme or custom css plugin and make the changes there. As I've previously mentioned, you will need a child theme to copy and paste php code. You can make changes to the parent php, but if you update the theme they will be lost and you will have to make the changes again in the updated php.

There is a lot in a stylesheet that you don't need to understand, all you need are the basics, like changing fonts, font sizes, font and background color, headers, margins, etc. Make a test site, install a custom css plugin and with a little patience and effort you can get away from WYSIWYG and make your site look unique.

For instance, if you want to change the font family and font size, in most stylesheets, but not all, it will come under Typography. Copy and paste into your custom css and make your changes there, update the custom css, refresh the page or post and see if the changes have been made. If they have, great, if not, try something else.

Increasing you knowledge of css is all about trial and error, as long as you have a test site and a custom css plugin (don't worry about a child theme at this stage) to experiment with you've nothing to worry about, if things don't work out, no harm done, just go back and start again. Once you get your first successful css change you will find things will become easier.

Just one thing, make sure any change to fonts are web fonts, there are some that aren't, they may look pretty on your browser but completely different on a visitor's to your site. I tend to use Google fonts, which I've used in this tutorial, as they are all web compatible. If you do use them you will need to copy and paste the code in the header php under <head>. Don't worry about changing the php code at the moment as (hopefully) you're only using a test site.

In Part 3 we'll take a look at some sans serif fonts.