Relative Position Property

Relative Position Property

The relative value of the position property specifies how the element will be positions relative to how it would have been positioned by default. 

It is used in combination with a direction (top, bottom, left, and right).

Let's view an example of relative position in action:

CSS Code

div {

  background-color:#FF00FF;

  width:250px;

  height:60px;

}

p {

}

 

The HTML code,

<div>

  <p>Example to show relative position.

</div>

The Output is as follow:

Type the above code and see the output (Default Position).

Example2

div {

  background-color:#FF00FF;

  width:250px;

  height:60px;

}

p {

  position:relative;

  top:15px;

}

<div>

  <p>Example to show relative position.

</div>

The Output is as follow:

Type the above code and see the output (Using Relative Position Property).

Absolute Position Property

Absolute Position Property in Cascading Style Sheet

The absolute value of the position property means that the element will be displayed in the same location within the browser, with the location being determined by top, bottom, left, or right properties.

The element will move with the rest of the content when scrolling. As an example, you will see a red ball 550 pixels from the top of the browser and 400 pixels from the left of the browser.

The code for this is:

p {

  position:absolute;

  top:50px;

  left:600px;

}

The HTML code,

<div>

  <p><img src="red-ball.jpg">

</div>

depicts that the image you see that is 50px from the top of the browser and 600px from the left of the browser. Please notice that as you scroll up and down and page, the red ball moves along with the rest of the page.

This is different from when we specify {position:fixed;}, when the red ball stays in the same place as the rest of the page moves.

Position Property in CSS

Position

The position property specifies what kind of position is used. Possible values include:

• Static (default): indicates that the element will be placed at the default location. Please note that if static is specified, values for the top, bottom, right, and left properties will have no effect.
• Absolute: places an element in relation to the actual browser window. The position of the element moves along with the rest of the content when the page is scrolled.
• Relative: specifies how the element will be positions relative to how it would have been positioned by default.
• Fixed: places an element in relation to the actual browser window. The position of the element remains fixed even when the page is scrolled.

From the list of possible values, we can see that the position property by itself does not have a lot of value. After all, what does {position:relative;} mean if there is no information on what it is relative to? 

So, clearly additional properties are needed to complement the position property.

They are as follows:

• top
• right
• left
• bottom
• overflow
• z-index
• absolute value

Link Property using CSS

Link

The default style for a link is blue font with an underline. This is, however, not always ideal. There are times when we want links to have a different style. This can be achieved using the following selectors:

• a:link: Specifies how the link looks if the page it links to has not yet been visited. 
• a:visited: Specifies how the link looks if the page it links to has already been visited. 
• a:hover: Specifies how the link looks like when the user mouses over the link. 
• a:active: Specifies how the link looks like when the user clicks on it.

Let's take a look at the following declaration:

