Thursday, May 10, 2012

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.

Wednesday, May 9, 2012

CSS Beginner tutorial 11 : Background Images



There are a number of properties involved in the manipulation of background images. But the property background can deal with them all. For example


body {
background: white url(http://www.yoursite.com/images/bg-image.jpg) no-repeat top right;
}


There are some other properties, which you can use instead using above single property. These properties are as follows.


  • background-color
  • background-image 
  • background-repeat 
  • background-position


The details of these properties are below.


background-color : 
It is the color of background.


background-image : 
It is the location of the image.


background-repeat : 
It will set, how the image repeats itself. This can be 

  • repeat
  • repeat-y         (repeating on the 'y-axis', above and below) 
  • repeat-x         (repeating on the 'x-axis', side-by-side)
  • no-repeat       (which shows just one instance of the image).

background-position : 
It can be top, center, bottom, left, right or any sensible combination, just like as above.


CSS Beginner tutorial 10 : Shorthand Properties

Shorthand Properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces. For example, margin, padding and border-width allow you to set margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left; For example we have following code to set border width. of a paragraph


p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}


This can be summed up into one shorthand property as follows.


p {
border-width: 1px 5px 10px 20px;
}


Further, border-width, border-color and border-style can also be summed up as follow.


p {
border: 1px red solid;
}


By stating just two values in format margin: 1em 10em; , the first value will be the top and bottom and the second value will be the right and left.


Font-related properties can also be gathered together with the font property. For example


p {
font: italic bold 1em/1.5 courier;
}


Where the '/1.5' is the line-height.

CSS Beginner tutorial 9 : Pseudo Classes

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links. Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class, simply with a colon in between the selector and the pseudo class. For example property: value;


The four pseudo classes that can be used safely when applied to links are following.


link :
It is for an unvisited link.
visited :
It is for a link to a page that has already been visited.
active :
It is for a link when it is gains focus, for example, when it is clicked on.
hover :
It is for a link when the cursor is held over it.




CSS Code for above four classes are :


a.snow:link {
color: blue;
}


a.snow:visited {
color: purple;
}


a.snow:active {
color: red;
}


a.snow:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}


Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.


Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

Tuesday, May 8, 2012

CSS Beginner tutorial 8 : Grouping and Nesting in CSS


Grouping :
By using Grouping, you can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas. For example, we need to assign same property to different selectors as follows.


h2 {
color: red;
}
.titleclass {
color: red;
}
.descclass {
color: red;
}


By using grouping, we can write them as


h2,  .titleclass , . .descclass  {
color: red;
}


Nesting :
In well structured CSS, there is no need to use many class or ID selectors. Because we can specify properties to selectors within other selectors. For example


#top {
background-color: #cccccc;
}
#top h2 {
color: #ff0;
}
#top p {
color: red;
}


It will remove the need for classes or ID's if it is applied to HTML that looks like as follows.


<div id="top">
<h2>Hello Word !</h2>
<p>This is a paragraph</p>
</div>


By separating selectors with spaces, It is saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red'.

CSS Beginner tutorial 7 : What is Class and ID Selectors

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#). It might look like as follows.


#top {
background-color: #cccccc;
}


.intro {
color: red;
}


The HTML refers to the CSS by using the attributes id and class. It could look something like as follows.


<div id="top">


<p class="intro">This is my text.</p>


</div>


The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.desc will only be applied to paragraph elements that have the class 'desc'.

Monday, May 7, 2012

CSS Beginner tutorial 6 : CSS Borders


Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values of border can be solid, dotted, dashed, double, groove, ridge, inset and outset. For example,

border-style: solid;

You can set the width of border by using border-width property, which is usually in pixels. For example

border-width: 3px;

The four sides of border can be set individually by using these properties, border-top-width, border-right-width, border-bottom-width and border-left-width. e.g

border-top-width : 10px;
border-right-width : 5px;
border-bottom-width : 10px;
border-left-width : 5px;

The color of border can be set by "border-color" property. For example

border-color: red;

After applying all properties to h2 tag, It 'll look like as follow.

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

It will show h2 tag, in browser as follows.


css, borders, style
border

CSS Beginner tutorial 5 : Box Model

The Box Model :
Margins, padding and borders are all part of  the Box Model. The Box Model consists of following patterns.


  • In the middle you have the content area 
  • Surrounding content area you have the padding
  • Surrounding padding you have the border
  • Surrounding border you have the margin.

Visually, it can be represented as follow.


css, box, model
box model


CSS Beginner tutorial 4 : Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
For example, we have following CSS code for h2 tag:

h2 {
margin: 8px;
padding: 10px;
}

<h2>This is secondary Heading.</h2>

Then text inside h2 tag will look like as follow. ( margin and padding are shown with different colors for better understanding, margin is in light and padding is in dark.)


CSS, Margins , Padding , style
margin and padding

The four sides of an element can also be set individually. Following properties you can use, to set the element side individually.

margin-top,  margin-right,  margin-bottom,  margin-left          ( For Margin )  

padding-top,  padding-right,  padding-bottom,  padding-left.   ( For Padding )

Sunday, May 6, 2012

