HTML.co.uk

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.

External Style Sheets- Advantages and disadvantages
The best thing that is very good about the Cascading Style Sheets is that you will be able to use them in order to keep your website consistent. One of the easiest ways to do this is to import or link an external style sheet. If the same external style sheet is used in every page of your site, then you will be sure that all the pages of the site will have the same style.

Advantages
At once, you will be able to control the feel and look of many documents. This will be very much helpful if you work with a team of people. It is hard to remember many style rules and while you may have printed the style guide, it is pretty tedious and inefficient to continuously flip through it in order to determine.
You will be able to create classes of some styles that can be easily used on many elements of HTML.
You should not give emphasis to different things on the pages if you use the special windings often, you will be able to use windings class set up in the style sheets in order to create.
The styles can be easily grouped to be much more efficient.

Disadvantages
The external style sheets increases that download time, when they are large enough
The complexity of the site will be increased if you have less number of styles.
Just like the table rendering, you have to still wait until the whole style sheet is loaded prior to the page display
These sheets get big quickly as it is hard to tell when the style is no longer will be in use as it is not deleted when the pages are removed.

Creating an External Style Sheet

These sheets are created with very much similar syntax to the document level style sheets (in the <head>). You have to include both the declaration and selector as well. The syntax for the rule will be ‘selector {property: value ;}’.

These rules must be saved into the text file with an extension of .css. Actually, this is not required but it is good habit so that it will easier for you to recognize the sheets in the listing.

Once the style sheet document is ready, you have it to the WebPages and this can be done in two ways:

1. The HTML tag <link> should be used to link the style sheet. This has some attributes such as href, type and rel. rel tell what you are going to link, type defines the MIME-type and href will be the path to .css file.

2. Importing

Within the document level sheet, you can use an imported sheet so that you will be able to import the attributes of the external style sheet while you will not lose any specific documents. This can be called it in the similar way in calling the linked style sheet but it must be within the document level style.