Wednesday, 29 April 2015

MYSQL-query-guidance

--------------------------------------Basic mysql command:------------------------------------------------------
(1)create databse tutorials:

create database tutorials;

(2)crete table employee:

create table employee
(id   int,
 name varchar(200),
 address varchar(200),
 city   varchar(200));


and rename table name use:

rename table  oldtablename  to  newtablename;

(3)how to add new column after creating a table employee:

alter table  employee
add  dob  varchar(200);


(4)how to modify  dob column type form varchar type  to date type:

alter table  employee
modify  dob  date;

(5)how to modify   id  int type to int primary key  & auto_increment:

alter table  employee

modify  id int primary key auto_increment;

-----------------------------------Advance Query in mysql:------------------------------------------------------

 (1)Order by:

 select *  from  lefttable order by id;

 (2)Group by:

 select  *  from  lefttable group by   id; 

 (3)having clause:

 select  * from lefttable  having id<3; 

 (4)Like :

 select * from lefttable  where name like 'o%';

 (5)Avg:

 select avg(id) from lefttable ;

 (6)Sum:

 select  sum(id) from lefttable;

 (7)Count:

 select count(id) from lefttable;

 (8)Min:

 select  min(id) from lefttable;

 (9)Max:

 select  max(id) from lefttable;

 (10)Lcase:

 SELECT LCASE('Tech on the Net');

 (11)Ucase:

 SELECT UCASE('myteststring');
-------------------Foreign key---------primary  key example---------------
MySQL create table foreign key example

CREATE DATABASE IF NOT EXISTS dbdemo;

USE dbdemo;

CREATE TABLE categories(
   cat_id int not null auto_increment primary key,
   cat_name varchar(255) not null,
   cat_description text
) ENGINE=InnoDB;

CREATE TABLE products(
   prd_id int not null auto_increment primary key,
   prd_name    varchar(355) not null,
   prd_price    decimal,
   cat_id int    not null,
   FOREIGN KEY   fk_cat(cat_id)
   REFERENCES categories(cat_id)
   ON  UPDATE CASCADE
   ON  DELETE RESTRICT
)ENGINE=InnoDB;
--------------------------Adding-----foreign---key--using----alter-----command------------------------------------

 ALTER TABLE test1

 ADD FOREIGN KEY fk_vendor(testid)

 REFERENCES test(id)

 ON DELETE NO ACTION

 ON UPDATE CASCADE;
  



   


on No comments:

Monday, 27 April 2015

Ajax-Login-Form-with-PHP-example

(1)write code for   "loginform.html":

<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
</head>
<body>
  <div class="modal-dialog">
    <div class="modal-content col-md-8">
      <div class="modal-header">
        <h4 class="modal-title"><i class="icon-paragraph-justify2"></i> User Login</h4>
      </div>
      <form method="post" id="login_form">
        <div class="modal-body with-padding">
          <div class="form-group">
            <div class="row">
              <div class="col-sm-10">
                <label>Username *</label>
                <input type="text" id="username" name="username" class="form-control required">
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="row">
              <div class="col-sm-10">
                <label>Password *</label>
                <input type="password" id="password" name="password" class="form-control required" value="">
              </div>
            </div>
          </div>
        </div>
        <div class="error" id="logerror"></div>
        <!-- end Add popup  -->
        <div class="modal-footer">
          <input type="hidden" name="id" value="" id="id">
          <button type="submit" id="btn-login" class="btn btn-primary">Submit</button>            
        </div>
      </form>

 <script>
$(document).ready(function(){
  $('#login_form').validate();  
  $(document).on('click','#btn-login',function(){
    var url = "login.php";      
    if($('#login_form').valid()){
      $('#logerror').html('<img src="ajax.gif" align="absmiddle"> Please wait...');
      $.ajax({
      type: "POST",
      url: url,
      data: $("#login_form").serialize(), // serializes the form's elements.
      success: function(data)
      {
        if(data==1) {              
              window.location.href = "main.html";
        }
        else  $('#logerror').html('The email or password you entered is incorrect.');
              $('#logerror').addClass("error");
        }
        });
    }
    return false;
  });
});
</script>
    </div>
  </div>
