Tags for this article: borders, cascading style sheets, css rules, css tutorial, declaration, font, page layout, selector, using css
For you to store style information there are three places. For all the three places, the syntax will be the same but for the sake of clarity, here we are going to discuss the styles that are placed in of the document.
Rules
1.The entire style information must be stored within the </style> and <style> element. By doing so, browser will come to know that the information stored is for styles.
2.you have to include type attributes always
This attributes will indicate what type of style rules you are going to use. The style that is commonly used is CSS but other than CSS, there are other types as wee such as (JSS, XSL and many others).
3.In the comment tags, enclose all the style rules
By doing so, it ensures you that the older browsers even by mistake will not display style rules.
Mainly, the style rule is comprised of 2 things, the declaration and selector.
Declaration – this is a specific style call that will be helpful to affect the selector
Selector – this HTML element is the one that will be very much affected by the rule.
The syntax for the style rule will be ‘selector {property: value ;}’
So, in order to set all the bold text into red, you can write ‘b {colour: red ;}’
The thing that makes the usage of CSS very easy is that you will be able to group the components together that you like to have the similar style. Take for example: if you want all the H1, H2 and the entire bold text in red, you can write
‘b {colour: red ;}’
‘h1 {colour: red;}’
‘h2 {colour: red;}’
however, with the help of grouping, you will be able to put all of them on the same line.
‘b, h1, h2 {colour: red;}’
you can even group the rule together. Take for example, in order to make all the h3 text blue and font in Arial, you can write
You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial fonts, you would write:
‘h3 {
font-family: Arial;
colour: blue;
}’
Just for convention, we can put all the rules in separate line but it is not very much required.
Some Common Styles
There are different font attributes that are used commonly.
Font family – this specifies the font face that to be used.
Font-size – it will specify the text size.
Font-style – it will specify whether the text will be displayed in normal, oblique or italic.
Font variant – it will specify whether the text to be displayed in normal or small caps.
Font-weight – it will specify how dark or light the text will be
The other style that is commonly used is the ‘text-decoration’. Along with this tag, you will be able to remove underlines from various links, put the lines through the marked out text or else can make the text blink.