Let's Know About CSS for Presentation

Cascading Style Sheets (CSS) Orientation :

You've heard style sheets mentioned quite bit already, and know we 'll finally put them  to work and start giving our pages some much needed style.

CASCADING STYLE SHEETS (CSS) is the w3c standard for defining the presention of documents written in HTML , and in fact any XML language .

CSS is a separate language with its own syntax. IN this ARTICLE we'll cover CSS concepts in brief that  will help you to make your website a charming look.

The Benefits Of CSS : ............

Using CSS Have a lot Of Benefits :

• Less work .You can change your site's look by editing one style sheet.
• More accessible sites. You can markup your content meaningfully, making more accessible for non -visual or mobile devices.
• Responsive sites: you can make your site responsive as your device

 How Style Style Sheets works:

   It's as easy as 1-2-3!!

1. Start with a document that has been marked up in html.
2. Write style rules for how you'd like certain elements to look .
3. Attach the styles rules to the documents when the browser displays the document, it follows your rendering elements .

     1. marking up the document..

     

you know lot about marking up content from the previous articles .

you also know that the mark up creates the structure of the documents ,some time called the structural layer, upon which the presentation layer can be applied .

In this and the upcoming articles you'll see that having an understanding of your document's structure and the relationship between elements is central to your works as a style sheets author.

 

2. Writing The Rules :

 A style sheets up of one or more styles instruction that describes how an element or group of elements should be displayed.

The following example contain two rules . The first makes all the h1 elements in the document green and the second makes all the p elements of this documents should be in small and sans-serif font.

                                                     h1 { color: green;}

                               p{font-size:small; font-family: sans-serif;}

in CSS there are two main rules are the selector and the declaration.

THE SELECTOR identifies the elements to be affected , and THE DECLARATION provides the rendering instructions. as shown in above fig.

3. Attaching the styles to the document

 That is three ways to attaching styles sheets in the documents are giving bellow ::

INLINE:

In inline  style of css you can declare the styles particular for one elements using style attribute as shown in fig. .

you can add multiple properties ,just separate them with semicolons. Like this

       < .h1 style="font: algerian; margin: 2px; color:green;">hello dear

INTERNAL OR EMBEDDED STYLE :

This is the type of style sheets we worked with in the exercise. it is placed in a documents in the head section using style elements.and its rules apply only on that document.the example is shown in above fig.

External style :...

An external style sheet is separate, text only document that contain no. of style rules. it must be named with the .css suffix. the .css document is then linked to in one or more documents in this way

all files in a website may be share the same style sheet.

This the most powerful and preferred method for attaching style sheet to content. 

                    A QUICK HISTORY OF CSS