Writing CSS Files from Scratch | Style Sheets for HTML

Writing CSS is very simple and easy. It is has a very simple syntax to learn. Now though the CSS is also growing as the other languages are, but the basics are very simple to learn and implement in a document.

The CSS style are made up of two things ‘selectors’ and ‘declaration’.
h1{
padding: 5px;
font-size: 16px;
color: red;
}
Or
<div style=”padding: 5px; font-size: 16px; color: red;”> </div>

The code shows and h1 tag or a heading tag. The elements can be targeted in many ways. It can get complex targeting a specific element of a very large page. In this code the h1 is the selector and the code block inside the curly braces is the declaration or rules for this element that how it should look like when it is used in the website. In declaration we have three rules for the browser that how it should display the h1 tag. Every rule has two elements as well. They are called property and value. In above code the padding, font-size and color are properties and then we have colons. On the right side of the colons we got the values for the properties. For example what should be the color of this heading tag in over website and so on. On the end of every rule we have a semi colon which is used to terminate the rule declaration and tells the browser to get another rule.

The white spaces do not matter inside a style sheet like HTML. But you should know that where it does not matters and where it does. Look at the code below where it doesn’t matter that how many white spaces are there.
h1{

font-size: 24px;
color: red;

}

In the above code you can see that there are white spaces before the declaration and after the declaration as well. But it doesn’t matter in this case. It can be used as following code for the same element.
h1{font-size: 24px;color: red;}

So in this case the white spaces are of no use for the browsers. On the other hand it does matter in some cases like the code below is showing.

<style>

div .heading{font-size: 24px; color: red;}

div.heading{font-size: 24px; color: red;}

</style>

Here it does matter because we are targeting a specific selector and space is differentiating between the selectors. If it is removed than the outcome will not be the desired one for us. So as a student of CSS you should look at different Cascading style sheets that are created for different sites. As when using Mozilla Firefox you can right click on the page and then click on view page source tab. Now you will found files with dot CSS (.css) extension click on one of them and look how the CSS of a particular site is written.

Comments