On Page 8 we saw an example of the Twenty Thirteen theme customized and modified. Below is the custom css code that I used to change the theme's appearance:
________________________________________

/* Enter Your Custom CSS Here */
p {
width: 600px;
font-family: 'armata';
font-size: 15px;
color: #000000;
line-height: 23px;
text-align: left;
font-weight: 400;
margin-bottom: 8px;
}
h1 {
font-family: 'playfair display';
font-size: 30px;
color: #c6562a;
text-transform: capitalize;
margin-top: -20px;
}
hr {
border 0;
width: 600px;
height: 3px;
background-color: #c6562a;
margin-top: -25px;
margin-bottom: 10px;
}
.entry-content {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.entry-title {
font-family: 'armata';
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
color: #c6562a !important;
margin-bottom: 60px;
}
.nav-menu li a {
font-size: 16px;
font-family: 'armata';
font-weight: 700;
color: #c6562a;
text-transform: uppercase;
font-style: normal !important;
}
.navbar {
background-color: #eeb047;
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
.widget {
background-color: #eeb047;
}
.nav-menu li a:hover {
background: #c6562a !important;
color: white;
}
#masthead .site-title {
color: #962e0a;
font-family: armata;
font-size: 60px;
font-weight:700;
text-decoration: none;
}
body {
background: #a7a7a7;
margin-top: 100px;
margin-bottom: 100px;
}
.site-description {
font: 300 20px armata;
color: #ffffff !important;
text-transform: capitalize;
}
.widget .widget-title {
background: none repeat scroll 0 0 #c6562a;
margin: 0 0 10px;
text-align: center;
color: white;
font: 400 16px armata;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 10px;
text-align: center;
}
.site-footer {
background-color: #c6562a;
height: 80px;
}
.site {
background-color: #fde68e !important;
border-left: none;
border-right: none;
margin: 0 auto;
max-width: 1600px;
width: 75%;
background: #ffffff;
}
.site-footer a{
font-family: 'armata';
font-size: 12px !important;
text-align: left;
padding-left: 20px !important;
color: #ffffff !important;
}
.sidebar a {
font-family: 'armata';
color: #c6562a;
font-size: 15px !important;
text-align: left;
padding-left: 0px;
}
.sidebar {
color: #000000;
}

__________________________________________

Note:
In the custom css code "-webkit-hyphens: none", which I recommend you use if using text aligned left, I have changed this from auto to none, as the whole word should, when using text aligned left, be carried over to the next line, and using hyphens, or word breaks, in text aligned left is not good typography, the main purpose of text aligned left being to avoid word breaks.

If you are using justified text, you can dispense with this and leave the stylesheet "as is", as using hyphens, or word breaks, in justified text is used to keep space between words at a reasonable level.