moving custom css to child theme

hello,

i have successfully styled a page using the advanced/custom css options. it looks like this:

.lila .row-fluid {
margin-bottom: 1em;
}

.lila a, .lila .tc-external:after {
color: #006a8e;
}

.lila .topPromo {
display: block;
margin-bottom: 10px;
}
.lila .topPromo img {
box-shadow: 2px 2px 10px #aaaaaa;
padding: 5px;
}

.lila blockquote {
margin: 12px 0;
padding: 16px 0;
border-left: none;
background-color: transparent;
}

.lila .contentSection h3 {
text-shadow: none !important;
}

.lila .buttonContainer {
text-align: center;
}

.lila .contentSection .note {
color : #767676;
font-size : 110%;
font-style : italic;
}

.lila .contentSection .signupForm {
background-color : #033d6b;
margin-bottom : 5px;
}

.lila .rightCol {
background-color : #cad6e0;
color : #033d6b;
margin-bottom : 10px;
}

.lila .half-width.omega {
margin-right: 0;
}
.lila .half-width {
float: left;
margin-right: 1%;
width: 49.5%;
overflow: hidden;
}

.lila .leftCol h3, .lila .rightCol h3 {
background-color : #011f45;
box-shadow: 3px 3px 3px #aaaaaa;
color : #fff;
font-family : \”Myriad Pro Light\”, \”Myriad Pro\”, Helvetica, Arial, sans-serif;
font-size : 1.6em;
font-weight: bold;
margin-top: 0;
margin-bottom : 20px;
padding : 10px;
}
.lila .rightCol h3 {
margin: 0;
}

.lila .rightCol .inner {
padding : 20px;
box-shadow: 3px 3px 3px #aaaaaa;
}
.lila .rightCol ul {
margin-left: 12px;
list-style-position: outside;
}

.lila button.cta {
background-color: lightgreen;
margin: 10px auto 0;
padding: 5px 10px;
}

.lila .signupForm .inner {
overflow : hidden;
padding : 20px;
}
.lila .signupForm #mc-embedded-subscribe {
float : right;
}
.lila .signupForm h2, .lila .signupForm p {
margin-bottom: 10px;
font-family: Arial,Helvetica,sanf-serif;
color: #fff;
}
.lila .signupForm h2 {
font-size: 21px;
font-weight: bold;
text-shadow: none;
line-height: 1.2;
margin-top: 0;
}
.lila .signupForm label {
font-size: 90%;
font-weight: bold;
color: #fff;
}

.lila .pdf-download {
float: left;
margin-right: 8px;
}

.lila .udemyLogo {
float: left;
margin-right: 10px;
}

.lila .youtube {
padding-top: 15px;
padding-bottom: 15px;
}

.bs {
box-shadow: 3px 3px 3px #aaaaaa;
}

i see now that using this way means the css is loaded for every page, which is not good news.

i have made a child theme but am a bit stuck!

i see in ‘page attributes’ we have ‘default template’ and ‘custom page example’. is there a way i can just create the custom page which is IDENTICAL to normal but with my custom css and choose that to avoid all pages loading the custom css that only one page needs?

what is best practice for this theme? I am a newb, and help please make it simple, thanks!!!

MANY THANKS!