As we continue from where we have left on our article “How to build a website for free”. We still gonna continue with the styling of our website. In case, you missed the previous chapter you can still go back to check it out: how to build a website for free – CSS part 3.
In this article, we gonna carry over our header styling. So let get into it, I hope you are prepared and that some of the concepts make sense now.
Our first selector is an ID, how do I know?, by the pound(#) sign, basically what I’m saying is I’m styling all the elements that contain this ID. I’m gonna skip some of the properties that you are familiar with so that I don’t bore you with repetition. And also it will be better for you to figure out some by yourself.
Let start with a background image, with the value of URL, within the URL we also pass a value basically which is a URL. Here we are telling our property to go look for this image which is in our folder “images”. Not only you can locate your images in a local folder, but you can also locate them on a cloud. The second property is background-size with a value cover, what I’m saying is that I want this image to fill the whole container horizontally. If I don’t specify that what gonna happen is that if my image has a small width is going to repeat itself horizontally. The next property is background position with a value center like it says it’s centering the image. With this property of background, you can do all this in one line. Here I wanted you to get the feeling of this property.
Now we gonna style our H1. You can see how I specified my h1 I’m doing that because it is within the #header-image ID. Like the previous explanation, I’m gonna skip again some of the properties.
Let start with letter-spacing I want more space between my letters. Let move to text-shadow here I’m just being fancy well our first value is the horizontal shadow, meaning where do you want your shadow, left or right, the second value is the vertical shadow, again you want your shadow up or down, the next value is blur-radius you want your shadow to be a blur so it looks realistic or cool. The last value is the color of our shadow which is black in our case. The next selector is probably the same thing as the above.
Well as homework as you can see above you probably noticed that there’s some redundancy that I’ve done. And I know you’ll be smarter than me and reduce those lines. Otherwise, let continue to the next article (CSS – part 5).
I hope you enjoy the article as much as I enjoyed writing it as always don’t be afraid to revisit the previous article for reference and if you want to learn more you can always check this website: w3schools