What Is CSS And How To Style Your Page?23Nov 18
CSS stands for Cascading Style Sheets, it is one of the most common way to style your web page. Here in this article you will come to many things about the CSS. You will also come to know about three common methods for styling your code. And you will come to know that how these methods differ from each other.
As we already mentioned earlier in our previous articles that the html file you create may look different on different browsers. The is that the browsers may have different default styles. But keep in mind that the default styles look plain, we want something which looks professional and outstanding. We need to style our web page in good way and for that CSS is one of the best way to do so. However, there are also other ways by which you can style your page such as,
You can add style to your page by using style attribute. But if you do so, it’s really going to be messed up. So, the best way to style is Cascading Style Sheets.
Cascading Style Sheets:
You can use Cascading Style Sheets in order to style your web page. It has different rules that can be applied on multiple elements.
Selector is used to select the part of page which you want to style. Such as, if want to style the h1, then it would be the selector.
After selector now you have to select the property. It simply means that which property you want to change or style for example; color, background color etc.
After selecting the property now you have to give value to the property for example; if you selected the property back and then give its value “black” etc.
Following is the example where these three rules are applied:
Color : red ;
Note: These three rules or methods are very important. And never forget to put colons, semicolons and bracket.
Rules of Syntax:
Following are the rules of syntax.
1- Brackets, semicolons and colons are important.
2- Good editors can make difference by displaying the code in different colors.
Note: When you are writing codes, you can also put comments:
/ Like this way you can put a comment/
Do we use multiple properties?
And the answer is yes, we can use multiple properties. But don’t forget to separate them by the semicolon (;).
Color : red ;
Background color : orange;
The “Cascading” parts of CSS:
1- Browser default.
2- Inline style.
3- Internal style in the
4- External style sheets.
As discussed earlier that every browse has different default style. But this default style is plain.
Inline style is to style the elements using style attributes. This can really be going to messed up so, it’s better to avoid this and go for the next option.
3-How internal style sheets works?
In internal style sheets the styling is done within thetag. Then in the tag you will need
Note: You can use this method only when you are have less pages. But if you are have many pages like hundreds of pages, then it’s difficult to go to each page and style it. So, what would you do in such case? No need to be worry because you can use External Style Sheets for it.
4-How external style sheets works?
Here you will no more need to use style tag. You can put rules in external files and link to the page you want to style. The link to style sheet is put in head section. Styles are applied to all elements in all files that links to the style sheet.
Note: Now the style sheet will not solve like .html, it will now save as .css file.
Now here in last we are going to discuss the which rule will have the precedence.
Keep in mind always that the most recent rule will have the precedence. Suppose if one selector is defined in two external files the rule from the most recent one will have the precedence. Same it is in the case if one selector has more than one rule.
How to override recent rule?
Some time you don’t want that any later rule should apply or you want your rule not be changed. So, in this case to override the later rule you can sue !important attribute.
Color : red ;
Font-family : Time New Roman !important;
In this way even there is some rule late but it will remain as it.