This template's main contents are inside the 'body' tag divided into nine sections (e.g., header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.





If you would like to edit the color, font, or style of any particular elements, you would first copy the 'id' or 'class' of that element and go to the main.css file. Then you need to find the particular 'id' or 'class' of that element and make the changes you need.


Example 1: Suppose you want to change the color of all the content headings of a section called #services. Do the following:

									.content h3{
										color: #samplecolorcode;
									} 


Example 2: Suppose you want to change the background-color of the image overlay of a section called #projects. Do the following:

									#projects .img_container .overlay{
										background-color: rgba(79,79,79,.5);
									}


If you find that your new style is not overwriting, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. See below:

									#services .content a {
										color: #samplecolorcode;
									}


So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours. You can also force your changes to happen by applying !important after the value of the particular property. See below:

									.content a {
										color: #someColor!important;
									}



Attachments:

html-structure3.jpg (image/jpeg)
html-structure2.jpg (image/jpeg)
html-structure.jpg (image/jpeg)
html_structure.png (image/png)
html-structure-1.jpg (image/jpeg)
html-structure-2.jpg (image/jpeg)
html-structure-3.jpg (image/jpeg)
html-structure-1.jpg (image/jpeg)
html-structure-2.jpg (image/jpeg)
html-structure-3.jpg (image/jpeg)