</body>
</html>
(2)write code for  "login.php"  file:

<?php

$username=$_POST['username'];

$password =$_POST['password'];

if($username=="om" && $password=="om")
{

echo 1;

}
else
{
echo 0;

}
 ?>
(3)write simple code for " main.html file":
<html>
<head>
<title> this is my simple form</title>
</head>
<body>
<h1>welcome for successful login</h1>
</body>
</html>
on No comments:

Friday, 24 April 2015

CSS-Complete--Tutorial

Css Tutorial:

CSS Syntax:
A CSS rule set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.


Css example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>


CSS Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)


Example
p {
    text-align: center;
    color: red;
}

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single, unique element.
To select an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":

Example
#para1 {
    text-align: center;
    color: red;
}






The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period character, followed by the name of the class:
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {
    text-align: center;
    color: red;
}

You can also specify that only specific HTML elements should be affected by a class.
In the example below, all <p> elements with class="center" will be center-aligned:
Example
p.center {
    text-align: center;
    color: red;
}



Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
you can group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
    text-align: center;
    color: red;
}


Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:
Example
body {
    background-color: #b0c4de;
}

Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {
    background-image: url("paper.gif");
}

If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}





Background Image - Set position and no-repeat
Note: When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}












Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
The default color for a page is defined in the body selector.
Example
body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}



Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
Example
h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Example
a {
    text-decoration: none;
}

It can also be used to decorate text:
Example
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Example
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}


Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
Example
p {
    text-indent: 50px;
}

Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example

p {
    font-family: "Times New Roman", Times, serif;
}



Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:
Example
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the <body> element:
Example
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}


Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example
a {
    color: #FF0000;
}


In addition, links can be styled differently depending on what state they are in.
The four links states are:
  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

When setting the style for several link states, there are some order rules:
  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover


Common Link Styles
In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}


Background Color
The background-color property specifies the background color for links:

Example
a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}









List
In HTML, there are two types of lists:
  • unordered lists (<ul>) - the list items are marked with bullets
  • ordered lists (<ol>) - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers

The type of list item marker is specified with the list-style-type property:

Example

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}







Crossbrowser   Solution:

The following example displays the image-marker equally in all browsers:
Example
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 15px;
}


List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
Example
ul {
    list-style: square inside url("sqpurple.gif");
}

CSS list-style-position Property


Example
Specify that the the list-item markers should appear inside the content flow (results in an extra indentation):

ul {
    list-style-position: inside;
}




Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
   border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table and the <th>/<td> elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
Example
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
Example
table {
    width: 100%;
}

th {
    height: 50px;
}

Horizontal Text Alignment
The text-align property sets the horizontal alignment, like left, right, or center.
By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
Example
th {
    text-align: left;
}

Vertical Text Alignment
The vertical-align property sets the vertical alignment, like top, bottom, or middle.
By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Example
td {
    height: 50px;
    vertical-align: bottom;
}

Table Padding
To control the space between the border and content in a table, use the padding property on <td> and <th> elements:
Example
td {
    padding: 15px;
}

Table Color
The example below specifies the color of the borders, and the text and background color of <th> elements:
Example
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}


The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to add a border around elements, and to define space between elements.
The image below illustrates the box model:


Explanation of the different parts:
  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent
Example
div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Let's style a <div> element to have a total width of 350px:
Example
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Border Width
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
Example
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

CSS outline Property


Example
Set the outline around a <p> element:
p {
    outline: #00FF00 dotted thick;
}

Example
Set the style of an outline:
p {
    outline-style: dotted;
}
Margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Possible Values
Value
Description
auto
The browser calculates a margin
length
Specifies a margin in px, pt, cm, etc. Default value is 0px
%
Specifies a margin in percent of the width of the containing element
inherit
Specifies that the margin should be inherited from the parent element