CSS Beginner tutorial 3 : CSS Selectors, Properties, and Values

Selectors are the names given to styles in internal and external style sheets. For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color etc. A value is given to the property following a colon and semi-colons separate the properties. For example


body {
   font-size: 0.7em;
  color: blue;
}


Above code will apply the given values to the font-size and color properties to the body selector. When this is applied to an HTML document, text between the body tags will be 0.7 ems in size and blue in colour. Another example


#desc {
   font-size: 0.5em;
  color: red;
}

The above code will apply the values to all HTML elements having id equal desc. (e.g having id="desc" attribute).

Lengths and Percentages :
There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.


em ( e.g font-size: 2em ) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.


px (e.g font-size: 12px) is the unit for pixels.


pt (e.g font-size: 12pt) is the unit for points.


% (e.g font-size: 80%) is the unit for percentages.


Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches). In case if a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

Saturday, May 5, 2012

CSS Beginner tutorial 2 : Applying CSS to HTML


There are three way, to apply CSS to HTML tags, These are
  1. In-line
  2. Internal
  3. External
In-line :
In-line styles are plonked straight into the HTML tags using the style attribute. For example, they look something similar as follow.
<p style="color : blue"> This is some text. </p>
This will make text color blue inside that paragraph .


Internal :
Internal (or embedded) styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. For example, It look like as follow.


<head>
          <style type="text/css">


          p { color : blue };


          div { text-align : left }


          </style>
</head>
This will make all the paragraphs in the page blue and text inside all div element start from left side.


External :
External styles are used for the whole, multiple-page website. There is a separate CSS file. which has file extension ".css" e.g  mystyle.css , which looks like as follow>




p { color : blue };

div { text-align : left }

This external CSS file must linked to each HTML page. We link CSS file to HTML page  by using <link> tag as follow.

<head>
       <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

CSS Beginner Tutorial 1 : What is CSS


CSS stands for Cascading Styles Sheets, It is a way to style HTML elements. Whereas the HTML is the content, the style sheet is the presentation of that document. Styles don't smell or taste anything like HTML, they have following  format
'property: value' 
For example 
color : blue
It applys to HTML tag as follow:
<p style="color:blue">The sun rises in the east.</p>
There are many properties, which can be applied to HTML tags, to present HTML in different ways.
There are three ways, which can be used to apply CSS to HTML tags, These are:
  1. In-line
  2. Internal
  3. External
We discuss these ways in details in next tutorial.

Wednesday, May 2, 2012

HTML Advanced tutorial 31 : HTML to XHTML

A website can be converted from HTML to XHTML by applying following 6 simple steps.

1. Add a <!DOCTYPE> : 
Add an XHTML <!DOCTYPE> to the first line of every page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Add an xmlns Attribute :
Add an xmlns attribute to the html element of every page.

<html xmlns="http://www.w3.org/1999/xhtml">

3. Change Tags And Attribute Names to Lowercase :
Replace all uppercase tags and attributes with lowercase tags and attributes respectively.

4. Quote All Attribute Values :
In every page, make sure that attribute values are quoted.

5. Close all Empty Tags :
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br/>.

6. Validate XHTML With The W3C Validator :
Before an XHTML file can be validated, a correct DTD must be added as the first line of the file. Validate the document by url here,  http://validator.w3.org/ .
Correct errors if any found.

<<  HTML Advanced tutorial 30 : XHTML Doctypes

HTML Advanced tutorial 30 : XHTML Doctypes

The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. XHTML document consists of three main parts, DOCTYPE declaration, the <head> section, and the <body> section. The basic XHTML document consists of following structure.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> title here </title>
</head>


<body>
</body>


</html>

The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.

Different types of Doctypes :
The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

XHTML 1.0 Strict :
This DTD contains all html elements and attributes, but does not include presentational or deprecated elements e.g font etc. Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional :
This DTD contains all html elements and attributes, including presentational and deprecated elements. Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset :
This Document Type is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 :
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules, e.g to provide ruby support for East-Asian languages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML Advanced tutorial 31 : HTML to XHTML  >>
<<  HTML Advanced tutorial 29 : XHTML Syntax Rules

HTML Advanced tutorial 29 : XHTML Syntax Rules


While coding in XHTML, we must take care of following rules to avoid any error.

1.) Attribute Names Must Be In Lower Case :

<table WIDTH="100%">                     ( This is wrong way )

<table width="100%">                         ( This is correct way )

2.) Attribute Values Must Be Quoted :

<table width=100%>                           ( This is wrong way )

<table width="100%">                        ( This is correct way )

3.) Attribute Minimization Is Forbidden :

<input checked>                                  ( This is wrong way )
<input readonly>
<input disabled>

<input checked="checked" />               ( This is correct way )
<input readonly="readonly" />
<input disabled="disabled" />

4.) The Lang Attribute :
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, then you must also add the xml:lang attribute. For example

<div lang="en" xml:lang="en">Hello word!</div>

5.) Mandatory XHTML Elements :
Following elements are mendatory, in XHTML documents.

  • DOCTYPE declaration.
  • html, head, title, and body elements.

