Let’s Learn A Styling Language : CSS
In first article we have discussed on HTML and in second article we have developed one small project. If you missed the first article the first article then click here. As committed by me today we will see the CSS. We will understand basics of css and I will also provide some valuable tips and links for further learning. So let’s have some look at CSS.
What is CSS?
The full form of CSS is Cascading Style Sheet. As the name suggests CSS is used for styling the element of HTML. Have you ever seen the stylish page of a professional website? If yes than all the styling is done in CSS.
As a web designer a person has to work a lot on CSS and somewhat less in HTML. In short CSS is how you present your webpage. We will learn the CSS by applying the styling to our first article’s html example. So let’s learn its basics.
First Copy and paste following code into your webpage:
Now open this file into any web browser. You will see the following output:
You will see lot of difference in output after adding the CSS in our HTML webpage now let’s understand it.
Let’s Understand The Example
CSS in always written between <head> tag with <style> tag. Whatever you write between <style> </style> becomes our CSS. You just have write the name of tag and then open a curly braces and start styling it and in last close the curly braces. Now let’s understand the styling of h1 tag.
Styling of h1 tag
Here we first have written h1 tag. This is called selector in term of CSS. When we write only h1 then it means all h1 tag will be covered. It means that you have selected particular tag and you want
to style that tag. CSS is working on property and value. You just have to set the values of particular property.
In this particular example we have set four particular values of CSS and now let’s understand them.
This is the property with which you can change the color of particular tag. Also note that here color means font color. After writing the color you have to write : and give it a value. We have given the value blue and therefore only our h1 tag’s font color is blue. Also note that the line made of property and value must end with ;. This is syntax of CSS. Also note that CSS is case-sensitive. Color is different than color.
As the name suggests it is a property to set the background color of a particular tag. Here we have set it red and therefore our h1 tag’s background is red.
Font-size property come with two flavor either you can set it in pixels of in percentages. Here we have used pixels and we will see percentages in this example only.
Float property says that in your container where you want you content to be rendered. Here left means on the right side other content will get a position. Although here the effect is void because we have used <br/> tag between h1 and p tag. If you are curious about the effect that remove the <br/> tag and see the effect.
Styling of P tag
You may have question in mind that if I have too h1 tag and I want to style them differently than how can I do that here is the answer. To whatever tag you want to style just write class=???whatever name you choose???. Then after in class tag write the same name preceding ‘.’. And start styling it. Here background – color and font-size properties are same. Let us see the border property.
This is the new way of giving one property to multiple value although in every property this is not possible. Here solid is of what type of border we want, pixels means the thickness of border and yellow is color.
This article was written with an aim to give you some insights in CSS. I recommend you to learn further and visit the w3schools.