Note: It is also possible to use negative values, to overlap content.
Margin - Individual sides
In CSS, it is possible to specify different margins for different sides of an element:
Example
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}



The CSS padding properties define the space between the element border and the element content.
Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
Possible Values
Value
Description
length
Defines a fixed padding (in pixels, pt, em, etc.)
%
Defines a padding in % of the containing element
Padding - Individual sides
In CSS, it is possible to specify different padding for different sides:
Example
p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}
Padding - Shorthand property
To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.
The shorthand property for all the padding properties is "padding":
Example
p {
    padding: 25px 50px;
}

Hiding an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout:
Example
h1.hidden {
    visibility: hidden;
}
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

Example
h1.hidden {
    display: none;
}


Changing How an Element is Displayed
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.
The following example displays <li> elements as inline elements:
Example
li 
{
    display: inline;
}


The following example displays <span> elements as block elements:
Example
span 
{
    display: block;
}


Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:
Example
p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 5px;
}


Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal position:
Example
h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Example
h2.pos_top {
    position: relative;
    top: -50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
Example
h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}


Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Example
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}


How Elements Float
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
Example
img {
    float: right;
}

Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
Here we have made an image gallery using the float property:
Example
.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}
Turning off Float - Using Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:
Example
.text_line {
    clear: both;
}

Center Aligning Using the margin Property
Block elements can be center-aligned by setting the left and right margins to "auto".
Note: Using margin:auto; will not work in IE8 and earlier unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
Example
.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}


Tip: Center-aligning has no effect if the width is 100%.
Left and Right Aligning Using the position Property
One method of aligning elements is to use absolute positioning:
Example
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:
Example
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Left and Right Aligning Using the float Property
One method of aligning elements is to use the float property:
Example
.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier when using the float property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the float property:
Example
body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
  • descendant selector
  • child selector
  • adjacent sibling selector
  • general sibling selector
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements: 
Example
div p {
    background-color: yellow;
}

Child Selector
The child selector selects all elements that are the immediate children of a specified element.
The following example selects all <p> elements that are immediate children of a <div> element:
Example
div > p {
    background-color: yellow;
}


Adjacent Sibling Selector
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects all <p> elements that are placed immediately after <div> elements:
Example
div + p {
    background-color: yellow;
}
General Sibling Selector
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements: 
Example
div ~ p {
    background-color: yellow;
}

Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
Example
a.highlight:hover {
    color: #ff0000;
}


CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

p:first-child {
    color: blue;
}

Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
Example
p:first-child i {
    color: blue;
}
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
    property:value;
}

The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block elements.
Example
Format the first line of the text in all <p> elements:
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}







Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
    property:value;
}



Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
    property:value;
}

The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block elements.
Example
Format the first line of the text in all <p> elements:
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

The following properties apply to the ::first-line pseudo-element:
  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The ::first-letter pseudo-element can only be applied to block elements. 
Example
Format the first letter of the text in all <p> elements: 
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes: 
Example
p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}

Multiple Pseudo-elements
Several pseudo-elements can also be combined. 
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color: 
Example
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:
Example
h1::before {
    content: url(smiley.gif);
}
CSS - The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
The following example makes the selected text red on a yellow background:
Example
::selection {
    color: red;
    background: yellow;
}
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
Example
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>





Now let's remove the bullets and the margins and padding from the list:
Example
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Example explained:
  • list-style-type: none - Removes the bullets. A navigation bar does not need list markers
  • Setting margins and padding to 0 to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal navigation bars.
Vertical Navigation Bar
To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:
Example
a {
    display: block;
    width: 60px;
}
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:
Example
li {
    display: inline;
}

Floating List Items
In the example above the links have different widths.
For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements:
Example
li {
    float: left;
}

a {
    display: block;
    width: 60px;
}





<html>
<head>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>



img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Example
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