HTML Advanced tutorial 30 : XHTML Doctypes  >>
<<  HTML Advanced tutorial 28 : What is XHTML

Tuesday, May 1, 2012

HTML Advanced tutorial 28 : What is XHTML

XHTML stands for EXtensible HyperText Markup Language. It is almost identical to HTML 4.01. It is a stricter and cleaner version of HTML. It is HTML defined as an XML application. It is Recommended by W3C. It is supported by all major browsers.

The following HTML code does not follow the HTML rules, but it will work fine in a browser.


<html>
<head>
<title>bad page</title>
<body>
<h1>Bad h1 element
<p>This is a paragraph
</body>



New in XHTML :
Following are the few differences in XHTML from HTML.

XHTML Elements Must Be Properly Nested :
In HTML, elements can be improperly nested within each other, for example

<b><i>This text is bold as well as italic</b></i>

While using XHTML, all elements must be properly nested within each other e.g ,

<b><i> This text is bold as well as italic </i></b>

XHTML Elements Must Always Be Closed :
In XHTML, non-empty elements must have a closing tag. For example

<p>This is a paragraph               ( This is wrong way )

<p>This is a paragraph</p>       ( This is correct way )

Empty Elements Must Also Be Closed :
In XHTML, empty elements must also be closed. For example
A line break      

<br>                 ( This is wrong way )         

<br />               ( This is correct way )

An image tag

<img src="img.jpg" alt="image">             ( This is wrong way )

<img src="img.jpg" alt="image" />           ( This is correct )

XHTML Elements Must Be In Lower Case :
In XHTML, tag names and attributes must be in lower case. For example

<BODY>                                              ( This is wrong way )
<P>This is a paragraph</P>
</BODY>



<body>                                                 ( This is correct way )
<p>This is a paragraph</p>
</body> 


XHTML Documents Must Have One Root Element :
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element. Following is the basic document structure used.

<html>
      <head>  



      </head>
     <body> 



     </body>
</html>


HTML Advanced tutorial 29 : XHTML Syntax Rules  >>
<<  HTML Advanced tutorial 27 : HTML Language Code

HTML Advanced tutorial 27 : HTML Language Code

The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers.W3C recommendation assist that, you should declare the primary language for each Web page with the lang attribute inside the <html> tag. For example
<html lang="en">  </html>

while using XHTML, you have to declare language inside the <html> tag in following way.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">    </html>
Abbreviations :
             Abbreviations for languages defined by ISO 639-1 are as fellow.
Language ISO Code
Abkhazian ab
Afar aa
Afrikaans af
Albanian sq
Amharic am
Arabic ar
Aragonese an
Armenian hy
Assamese as
Aymara ay
Azerbaijani az
Bashkir ba
Basque eu
Bengali (Bangla) bn
Bhutani dz
Bihari bh
Bislama bi
Breton br
Bulgarian bg
Burmese my
Byelorussian (Belarusian) be
Cambodian km
Catalan ca
Chinese (Simplified) zh
Chinese (Traditional) zh
Corsican co
Croatian hr
Czech cs
Danish da
Dutch nl
English en
Esperanto eo
Estonian et
Faeroese fo
Farsi fa
Fiji fj
Finnish fi
French fr
Frisian fy
Galician gl
Gaelic (Scottish) gd
Gaelic (Manx) gv
Georgian ka
German de
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Haitian Creole ht
Hausa ha
Hebrew he, iw
Hindi hi
Hungarian hu
Icelandic is
Ido io
Indonesian id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kannada kn
Kashmiri ks
Kazakh kk
Kinyarwanda (Ruanda) rw
Kirghiz ky
Kirundi (Rundi) rn
Korean ko
Kurdish ku
Laothian lo
Latin la
Latvian (Lettish) lv
Limburgish ( Limburger) li
Lingala ln
Lithuanian lt
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maltese mt
Maori mi
Marathi mr
Moldavian mo
Mongolian mn
Nauru na
Nepali ne
Norwegian no
Occitan oc
Oriya or
Oromo (Afan, Galla) om
Pashto (Pushto) ps
Polish pl
Portuguese pt
Punjabi pa
Quechua qu
Rhaeto-Romance rm
Romanian ro
Russian ru
Samoan sm
Sangro sg
Sanskrit sa
Serbian sr
Serbo-Croatian sh
Sesotho st
Setswana tn
Shona sn
Sichuan Yi ii
Sindhi sd
Sinhalese si
Siswati ss
Slovak sk
Slovenian sl
Somali so
Spanish es
Sundanese su
Swahili (Kiswahili) sw
Swedish sv
Tagalog tl
Tajik tg
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga to
Tsonga ts
Turkish tr
Turkmen tk
Twi tw
Uighur ug
Ukrainian uk
Urdu ur
Uzbek uz
Vietnamese vi
Volapük vo
Wallon wa
Welsh cy
Wolof wo
Xhosa xh
Yiddish yi, ji
Yoruba yo
Zulu zu

HTML Advanced tutorial 28 : What is XHTML  >> 
<<  HTML Advanced tutorial 26 : HTTP Status Messages