In this website building tutorial, we’ll show you how to edit CSS when you build a website. Even if you already have a website, this tutorial will show you how to edit the CSS on your website. We’ll do this using the IconoSites website builder, where almost anyone can build a website in minutes with no technical knowledge whatsoever.
If you prefer to watch a video tutorial, here it is
(otherwise, continue with the written tutorial below):
1. Login to your Iconosites account then click Designs in the menu. Please see screenshot.
2. Next click the Edit Pen button. Please see screenshot below.
3. Next scroll downward till you find CSS & HTML Code section. It should look something like the image below.
I. Change the Style of the H1 (Heading 1)
4. Next locate in the following code H1 section. Please see screenshot below.
5. You may change the color of the main Header by changing its value. You can also change the size of the text by changing its current value. Please see screenshot below and compare it to previous image.
In this example the value of the color was changed from #003961 to #363636. And the size, from 3.3em to 4.em.
6. Make sure to save your work by clicking the SAVE button then checkout your webpage now. You should be able to see changes.
The Main Header should now be like the image below
II. Change the Border Style of Your Images
1. In your CSS & HTML code section, locate the following code. Please see screenshot below.
2. Simply change the hexadecimal value, found right after “solid”. Please see screenshot below.
3. Make sure to save your work by clicking the SAVE button or else this won’t take effect in your webpage.
4. Checkout your page. You should be able to change the Content Image border. In this example, the border of the image is now Red.
You now know how to build a website and edit the CSS. You are now empowered to make all sorts of changes to your website, so go ahead and start playing with it today - it’s the only way to continue your learning and ultimately become a master in CSS editing.