Example
<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Image Sprites - Simple Example:
In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:
Example
#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
Image Sprites - Create a Navigation List
We want to use the sprite image ("img_navsprites.gif") to create a navigation list.
We will use an HTML list, because it can be a link and also supports a background image:
Example
#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}


Css Tutorial:

CSS Syntax:
A CSS rule set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.


Css example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>


CSS Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)


Example
p {
    text-align: center;
    color: red;
}

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single, unique element.
To select an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":

Example
#para1 {
    text-align: center;
    color: red;
}






The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period character, followed by the name of the class:
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {
    text-align: center;
    color: red;
}

You can also specify that only specific HTML elements should be affected by a class.
In the example below, all <p> elements with class="center" will be center-aligned:
Example
p.center {
    text-align: center;
    color: red;
}



Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
you can group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
    text-align: center;
    color: red;
}


Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:
Example
body {
    background-color: #b0c4de;
}

Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {
    background-image: url("paper.gif");
}

If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}





Background Image - Set position and no-repeat
Note: When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}












Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
The default color for a page is defined in the body selector.
Example
body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}



Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
Example
h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Example
a {
    text-decoration: none;
}

It can also be used to decorate text:
Example
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Example
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}


Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
Example
p {
    text-indent: 50px;
}

Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example

p {
    font-family: "Times New Roman", Times, serif;
}



Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:
Example
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the <body> element:
Example
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}


Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example
a {
    color: #FF0000;
}


In addition, links can be styled differently depending on what state they are in.
The four links states are:
  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

When setting the style for several link states, there are some order rules:
  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover


Common Link Styles
In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}


Background Color
The background-color property specifies the background color for links:

Example
a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}









List
In HTML, there are two types of lists:
  • unordered lists (<ul>) - the list items are marked with bullets
  • ordered lists (<ol>) - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers

The type of list item marker is specified with the list-style-type property:

Example

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}







Crossbrowser   Solution:

The following example displays the image-marker equally in all browsers:
Example
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 15px;
}


List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
Example
ul {
    list-style: square inside url("sqpurple.gif");
}

CSS list-style-position Property


Example
Specify that the the list-item markers should appear inside the content flow (results in an extra indentation):

ul {
    list-style-position: inside;
}




Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
   border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table and the <th>/<td> elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
Example
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:
Example
table {
    width: 100%;
}

th {
    height: 50px;
}

Horizontal Text Alignment
The text-align property sets the horizontal alignment, like left, right, or center.
By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned.
The following example left-aligns the text in <th> elements:
Example
th {
    text-align: left;
}

Vertical Text Alignment
The vertical-align property sets the vertical alignment, like top, bottom, or middle.
By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Example
td {
    height: 50px;
    vertical-align: bottom;
}

Table Padding
To control the space between the border and content in a table, use the padding property on <td> and <th> elements:
Example
td {
    padding: 15px;
}

Table Color
The example below specifies the color of the borders, and the text and background color of <th> elements:
Example
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}


The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to add a border around elements, and to define space between elements.
The image below illustrates the box model:


Explanation of the different parts:
  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent
Example
div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Let's style a <div> element to have a total width of 350px:
Example
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Border Width
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
Example
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

CSS outline Property


Example
Set the outline around a <p> element:
p {
    outline: #00FF00 dotted thick;
}

Example
Set the style of an outline:
p {
    outline-style: dotted;
}
Margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Possible Values
Value
Description
auto
The browser calculates a margin
length
Specifies a margin in px, pt, cm, etc. Default value is 0px
%
Specifies a margin in percent of the width of the containing element
inherit
Specifies that the margin should be inherited from the parent element

Note: It is also possible to use negative values, to overlap content.
Margin - Individual sides
In CSS, it is possible to specify different margins for different sides of an element:
Example
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}



