How to Edit CSS when you Build a Website | Edit CSS on Website

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.

Video Tutorial

If you prefer to watch a video tutorial, here it is
(otherwise, continue with the written tutorial below):

Written Tutorial

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.

Before:

After:

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.

How to Build a Website in Minutes, Free!

Like what you see? SIGN UP FOR ICONOSITES and Build a Website in Minutes with our Free Website Builder.

  • Layla

    I´m new at this, I haven´t fully understand the purpose of CSS, for what I know it is really amazing to make the website look great and very professional, but is there any other advantage I don´t know that CSS has when it comes to building a website? Thanks for the tutorial it is very easy to understand.

    • Anonymous

      If you’re trying to learn how to create a website, and you’re going to use a website builder like IconoSites - then it is not critical to know CSS.  However, if you want to really customize your website design and have total control over every single design element, then this is where an understanding of CSS comes into play. If you learn CSS, you can almost do anything with your website design.

      • Layla

        Thanks I already tried it and I´m understanding why this feature is important to add CSS when you build a website, focusing in each deatail of the design it makes the site look “advanced” and allow you to give more visual importance to the parts you want the visitors to focus in. Well I´m learning something new.

  • Jack Adair

    You know after reading this I started to build a website, I was kind of afraid about programming but this is actually easy, it takes time to really understand the codes but I just modified my heading and i feel so proud!

    • Anonymous

      Hi Jack, that’s great!  It’s easier than one might think to make a website if you can get past the fear of dealing with CSS and HTML code.  With this website building tutorial, I think it sheds light on how easy this process can actually be.  Just by having a decent grasp on CSS, you can extract a ton of value out of a professional website builder like IconoSites.

  • Vicky

    I can´t believe I actually did it, this tutorial really makes things clear, I was looking for something else, adding a gallery which I already did, and then explored other subjects and ended up here and this actually helped me to create a web site on another level, it looks amazing and it did not take hours.

    • Rose

       If you´re trying to build a website that looks pro and is efficient, there are other features also with iconosites that you should check out, since you liked this CSS editing thing, I´m working on it too, good luck to you.

      • Anonymous

        Thanks for commenting Rose and Vicky.  We have some awesome “how to make a website” tutorials on this blog that you should check out.  Just click on “tutorials” in the top navigation, and you’ll see pages of them.

  • Aaron

    Great tutorial. My question is on the Font-Family, there are 3 or 4 fonts listed in a font family. So I changed the font-family of my main body section to font-family:  Verdana, Tahoma, Arial, Helvetica, sans-serif; — How do I get it to display Verdana or sans-serif, how do I choose a specific font from this family? The CSS snippet is:
    body {     background: url(**layoutdir**body_bg.jpg) left top;     font-family:  Verdana, Tahoma, Arial, Helvetica, sans-serif;     font-size: 62.5%;     text-align: center;}

    • Anonymous

      Hi Aaron,

      CSS will actually display the first font you list.  So in this case it is Verdana.  If for any reason that font is not available on a user’s computer, it will attempt to display the next one listed.

Previous post:

Next post: