TTG Pages creates six pages that serve as the basis of your web site. It creates Home, Galleries, Services, About, Info, and Contact pages.
If you know anything about html, you probably know that the visible part of the page is contained within the <body> tag; the page your viewers see starts with the opening <body> html tag and ends with the closing </body> tag.
Each page created by Pages is also assigned a CSS ID.
For example, the opening body tag for the Contact page looks like this:
<body id=”about” class=”clearfix”>
The ID for the About page is “about.”
Similarly, the ID for the Home page is “home”, the ID for the Services page is “services”, the ID for the Galleries page is “galleries”. You get the idea.
What this means is that you can style each of these pages individually with custom css. Say you want a different background color or background image for your About page. Or perhaps you want the H1 headings on your Contact page to be a different color or font. Or you want to “frame” the image on your Info page with a large amount of padding and a thick border.
All you need to do is to add the appropriate css to your custom.css file.
Some examples
To change the color of the H1 heading on the Contact page:
#contact h1 {
color: red;
}
To change the background color of the About page:
body#about {
background-color: #87CEFA;
}
To frame the image on that Info page:
#info img {
background-color: white;
padding: 30px;
border: 5px solid black;
}
Using the right selector, you can custom style any element on the page. You just need to figure out what selector to use. That’s where developer tools like the Inspector come in. You can read about using the Inspector here.