The CSS padding properties define the space between the element border and the element content.
Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
Possible Values
Value
Description
length
Defines a fixed padding (in pixels, pt, em, etc.)
%
Defines a padding in % of the containing element
Padding - Individual sides
In CSS, it is possible to specify different padding for different sides:
Example
p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}
Padding - Shorthand property
To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.
The shorthand property for all the padding properties is "padding":
Example
p {
    padding: 25px 50px;
}

Hiding an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout:
Example
h1.hidden {
    visibility: hidden;
}
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

Example
h1.hidden {
    display: none;
}


Changing How an Element is Displayed
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.
The following example displays <li> elements as inline elements:
Example
li 
{
    display: inline;
}


The following example displays <span> elements as block elements:
Example
span 
{
    display: block;
}


Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:
Example
p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 5px;
}


Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal position:
Example
h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Example
h2.pos_top {
    position: relative;
    top: -50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
Example
h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}


Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Example
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}


How Elements Float
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
Example
img {
    float: right;
}

Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
Here we have made an image gallery using the float property:
Example
.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}
Turning off Float - Using Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:
Example
.text_line {
    clear: both;
}

Center Aligning Using the margin Property
Block elements can be center-aligned by setting the left and right margins to "auto".
Note: Using margin:auto; will not work in IE8 and earlier unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
Example
.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}


Tip: Center-aligning has no effect if the width is 100%.
Left and Right Aligning Using the position Property
One method of aligning elements is to use absolute positioning:
Example
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:
Example
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Left and Right Aligning Using the float Property
One method of aligning elements is to use the float property:
Example
.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier when using the float property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the float property:
Example
body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
  • descendant selector
  • child selector
  • adjacent sibling selector
  • general sibling selector
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements: 
Example
div p {
    background-color: yellow;
}

Child Selector
The child selector selects all elements that are the immediate children of a specified element.
The following example selects all <p> elements that are immediate children of a <div> element:
Example
div > p {
    background-color: yellow;
}


Adjacent Sibling Selector
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects all <p> elements that are placed immediately after <div> elements:
Example
div + p {
    background-color: yellow;
}
General Sibling Selector
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements: 
Example
div ~ p {
    background-color: yellow;
}

Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
Example
a.highlight:hover {
    color: #ff0000;
}


CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

p:first-child {
    color: blue;
}

Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
Example
p:first-child i {
    color: blue;
}
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
    property:value;
}

The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block elements.
Example
Format the first line of the text in all <p> elements:
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}







Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
    property:value;
}



Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
    property:value;
}

The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block elements.
Example
Format the first line of the text in all <p> elements:
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

The following properties apply to the ::first-line pseudo-element:
  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The ::first-letter pseudo-element can only be applied to block elements. 
Example
Format the first letter of the text in all <p> elements: 
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

Pseudo-elements and CSS Classes
Pseudo-elements can be combined with CSS classes: 
Example
p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}

Multiple Pseudo-elements
Several pseudo-elements can also be combined. 
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color: 
Example
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:
Example
h1::before {
    content: url(smiley.gif);
}
CSS - The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
The following example makes the selected text red on a yellow background:
Example
::selection {
    color: red;
    background: yellow;
}
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
Example
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>





Now let's remove the bullets and the margins and padding from the list:
Example
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Example explained:
  • list-style-type: none - Removes the bullets. A navigation bar does not need list markers
  • Setting margins and padding to 0 to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal navigation bars.
Vertical Navigation Bar
To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:
Example
a {
    display: block;
    width: 60px;
}
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:
Example
li {
    display: inline;
}

Floating List Items
In the example above the links have different widths.
For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements:
Example
li {
    float: left;
}

a {
    display: block;
    width: 60px;
}





<html>
<head>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>



img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Example
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

Example
<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Image Sprites - Simple Example:
In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:
Example
#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
Image Sprites - Create a Navigation List
We want to use the sprite image ("img_navsprites.gif") to create a navigation list.
We will use an HTML list, because it can be a link and also supports a background image:
Example
#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}






















  





















on No comments:
Subscribe to: Posts (Atom)