How to build a website for free – CSS(Part 2)

Welcome back to our article on “How to build a website for free”. We are going to continue where we left on our previous article, in case you missed part 1 you can still go check it: how to build a website for free – css part 1. When I recall in part 1 we didn’t code, we did a lot of set up. So in this article again we’re not gonna do much coding, we’re just going to familiarize ourselves with our new language without wasting any time. Let’s jump to it.

Syntax

Our new language follows a different syntax than our HTML, well before you write anything let me explain further the syntax in above image. The first line is your comment which doesn’t affect your program and it’s not compulsory to write comments. It is only there to remind you in future when you edit your code, to know what that line does. And it also tells someone who’s editing your scripts what the line does. So it is always a good practice to write comments.

Selector, Curly braces

The second line specifies which html element you want to style if you still remember what is an html element. In case you forgot you can go check it out on the previous article. After specifying your selector you open the curly brace and close it so that you don’t forget. Because if you left it open then your styling won’t work.

Property, Value & Semi colon

Inside our curly braces we have a property where we tell our website what we want to style. When we are done telling the website that, we put a colon then we write our value. This is where we tell how and how much we want to style our website. If you have more values then you separate them with a comma. Last but not least we close our statement with a semi colon if you didn’t close your line then it won’t style your website.

And again we didn’t do much coding as well in this article, but I heard to make this short so that everything can make sense and you can digest it very well. 

One last thing to do, I think we should do before we close this article, is to go back and open your index.html file with your text editor(notepad).

Link element

Go to your head element and update it by adding the link element same as above. So what we’re actually doing there we are telling our HTML file where it going to find our style.css. So without that line of code our HTML file won’t be styled.

Homework

As a homework, go find out different ways that you can style your HTML file beside the method that I’m showing you right now.

As always you can find that on this website and learn more: w3schools

Leave a Reply