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

Welcome back to our article on “How to build a website for free”. We are going to continue where we have left in our previous article. In case you missed part 2 you can still check it: how to build a website for free – css part 2.

In this article, we’re gonna get our hands dirty by coding and explaining the code. From here you will see our website that will start to change from the previous look. I assume by now you understand the syntax of CSS. So without wasting any time let jump to the code.

Global Style

We have an element selector which is the body, we are saying we want to style the whole body element. Font family specifies what font I want to use. For the value, I list all the fonts that I want to use separated by commas in case it can’t find the other one it’s gonna look for the next font specified. On that line I’m not just listing the font name  I’m listing the generic font family as the last option. Why am I doing that? well, a generic font family is a broad class of similar fonts, so in case the first two fonts fail then the browser will have a lot of options of fonts to choose from.

The second property is padding and the margin is set to zero pixels. Why because it’s more like I’m resetting the page because initially, the HTML elements come with their padding and margin. So I want to manage that by myself. Another thing to keep in mind is you need to specify a unit. I know you wondering, but you did not specify a unit. Of course, because it’s zero so it does not make any difference. Once your value gets above zero then you need to specify the unit for your padding or margin to work.

Header Style

Class selector if you can go back to our HTML documents you’ll see that we have passed this value in the class attribute. So why do we do that? because we want to style specific elements. So every element that we’ve passed value in an attribute will be style accordingly. Another thing that you shouldn’t forget is the period(.) this specifies that this is a class. You see passing attributes not only allows you to style it also avoids redundancy. So my first property is width. I’m saying I want all the elements that contain a class “container” to be 85% of the screen width. Second property margin as you already know what it does, maybe you are confused by the value auto. Basically, the value auto all it does is to center the page by looking at the width then centers the page accordingly.

Third property overflow I want it to be hidden so that when the content is big for the screen it does not scroll horizontally. Well, it may not make sense right now but don’t worry as time goes on and you gain experience it will make sense.

Here I’m styling my header element, I think you getting this now. The first property is the background which I want to be that color. You can also specify your colors as RGB(Red, Green, Blue), or by their name (blue, red, etc.) if you know them. The second property is my text which I want to be white. So I’m gonna skip the 3rd property which now you are familiar with. 4th property I want the height of my header to be as big as that.

This “header a” convention may be confusing you now. Here I’m trying to access the anchor element which is the sub child of “header”. You will find that there are many selectors that I’ve done like this because they are a child of a certain element. What am I going to explain here is the “text decoration”. The anchor elements by default comes underlined so with this property I don’t want it underlined so I pass the value none which removes the line.

If we move to “header li”  let start with the property float it has to do with aligning your elements or moving them around. So here we are passing the value left cos we want those links to move to your top left. At the same time will have to move the nav element again to the top right. “Display” will align my links and remove those bullet points on my list.

Last but not least “header a:hover” here I’ve put some effect to make our website a little bit interesting. When you hover your mouse on the links I want them to change color to the specified color, when you remove the mouse they gonna change back to their normal color.

Homework

So this how I leave you “How to build a website for free”. As homework found out other effects except “hover” and play around with them and see how they work.

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

Leave a Reply