CSS Tables

Table Borders :

To specify table borders in CSS, utilize the border property.
The example below specifies a black border for table, th, and td components:

Example :

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

Notice that the table in the example above has double borders. The reason being both table and the th/td aspects have split borders.

Collapse Borders :

The border-collapse property units whether the dining table edges are collapsed in to a simple border or divided:

Example :

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 Text Alignment :

The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:

Example :


The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example :


Table Padding :

To control the space between the border and content in a table, use the padding property on td and th elements.

Example :


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;

CSS Lists

List In CSS :

In HTML, you can find two types of lists:

  • unordered lists – the list objects are noted with bullets
  • ordered lists – the list objects are noted with numbers or words

With CSS, lists could be styled further, and images can be used while the list object marker.

An Image as The List Item Marker :

To specify an image as the list item marker, use the list-style-image property.


list-style-image: url(‘sqpurple.gif’);

The example above doesn’t present equally in all browsers. IE and Opera can present the image-marker a little bit greater than Firefox, Chrome, and Safari.

Crossbrowser Solution :


list-style-type: none;
padding: 0px;
margin: 0px;
ul li
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 

  • For ul:
    • Set the list-style-type to nothing to eliminate the list object sign.
    • Set both padding and profit to 0px .
  • For several li in ul:
    • Set the URL of the picture, and display it just once.
    • Place the picture wherever you are interested.
    • Place the writing in the list with padding-left.

List – Shorthand property :

It is also probable to specify all of the list properties in a single, simple property. This really is named a shorthand property.
The shorthand property useful for provides, could be the list-style property:


list-style: square url(“sqpurple.gif”);

CSS Links

Styling Links In CSS :

Links could be formed with any CSS property (e.g. color, font-family, background, etc.).
Special for hyperlinks are they can be formed differently relying on what state they are in.
The four hyperlinks states are:

  • a:link – a normal, unvisited url.
  • a:visited – a url the consumer has visited.
  • a:hover – a url when the consumer mouses around it.
  • a:active – a url the moment it’s clicked.

Example :

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Common Link Styles In CSS :

In the case over the hyperlink changes color relying about what state it is in.
Lets go through a number of the different popular approaches to style hyperlinks:

Text Decoration :

The text-decoration property is mainly applied to get rid of 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;}

CSS Font

Font Family In CSS :

The font group of a text is placed with the font-family property.
The font-family house should hold many font names as a “fallback” system. If the browser doesn’t help the first font, it tries another font.
Focus on the font you would like, and end with a simple household, to let the browser select a similar font in the general household, if number other fonts are available.

Example :

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

Font Style In CSS :

The font-style property is certainly caused by applied to establish italic text.
This property has three prices:

  • standard – The text is revealed normally
  • italic – The text is revealed in italics
  • oblique – The text is “leaning

Example :

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font Size In CSS :

The font-size price is definitely  relative size.
Absolute size:

  • Units the writing to a specified size
  • Does not allow a person to improve the writing size in most browsers.
  • Absolute size is useful once the bodily size of the result is known

General size:

  • Units the size in accordance with surrounding things
  • Enables a person to improve the writing size in browsers

Use a Combination of Percent and Em :

Example :

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text.

Set Font Size With Em :

The size can be calculated from pixels to em applying this system: 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 */

In the example over, the writing size in them is exactly like the last example in pixels. However, with the them size, it’s possible to adjust the writing size in every browsers.

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;}

The example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.

CSS Text

Text Color :

