Tuesday, October 30, 2012

Text properties

-          Color
We have already discussed the color property in earlier post “Color and background properties”

-          letter- spacing

The letter-spacing property specifies the spacing between the characters. This property is applicable to all elements. Its values are “normal” or length .
letter-spacing: normal   or
letter-spacing: 2em or
letter-spacing:  0.5em
Sample output for letter-spacing is :
T h I s  s a m p l e  t e x t   w I t h  l e t t e r – s p a c I n g   I n   s t y l e

-          text-align

                The text align property specify the horizontal alignment for text enclosed in element. The values for this property are “left”, “right”, “center”,”justify”.
text-align: left

-          vertical-align

vertical-align property specifies the vertical alignment property for text. The values for this property are
Aligns the text to top of the element.
Aligns the text to bottom of the element
Aligns the text to middle of the element
Aligns the text as a subscript in element for example: t2
Aligns the text as a superscript in element, for example: X2
Aligns the baseline of element and parent
Aligns top of element and parents font
Aligns bottom of the element and parents font
With this we can assign any value with unit or %

Vertical-align: 1cm
Vertical-align: 10%

-          text-decoration

The text decoration property allows you to put underline with the characters or strike out any word/sentence in the element. Also allows you to provide any over line or make it blink
This property has the value “none”, “underline”, “overline”, “blink( supported only in FireFox)”, “line-through”
 text-decoration: none

-          text-transform

This property allows you to transform the text using one of the following values:
No transformation will be applied to the text
The text will transformed into uppercase characters
The text will be transformed into the lower case characters
Transform first character of every word into uppercase

Text-decoration: lowercase

-         text-indent

This property is useful with the block level elements such as <p>. Using this property we can define the indentation for first line of the text.
For this property we have to specify the length in units.

For Example:
text-indent: 5cm

-          white-space

The white-space property decides how the blank space in the element handled. This property allows to control line-break and spacing inside the element.
Following are the values for this property:
This is the default value. The text will wrap whenever necessary.
The text will not wrap and will remain in a single line
This is similar to the <pre> tag. The text only wraps on the line breaks.

-          Word-spacing

This property defines the spacing between the words in the element. The value must be in a length format.
Example :
P  { white-space: 2em}

-          line-height
  The line height property helps to decide the spacing between the lines in the given element.
Following are the values of the line-height property:
o   normal
o   number
o   %

P  { line-height: 2px}

Saturday, October 27, 2012

Color and Background Property

In this post we are going to study the following properties of CSS :
1.       color
2.       background
3.       background-color
4.       background-image
5.       background-repeat
6.       background-attachment
7.       background-position

Color Property

The color property applies foreground color to element. For example if you want to apply red color to some part of text in your web page:
             <style type=”text/css”>
.testcolor {color : red}
             <title> Example of use of color using CSS</title>
       <body >
             <div class=”testcolor”> This is sample text for our code.</div>

There are 17 basic colors these are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Colors can be applied to the following ways:
1.       By using name:
                     color: red
2.       By using rgb function:
                    color: rgb(255,0,0)
                               rgb(255,0,0) is equal to color red. In this we have to specify the value of three colors red, green and blue from 0 to 255.
3.       By using Hex code:
                  Color: #FF0000                    
                 The hex code are in range from #000000 to #FFFFFF. Use of hex color codes provides us a large number of colors that can be applied.        

background-color Property

This property applies to the background of the element. You can apply the background –color with name or rgb function or hex codes.
   For example if you want to display a paragraph background as green:
<p style=”background-color:green”>This is sample text </p>

background-image property

This property is used to apply the background image to any element.  To display a background image on your webpage you just need to add the background-image property to the <body> element.
             <style type=”text/css”>
.testbkimage {background-image: url(‘flower.jpg’)}
             <title> Example of use of color using CSS</title>
       <body  class=”testbkimage”>

Following is the output for the above code:


The background repeat property will decide how the image will be repeated. There are four property values: 
 repeat the image along the x-axis on the webpage
 repeat the image along the y-axis on the webpage
Repeat the image along x-axis as well as y-axis on the webpage
Background image will not repeat.

The above image shows that the background image is repeated. The property set for the above examples is: “background-repeat: repeat”.


The background-position property allows setting the position of the image. By default the image is set to left top corner of the webpage. Default property is :
background-position: “0% 0%”.
The background-property will set the starting point of the image. There are various ways for setting the background-position of the image.
background-position: 0% 0% or background-position: 0% 0%
background-position: top left
you can set the property using: left right top bottom.
Background-position: 2cm 2cm.


