Sunday, September 7, 2014

DEVELOPING CSS 2

color and background properties:
These properties allow us to specify the foreground color and background of an element.
Background may be colors or images.background properties should allow authors to position a background it and declare whether it should be fixed with respect to
------------------------------------------------------------------------------------------------------------------------------
property name                                                                     value
------------------------------------------------------------------------------------------------------------------------------
color                                                                                color name or RGB value
------------------------------------------------------------------------------------------------------------------------------
background-color                                                             color name or RGB value  
------------------------------------------------------------------------------------------------------------------------------
background-image                                                            url("url of the image")
-----------------------------------------------------------------------------------------------------------------------------
background-repeat                                                          repeat,repeat-x,repeat-y,repeat-z
------------------------------------------------------------------------------------------------------------------------------
background                                                                    any or all of the above properties
--------------------------------------------------------------------------------------------------------------------------

Box properties:
The css box model describes the rectangular boxes that are generated for elements in the documentary.Each box has a content area and optional surrounding adding border and margin areas.The size of each area is specified by properties defined below
The properties will be based on the margin,border and padding as well as their relative positions i.e,top ,bottom,left and right.

DEVELOPING CSS 1

css 2.1 has more than 90 properties.They are broadly categorized into 5 groups .
properties :
(1)front
(2)text
(3)box
(4)color and background
(5)classification

font properties:The following table shows some of the basic font properties and values.
-----------------------------------------------------------------------------------------------------------------------
property name                                              .                value
 -----------------------------------------------------------------------------------------------------------------------
font-family                                                                   sans-serif,airal
-----------------------------------------------------------------------------------------------------------------------
font-style                                                                      normal,italic
------------------------------------------------------------------------------------------------------------------------
font-variant                                                                   normal,small-caps
----------------------------------------------------------------------------------------------------------------------
font-weight                                                              normal,bold,bolder,lighter,100,200,--900
----------------------------------------------------------------------------------------------------------------------
font-size                                                                  xx-small,x-small,small,medium,large,
                                                                               x-large,xx-large,or size measurement
---------------------------------------------------------------------------------------------------------------------
font                                                                         any or all of the above properties
----------------------------------------------------------------------------------------------------------------------


Text properties: defined in the following table effect the visual presentation of character,spaces,words and paragraphs.
 ---------------------------------------------------------------------------------------------------------------------
properties name                                                             value
 ---------------------------------------------------------------------------------------------------------------------
word-spacing                                                              normal |<length>| inherit
 ---------------------------------------------------------------------------------------------------------------------
letter-spacing                                                               normal |<length>| inherit
----------------------------------------------------------------------------------------------------------------------
text-decoration                                                            none|underline| overline|line-through|
                                                                                   blink|inherit
---------------------------------------------------------------------------------------------------------------------
vertical-align                                                                base line|super|sub|top|text-top|
                                                                                   middle-bottom|text-box
---------------------------------------------------------------------------------------------------------------------
text-transform                                                              none+capitilize|uppercase|lower case
----------------------------------------------------------------------------------------------------------------------
text-align                                                                      left|right|conter|justify|inherit
----------------------------------------------------------------------------------------------------------------------
text-indent                                                                   <lenght>|<percentage>|inherit

DEVELOPING CSS


A style sheet contains a set of statements that specify the presentation of a document.These statements are called css rule sets.The syntax to write a statement /css rule is [selector{declaration;declaration;-------}]
The css rule set also called rule consists of a selector followed by declaration block.a declaration block starts with left curly brace and ends with matching right curly brace in between there must be a list of 0 or more semi colon seperated declarations.a declaration is either empty or consist of a property name, followed by a colon , followed by a value i.e,selector{font-size:20px;color:green;}.

Different types of selectors:
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)
eg:-<html>
<head>
<style>
p {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

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":

eg:- <html>
<head>
<style>
#para1 {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>

</html>
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:
eg:-
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

In the example below, all HTML elements with class="center" will be center-aligned:
These are basic selectors and there are lot more are present. In the next posts you will get more details about css.