The color house is used to create the colour of the text.
With CSS, a color is usually specified by:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

  • 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 employed to set the horizontal position of a text.
    Text can be focused, or arranged to the left or proper, or justified.
    When text-align is set to “justify”, each point is stretched therefore that each point has identical width, and the left and proper prices are right.

    Example :

    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}

    Text Decoration :

    The text-decoration property is employed setting or eliminate accessories from text.
    The text-decoration property is mainly applied to eliminate underlines from links for style purposes:

    Example :

    a {text-decoration:none;}

    Text Transformation :

    The text-transform property is used to establish uppercase and lowercase words in a text.
    It may be used to show everything in to uppercase or lowercase words, or capitalize the very first page of each word.

    Example :

    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}

    Text Indentation :

    The text-indentation property is used to specify the indentation of the first line of a text.

    Example :

    p {text-indent:50px;}

    CSS Background

    Background Color :

    The background-color home identifies the backdrop shade of an element.
    The background shade of a page is described within the body selector.

    Example :

    body {background-color:#b0c4de;}

    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”

    Example :

    h1 {background-color:#6495ed;}
    p {background-color:#e0ffff;}
    div {background-color:#b0c4de;}

    Background Image :

    The background-image house specifies a picture to make use of as the back ground of an element.
    Automatically, the picture is recurring so it covers the entire element.
    The back ground picture for a page may be set such as this:

    Example :

    body {background-image:url(‘paper.gif’);}

    Automatically, the background-image home repeats an image equally horizontally and vertically.
    Some photographs must certanly be repeated just horizontally or vertically, or they’ll search odd, such as this: 

    Example :


    Shorthand property :

    As you will see from the examples over, there are lots of qualities to think about when dealing with backgrounds.
    To limit the rule, it is also possible to specify all of the qualities in a single property. This really is named a shorthand property.
    The shorthand property for history is simply “background“:

    Example :

    body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

    When using the shorthand property the order of the property values is:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

    VBScript Procedures

    VBScript Procedures :

    VBScript has two kinds procedures:
    1. Sub procedure.
    2. Function procedure.

    Sub Procedures :

    A Sub procedure:
    1. it is some claims, surrounded by the Sub and End Sub statements.
    2. may do measures, but does not return a benefit.
    3. will take arguments.
    Sub mysub(argument1,argument2)
      some statements
    End Sub

    Function Procedures :

    A Purpose technique:
    1. it is a series of claims, closed by the Purpose and End Purpose claims.
    2. can do activities and can return a value.
    3. may take fights which are transferred to it by way of a contacting technique.
    4. without fights, should contain an empty pair of parentheses ().
    5. results a value by assigning a value to its title.
    Function myfunction(argument1,argument2)
      some statements
      myfunction=some value
    End Function

    Calling a Procedure :

    This simple function procedures is called to calculate the sum of two arguments:

    Function myfunction(a,b)
    End Function 


    The function “myfunction” will return the sum of argument “a” and argument “b”. In this case 9.

    VBScript Conditional Statements

    Conditional Statements :

    Conditional statements are accustomed to perform different activities for different decisions.
    In VBScript we have four conditional statements:
    • If statement – executes a set of signal whenever a situation is true.
    • If…Then…Else statement – pick one of two units of lines to implement.
    • If…Then…ElseIf statement – pick one of numerous units of lines to implement.
    • Pick Case statement – pick one of numerous units of lines to implement.

    If…Then…Else :

    Use the If…Then…Else record if you intend to

    • perform some signal if a condition holds true
    • pick one of two blocks of signal to perform

    If you intend to perform only one record each time a condition holds true, you can write the signal using one line:

    If i=10 Then alert(“Hello”)

    There’s number ..Else.. in that syntax. You just inform the rule to perform one activity if your problem is true (in that situation If i=10).
    If you intend to execute several record whenever a problem is true, you have to put each record on split lines, and conclusion the record with the keyword “Conclusion If”:

    If i=10 Then
    i = i+1
    End If

    There is no ..Else.. in the example above either. You just tell the code to perform multiple actions if the condition is true.

    VBScript Variables

    VBScript Variables :

    As with algebra, VBScript variables are accustomed to maintain values or expressions.
    A variable can have a quick title, like x, or perhaps a more detailed title, like carname.
    Principles for VBScript variable names:

    • Should start out with a letter 
    • Can not include a time (.)
    • Can not surpass 255 characters

    In VBScript, all variables are of type plan, that can store several types of data.

    Declaring VBScript Variables :

    Creating parameters in VBScript is most often called “announcing” variables.
    You can declare VBScript parameters with the Poor, Public or the Personal statement. Similar to this:

    Dim x
    Dim carname

    Now you have made two variables. The name of the variables are “x” and “carname “.
    You can also declare variables by which consists of name in a script. Such as this:


    So you have made a variable. The name of the variable is “carname “.But, this process is not just a good practice, since you can misspell the variable name later in your software, and that may trigger odd results whenever your software is running.
    If you misspell for example the “carname” variable to “carnime”, the software will instantly develop a new variable named “carnime”.  To avoid your software from carrying this out, you can use the Choice Specific statement. This statement makes one to declare your entire parameters with the poor, public or individual statement.
    Put the Choice Specific statement on the top of one’s script. Similar to this:

    Option Explicit
    Dim carname
    carname=some value

    Assigning Values to Variables :

    You assign a value to a variable like this:


    The variable title is on the remaining part of the appearance and the worthiness you intend to allocate to the variable is on the right. Today the variable “carname” has the worthiness of “Volvo”, and the variable “x” has the worthiness of “10 “.

    Lifetime of Variables :

    How long a variable exists is their lifetime.
    When you declare a variable inside a procedure, the variable can only just be accessed within that procedure. When the process exits, the variable is destroyed. These variables are called regional variables. You can have regional variables with exactly the same title in various procedures, since each is acknowledged just by the process in which it’s declared.
    If you declare a variable outside a procedure, most of the procedures in your page may entry it. The duration of these variables begins when they’re declared, and stops once the page is closed.

    Array Variables :

    An variety variable is used to keep numerous prices within a variable.
    In the next example, an variety containing 3 components is reported:

    Dim names(2)

    The amount shown in the parentheses is 2. We start at zero which means this range includes 3 elements. This is a fixed-size array. You assign knowledge to each of the aspects of the range such as this:


    Likewise, the info could be recovered from any factor using the list of this variety factor you want. Similar to this:


    You can have around 60 dimensions within an array. Multiple dimensions are reported by splitting up the numbers in the parentheses with commas. Here we’ve a two-dimensional variety consisting of 5 lines and 7 articles:

    Dim table(4,6)

    SQL Syntax

    SQL Statements :

    Most of the actions you’ll need to do on a repository are finished with SQL statements.
    The following SQL statement chooses all of the records in the “Consumers” table:

    SELECT * FROM Customers;

    Some repository techniques need a semicolon at the conclusion of each SQL statement.
    Semicolon is the typical way to split up each SQL statement in repository techniques that enable multiple SQL statement to be executed in exactly the same contact to the server.
    In that guide, we will use semicolon at the conclusion of each SQL statement.

    Some of The Most Important SQL Commands :

    • SELECT – extracts information from a repository.
    • UPDATE – revisions information in a repository.
    • DELETE – deletes information from a repository.
    • INSERT INTO – positions new information right into a repository.
    • CREATE DATABASE – creates a new repository.
    • ALTER DATABASE – modifies a repository.
    • CREATE TABLE – creates a new dining table.
    • ALTER TABLE – modifies a desk.
    • DROP TABLE – deletes a desk.
    • CREATE INDEX – creates an list (search key).
    • DROP INDEX – deletes an list.