The background-attachment property will specify the image will remain fixed or scroll with webpage. There are two values this property.
The background image will not scroll when the webpage is scrolled
The background  image will scroll when ever the webpage is scrolled.

background Property

This property will help to put together all the properties under one name.
 If you want a div element with flower.jpg image and the image should be repeated along the x-axis also it should remain fixed then it can be done in following way:
             <style type=”text/css”>
.testbkproperty {background:#ffffff url('flower.jpg') repeat-x left top;}
             <title> Example of use of color using CSS</title>
       <body  class=”testbkproperty”>

Output of the above code is given below:

So we can combining all the properties background-image, background-attachment, background-position at put them under single property “background”.

Tuesday, October 23, 2012

CSS Selectors

Selectors are important part of the style-sheet as they decide styles that are applied to different HTML elements.

1. Univarsal Selector (*)

This selector will be applied to every element of the document. It can be defined as follow:




             <style type=”text/css”>
                * {”background-color: blue; color: red; font-size:20px;}
             <title> Example of Embedded or Inline Stylesheet</title>
       <body >
             <div> This is sample text for our code.</div>

If the universal selector is used with any other selector then it can be it is better to omit it.

2. Element Selector

Any element or HTML tags can be used as a selector. Element\Type selector will match the element present in the document.          
div {font-family: Arial; font-size: 20px;}

Now the above font style will be applied to all the div tags in the document.

   2.1 Grouping

Element selector can be grouped together if it is required to apply same style to all the required elements in the document.
div {font-family: Arial; font-size: 20px;}
span {font-family: Arial; font-size: 20px;}
em {font-family: Arial; font-size: 20px;}

                  Is similar to 

div, em, span {font-family: Arial; font-size: 20px;}


2.2 Parent Child (Parent > child) 

In this case the style is applied to the elements that are child of the parent element.
div >span{font-family: Arial; font-size: 20px;}

Now the style will be applied to the all the <span> tags in the <div>.

  2.3 Element1 + Element2

This type of selector will apply style to the elements that are immediately placed after element1.
div+span{font-family: Arial; font-size: 20px;}

In this the style will be applied to all the span tags placed after the div.

     3. Class Selectors 

           The class selector is a classic method to apply css. It is applied to the elements with attribute class.
Syntax for creating the class is as follows :


Example :
.example1{font-family: Arial; font-size: 20px;}

Above is simple class created.
<div class=”example1”></div>

Above is the example of how a class can be applied to any tag. The class “example1” can be applied to any tag with class attribute.

We can apply the class attribute to specific tag by using following method.
<elementname>.<classname> {property:value}

p.example1{font-family: Arial; font-size: 20px;}

The above class will be applied to only to the <p> element in the document having class=”example1”.
If the <p> tag is implemented without the class example1 the style defined in the class is not applied.

4. ID   Selectors

The ID selector is applied to the element with a specific id applied using id attribute. The id selector can be created using “#”, following is the syntax for creating the ID selector



Simple id with font styles is created and applied to a para tag in the following example:
#idexample{font-family: Arial; font-size: 20px;}

<p id=”idexample”>ID example</p>

      If element is specified before the “id selector” then it is applied only to that element.
<elementname>#<idname> {property:value}

P#idexample1{font-family: Arial; font-size: 20px;}

The above id will be applied to only to the <p> element in the document having id=”idexample1”.
If the <p> tag is implemented without the id “idexample1” the style defined in the class is not applied.

 5. Attribute  Selectors 

      The Attribute selectors will help to select the elements with certain attributes or their value. This is very helpful when we are trying to apply style to selected group of elements having certain attributes.

 5.1 Element[Attribute]
        This will select all the elements having attribute enclosed in [] bracket.


a[target]{font-family: Arial; font-size: 20px;}

5.2 Element[Attribute=Value]
        This will select all the elements having attribute with certain "Value".


div[id=test]{font-family: Arial; font-size: 20px;}

5.3 Element[Attribute ~=Value]
        This will select all the elements having a specific word in its value.


div[class~=test]{font-family: Arial; font-size: 20px;}

 5.Element[Attribute |=value]

        This will select all the elements having attribute that begin with a specific word.

div[class|=test]{font-family: Arial; font-size: 20px;}

 5.5 :lang(value) :

        This attribute selector is used only for the elements having lang attribute and starting with a specific "value".


div:lang(en){font-family: Arial; font-size: 20px;}