a:link {color:#ffffff; text-decoration:none;}

a:visited {color:#aaaaaa; text-decoration:none;}

a:hover {font-size:20; color:#cccccc; text-decoration:underline;}

a:active {color:#bbbbbb; text-decoration:underline;}

What this means is the following:

1.  When the page is first loaded, the font color is white.
2.  Once the link is visited, the font color becomes black.
3.  When you mouse over the link, font size becomes 20, font color becomes grey, and an underline appears.
4.  When you click on the link, font color becomes silver, and the underline remains.

Word Spacing in CSS

Word-Spacing

The word-spacing property controls the amount of space between words.

For example, with a CSS declaration of,

p {

  word-spacing:5px;

}

The following HTML,

<html>

<head></head>

 <body>

<p>Words here are separated by 5px.</p>

</body>

</html>

will render the following Output :-

Words here are separated by 5px.

Text Transform in CSS

Text-Transform

The text-transform property controls how upper and lower cases are displayed. Possible values are:

• capitalize: capitalizes the first letter in a word
• uppercase: makes the entire word upper case
• lowercase: makes the entire word lower case
• none: no transform is performed

For example, if we apply each of the following CSS style to the text "this is a CRUIZE SHIP", we get the following:

CSS Declaration      

p {

  text-transform:capitalize;

}

Output 

This Is A Cruize Ship.

p {

  text-transform:uppercase;

}

Output 

THIS IS A CRUIZE SHIP

p {

  text-transform:lowercase;

}

Output 

this is a cruize ship.

Text Indent in CSS

TEXT-INDENT

The text-indent property specifies how much space to indent before the first line of the text in a block. Both length and percentage can be used. For example, with a CSS declaration of,

p {

  text-indent:15px;

}

The following HTML,

 <html>

<head> </head>

<body>

<p>This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

</p>

</body>

</html>

The Output displayed is as follow:

This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

Text Decoration in CSS

Text-Decoration

The text-decoration property specifies how text is decorated. Possible values are:

• underline: adds an underline to the text
• overline: adds a line on top of the text
• line-through: adds a line through the middle of the text.
• blink: causes the text to blink.

Examples below:

CSS Declaration      

p {

  text-decoration:underline;

}

Output 

An underline example.

p {

  text-decoration:overline;

}

Output 

An overline example.

p {

  text-decoration:line-through;

}

Output 

A strikethrough (line-through) example.

Text Alignment in CSS

Text-Align

The text-align property specifies how text is justified. Possible values are:

• Left: left-justified
• Right: right-justified
• Center: text is centered
• Justified: text is both right- and left-justified

Examples below:

CSS Declaration      

p {

  text-align:left;

}

Output

This sentence will be left-justified.

p {

  text-align:right;

}

 Output

This sentence is right-justified.

p {

  text-align:center;

}

Output

This sentence will be centered aligned.

p {

  text-align:justify;

}

 Output

This sentence will be fully-justified.

Letter Spacing and Line Height in CSS

Letter Spacing

The letter-spacing property specifies the amount of space between characters. For example, with a CSS declaration of,

p {

  letter-spacing:8px;

}

The following HTML,

<p>8px between letters</p>

renders output as 

8  px  between  letters

Line-Height

The line-height property specifies the amount of space between lines. For example, with a CSS declaration of,

p {

  line-height:30px;

}

The following HTML,

<p>30px between line 1<br>and line 2.</p>

renders output as

30px between line 1

and line 2.

Direction in CSS

The direction property specifies the text direction. Possible values are 'ltr' and 'rtl'.

For example, with a CSS declaration of,

p {

  direction:ltr;

}

The following HTML,

<p>Left Side Direction</p>

renders output as follow

Left Side Direction

With a CSS declaration of,

p {

  direction:rtl;

}

The following HTML,

<p>Right Side Direction</p>

renders output as follow

Right Side Direction

Class verses ID

Class vs ID

• The difference between ID and class is that an ID selector can be called only once in a document, while a class selector can be called multiple times in a document.
•  The second difference is that ID can be called by Javascript's  getElementByID function. 
• There is no hard rule on when to use ID and when to use Class.
• Use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID. 
• Class and ID names are both Case Sensitive. For example, .classabc and .ClassABC are two different classes.

ID in CSS

ID

ID is specified by including a number sign (#) before the selector name.

The syntax for declaring an ID selector is as follows:

#[ID Name] {

  property:value;

  ...

}

For example,

#footer {

color:#bbbbbb;

}

To apply this style to the HTML, using the following code:

 <html>

<head> <title> </title>

</head>

<body>

<p id="footer">This is a sample using an ID selector.</p>

</body>

</html>

The above HTML code renders:

This is a sample using an ID selector.

Multiple Class Declaration

In Cascading Style Sheet we can specify multiple classes to a particular attribute mentioned inside a Div Tag.

Multiple Classes

It is possible to include multiple classes at the same time. For example, assuming we have the following CSS declaration,

.applylarge {

  font-size:20px;

}

.applyred {

  color:#aaaaaa;

}

the following HTML,

<p class="applylarge applyred">This is an example of multiple classes.</p>

This would render following Output,

This is an example of multiple classes.

Class in CSS

Class

Class is specified by including a period (.) before the selector name.

 The syntax for declaring a Class selector is as follows:

.[Class Name] {

  property:value;

  ...

}

For example

.abc {

color:#bbbbbb;

}

To apply this style to the HTML, using the following code:

<html>

<head>

<title> </title>

</head>

<body>

<p class="abc">This is a sample using a Class selector.</p>

</body>

</html>

The above HTML code renders the output as follow:

This is a sample using a Class selector.

We can also specify different instances of a class selector.

This is achieved by using the following syntax:

[Type Selector].[Class Name] {

  property:value;

  ...

}

For example, if we have the following CSS declaration,

b.special {

  color:#aaaaaa;

}

i.special {

  color:#bbbbbb;

}

The following HTML,

<html>

<head>

<title> </title>

</head>

<body>

This shows how <b class="special">different instances</b> of a selector <i class="special">can be specified</i>.

</body>

</html>

The Output will be as follow:

This shows how different instances of a selector can be specified.

CSS Class Declaration

CSS Class Declaration for Div and Span Tag.

Example for Div Tag.

We declare class “Large” in css as follow:

.large {

  color: #00FF00;

  font-family:arial;

  font-size: 4pt;

}

The HTML code

<html>

<head> <title> </title></head>

<body>

<div class="large">

  This is how class is declared inside DIV.

</div>

</body>

</html>

The Output is as follow

  This is how class is declared inside DIV.

Span Tag Class Declaration with example.

For example, if we have the following CSS declaration:

.largefont {

  color: #aaaaaa;

  font-family:arial;

  font-size: 6px;

}

The HTML code

<html>

<head> <title> </title></head>

<body>

Span is not at the <span class="largefont">block level</span>

</body>

</html>

gets displayed as

Span is not at the block level.

Division Tag - Span Tag

Division Tag

• Div is Short Form of Division Tag.
• The <div> element defines logical division within the document.
• These means when you see or use a div tag, you are indicating that the enclosed content is a specific section of the webpage.
• Now a day’s instead of table <div> tag is used more prominently as it is SEO friendly and also makes the coder job easier.
• Div is a Block Level Element / Content .
• <div> tag is not a replacement of the <p> tag.
• <p> tag is for paragraph, <div> tag is for more general division within a document.
• <div> element is typically used in XHTML and CSS documents to Position portion of the page.

Span

• <span> tag has similar property of <div> tag the only difference is it changes the style of the text it encloses.
• Span tag goes to finer level so we can span to format single character if needed.
• It is not a block level content.

HTML-Upload Audio and Video

Upload Audio – Video on WebPage:

The following example shows how background sound, audio and video can be loaded in a Webpage.

<html>

<head>

<title> Uploading Audio Video to HTML file </title>

</head>

<body>

<bgsound src =”sound.mp3” loop=”-1”>

/* when value to loop is inserted as 1 the audio is repeated once but when the value is inserted as -1 then the background sound will repeat continuously */

<embed src=”sound.mp3”>

/* With the help of embed tag you will be able to view a media player with start, stop, pause and play icon */

<embed src=”video.avi” autostart=”true/false” width=”200” height=”200”>

/* with this tag you can view video files on your webpage */

<embed src=”flash banner.swf” width=”700” height=”200”>

/* This tag views Flash files on the webpage */

</body>

</html>

CSS- Typography

Typography

Just like HTML tag <font>, in CSS file we use different attributes to give spacing, font family, size, color, alignment which will be explained as follow.

Since CSS mainly is used to give effect to the HTML we call it externally in head tag.

The different attributes are explained as below:

Color: To give text color :- Color: #aaaaaa;

Font Family: The font family denotes different types of font such as Arial, Times New Roman, Scripts and so on. Following are some examples of generic font.

Generic Font Name	Example
Sans-serif	Arial, Futura.
Cursive	Zapf-chacery
Fantasy	Critter, Cottonwood
Monospace	Courier, Prestige
Serif	Times New Roman, Garamond

Font Size:

• We don’t use absolute, cm, mm, inches, points. (They are used for prints).
• We use relative, pixel (px), percentage (%), em (ems).(They are used for Website).
• By Default 16px = 100% = 1em (default).
• Similarly 8px = 50% = 0.5 em.

Font Style: You can use Italic / Oblique which are similar in effects as font style.

Font Weight:

• It displays the text in normal, bold view.
• The attributes used for font weight are Normal, Bold, Bolder, Light, Lighter, 100 to 900.
• Font weight from 100 – 400 will show the text in normal format where as text with weight 500 – 900 will be displayed in Bold format.

Font –Variant: We can display the text in Normal format or in small caps.

Text align:With these attribute we can position the text to left, right, center, justify.

Text Transform: You can display the text in Uppercase, Lowercase, Capitalize each letter of the sentence or word.

Text Indent: You can mention the position from where the text should start in the paragraph and how much spacing should be provided from left and right side.

Text Decoration : You can Underline, Overline, Line through, none by using the text decoration attribute.

CSS - Border and List style

Border Style in CSS

• Border in Cascading Style Sheet are of following types:
• Solid, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset, None .
• Border width types: Thick, Thin, Medium, px.

Bullets – Unordered list, Ordered list, and Image.

To type a bullet following code is applied

List-style-type: Decimals, Upper-alpha, Lower-alpha, Upper-roman, Lower-roman,

Disc, Square, Circle, none.

List-style-position: Outside(default) ; Inside.

Example : 1

ol.k1 /* k1 is the class */

{ list-style-type: upper-roman;

}

Output

Before                                   After

1. One                                                I. One

2. Two                                                II. Two

Example : 2

ul.k1 /* k1 is the class */

{ list-style-image:url(“bul.jpg”);

}

Output

Before                                   After

1.One                                     *.One

2.Two                                     *.Two

To Insert Image as Bullet use following method

a) ul.k1{

list-style-type:none;

}

b) ol.k2{

background: url(“abc.jpg”) no-repeat 0px 5px;

padding-left :5px;

}