Banner Text Formatting

Site URL: https://rabbit-indigo-e9dr.squarespace.com/config/design/custom-css

Hi! I'm trying to build out a prototype for a client in squarespace, and have struggled a bit with custom CSS (total novice). I've attached a PDF of my desired layout (build in InDesign [shame on me]) as well as a screenshot of the resulting index page within the Bedford template. My question is:

• Can I set banner text as H1, H2, H3 with CSS? If so - any ideas re: the code I would need to add? 
  • I'd love for the top to be left justified, large and orange;
  • The second to be left justified, smaller, blue, with enough padding to clear the woman's face
  • and the third to be centered and white
• Any suggestions outside of custom CSS that you think would help? Maybe posters or collages? 

Super specific and annoying, but figured it couldn't hurt to ask. Appreciate any and all direction you may be able to offer as I am absolutely at a loss on this! 

Add to Page Settings > Advanced > Header

<style>
  /* first banner */
  #home .desc-wrapper p {
    text-align: left;
}
  #home .desc-wrapper p * {
    font-size: 4em;
}
  /* banner 2 */
  #about .desc-wrapper {
    padding-left: 15vw;
    text-align: left;
}
  #about .desc-wrapper strong {
    color: blue;
    font-size: 2em;
}
  /* banner 3 */
  div#new-page * {
    color: white;
}
</style>

Thank you so so so much Tuanphan!! This is so incredibly helpful and you were so kind to take the time to do this for me. I really and truly appreciate it.