Technology Quest: October 2012

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

Value	Descrption
top	Aligns the text to top of the element.
Bottom	Aligns the text to bottom of the element
Middle	Aligns the text to middle of the element
Sub	Aligns the text as a subscript in element for example: t₂
Super	Aligns the text as a superscript in element, for example: X²
Baseline	Aligns the baseline of element and parent
text-top	Aligns top of element and parents font
text-bottom	Aligns bottom of the element and parents font
Length	With this we can assign any value with unit or %

Example:

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”

Example

text-decoration: none

- text-transform

This property allows you to transform the text using one of the following values:

Value	Description
None	No transformation will be applied to the text
uppercase	The text will transformed into uppercase characters
lowercase	The text will be transformed into the lower case characters
Capitalize	Transform first character of every word into uppercase

Example:

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:

Value	Description
normal	This is the default value. The text will wrap whenever necessary.
nowrap	The text will not wrap and will remain in a single line
pre	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:

<html>

<head>

.testcolor {color : red}

</style>

<title> Example of use of color using CSS</title>

<head>

<body >

<div class=”testcolor”> This is sample text for our code.</div>

</body>

</html>

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.

<html>

<head>

.testbkimage {background-image: url(‘flower.jpg’)}

</style>

<title> Example of use of color using CSS</title>

<head>

</body>

</html>

Following is the output for the above code:

Background-repeat

The background repeat property will decide how the image will be repeated. There are four property values:

Value	Description
repeat-x	repeat the image along the x-axis on the webpage
repeat-y	repeat the image along the y-axis on the webpage
repeat	Repeat the image along x-axis as well as y-axis on the webpage
no-repeat	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”.

background-position

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.

background-attachment

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

Value	Description
fixed	The background image will not scroll when the webpage is scrolled
scroll	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:

<html>

<head>

.testbkproperty {background:#ffffff url('flower.jpg') repeat-x left top;}

</style>

<title> Example of use of color using CSS</title>

<head>

</body>

</html>

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

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:

Definition

}

Example:

<html>

<head>

* {”background-color: blue; color: red; font-size:20px;}

</style>

<title> Example of Embedded or Inline Stylesheet</title>

<head>

<body >

<div> This is sample text for our code.</div>

</body>

</html>

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.

Example:

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 :

.<classname>{property:value}

Example :

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

Above is simple class created.

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}

Example:

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

#idname{property:value}

Example:

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}

Example:

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.

Example:

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

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

Example:

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.

Example:

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

5.4 Element[Attribute |=value] :

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

Example:

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

Example:

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

Technology Quest

Tuesday, October 30, 2012

Text properties

Saturday, October 27, 2012

Color and Background Property

background Property

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 (*)**

Example:

2. Element Selector

3. Class Selectors

4. ID Selectors

5. Attribute Selectors

Think