ad

Thursday, 26 June 2014

CSS Selectors


                            C. S. S. Selectors

CSS selectors allow you to select and manipulate HTML elements.

CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.

                          The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)
             p{
                     text-align:center;
                      color:red:
                    }

                                   The id Selector

The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
      #para1 {
    text-align: center;
    color: red;
        }
 NOTE:  DO NOT START ID WITH A NUMBER

                                The class Selector

The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed by the name of the class:
In the example below, all HTML elements with class="center" will be center-aligned:
                   .center {
         text-align: center;
        color: red;
    }

CSS Basics

CSS Basics

The basic need of the CSS  are:-
1.Previous knowledge of HTML.
2.A Web browser to view your  your web page.
3.A text editor ex notepad which come with windows . Sublime , Web Matrix, Dreamweaver are also text editor they are recommended because they have some built in codes, suggestions which are used regularly by coders. . 



HTML was never intended to contain tags for formatting a document basically it is used for writing the content and to make content attractive we use CSS.
HTML was intended to define the content of a document, like:
<h1>Heading of the page</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.It takes lot of time and energy to do that
to solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

                                                         How CSS Is Used

 

CSS is used in three ways which are:-
  1. Inline CSS (styling is done in same line)
  2. Internal CSS|(styling is done on the same page)
  3. External CSS(styling is done in different page saved as .css extension) 
We can use CSS only by three ways which are mentioned above.

                                                               Example of Inline CSS 

 <p style="font-weight : bold;"> This text will be bold</p>
this is an example of the Inline CSS.

                                                              Example of Internal CSS

To give  you a proper understanding of Internal CSS I have to write the full HTML code .
<html>
<head>
<title>CSS Basics</title>
<style  type="text/css">
div{
font-weight:bold;
}
span{
font-style: italic;
}
</style>
</head>
<body>
<div>This will show the use of the Internal CSS</div>
this will show the use of <span>Internal CSS</span>
</body>
</html>

                                                          External CSS

To use external CSS we have to make a file in which all code of  CSS is written there.
Then this file should be saved with extension of  .css.
Then we have to give reference to our .css file it should be done as
<rel="stylesheet"type="text/css href="name of the .css file>
This is done to connect HTML page with CSS page without it styling that we have done in our page will not change anything on the HTML page.