CSS Advanced tutorial 14 : CSS Pseudo Elements

There are four pseudo elements. These are :

• First letters 
• First lines
• Before 
• after

First letter :
The first-letter pseudo element applies to the first letter of an element. for example


p:first-letter {
font-size: 2em;
float: left;
}


This will create drop caps for paragraph.


First line :
The first-line pseudo element applies to the top line of an element. For example


p:first-line {
font-weight: bold;
}


This will create a bold first-line for paragraph.


Before and after :
The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML. The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imgname). For example


blockquote:before {
content: open-quote;
}


blockquote:after {
content: close-quote;
}


li:before {
content: "Dragon : "
}


p:before {
content: url(images/img.jpg)
}

CSS Advanced tutorial 13 : Page Layout in CSS

Page layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't, it's just different and actually makes much more sense.

What is Positioning :
The position property is used to define whether an element is absolute, relative, static or fixed. The value static : is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.
relative : is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.
absolute : pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. The absolute element can be placed anywhere on the page using top, right, bottom and left.
fixed : behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, fixed elements should stay exactly where they are on the screen even when the page is scrolled.

Floating :
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page, but it can also be used with bigger chunks. For example

<div style="float:left; width:200px;"> 
    <p>  
         This is paragraph inside first div.      
   </p>
</div>



<div style="float:right; width:300px;"> 
    <p>  
         This is paragraph inside second div.      
   </p>
</div>

This will float the first div to the left side of web page, and float the second div to the right side of web page.

CSS Advanced tutorial 12 : The Display Property

The 'Display' property is used for visual representation of HTML elements. The most fundamental types of display are inline, block-line and none and they can be manipulated with the 'display' property and the values inline, block and none.

inline :   Elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline. For example


#title {
        display : inline;
        color : blue;
}


#desc {
             display : inline;
             color : black;
}


The HTML elements with id 'title' and 'desc' will display next to each other.


block : puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line. For example



#title {
        display : block;
        color : blue;
}


#desc {
             display : block;
             color : black;
}


The HTML elements with id 'title' and 'desc' will display above and below to each other.



none : It doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations , alternate stylesheets or advanced hover effects. For example



#title {
        display : none;
        color : blue;
}



The HTML element with id 'title' will not display in browser.


Difference between display and visibility :
The display and visibility property behaves differently in browser. The 'display: none' and 'visibility: hidden' vary in that 'display: none' takes the element completely out of play, where as 'visibility: hidden' keeps the element and its flow in place without visually representing its contents. For example


<p> This is first paragraph. </p>
<p style="display:none;"> This is second paragraph. </p>
<p > This is third paragraph. </p>


Above code will display the first and third paragraph above and below to each other. If you remove the display:none; from second paragraph then there will be some re-arrangement done with HTML elements. Third paragraph will move down and there will be shown some text between first and third paragraph. 



<p> This is first paragraph. </p>
<p style="visibility:hidden;"> This is second paragraph. </p>
<p > This is third paragraph. </p>


Above code will display first and third paragraph above and below to each other. But there will be a gap between them, This gap is equal the size of second paragraph. If you remove visibility:hidden; from second paragraph then you will see the text in place of gap. No HTML element re-arrangement will be done.



Other display types :
There are some other types of display that you can use with HTML elements. These are


list-item :  It displays as in the way that you would usually expect an li HTML element.
run-in :  It makes an element either in-line or block-line depending on the display of its parent. It doesn't work on IE and Mozilla.
compact : It makes the element inline or block-line depending on the context.
marker : It is used exclusively with the :before and :after pseudo elements to define the display of the value of the content property. The automatic display of the content property is already marker, so this is only useful if you are overriding a previous display property for the pseudo element.