PHP & CSS Tutorials

CSS - Cascading Style Sheet

Unknown

CSS - Cascading Style Sheet

Filename extension	.css
Internet media type	text/css
Developed by	World Wide Web Consortium
Initial release	17 December 1996; 16 years ago
Type of format	Style sheet language
Standard(s)	Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Recommendation)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.

Syntax of CSS

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.

Pseudo-classes are used in CSS selectors to permit formatting based on information that is outside the document tree. An often-used example of a pseudo-class is :hover, which identifies content only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. A pseudo-class classifies document elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.




selector [, selector2, ...] [:pseudo-class] {

 property: value;

 [property2: value2;

 ...]

}

/* comment */

How to Use CSS ?

CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

Priority scheme for CSS sources (from highest to lowest priority):

CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

Priority scheme for CSS sources (from highest to lowest priority):
- Author styles (provided by the web page author), in the form of:
  - Inline styles, inside the HTML document, style information on a single element, specified using the style attribute
  - Embedded style, blocks of CSS information inside the HTML itself
  - External style sheets, i.e., a separate CSS file referenced from the document
- User style:
  - A local CSS file the user specifies with a browser option, which acts as an override applied to all documents
- User agent style
  - Default styles applied by the user agent, i.e., the browser's default settings for each element's presentation
The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.

The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.

An "external" CSS stylesheet file, as described above, can be associated with an HTML document using the following syntax:

<link href="path/to/file.css" rel="stylesheet">

An internal CSS styling can be done easily which can be used in an HTML document

<style ="text/css">
/* css codes */

</style>

It can also be used with HTML element with style property. the syntax of this is

<div style="property:value;">
any written document

</div>

[ Read More ]

Continue

PHP - Server Side Scripting Language

0 comments

Unknown

Some Common Information

PHP	Hypertext Preprocessor
Paradigm(s)	imperative, object-oriented, procedural, reflective
Appeared in	1995; 18 years ago[1]
Designed by	Rasmus Lerdorf
Developer	The PHP Group
Stable release	5.4.10 (December 20, 2012; 20 days ago)
Typing discipline	Dynamic, weak
Major implementations	Zend Engine, Phalanger, Quercus, Project Zero, HipHop
Influenced by	Perl, C, C++, Java, Tcl[1]
Implementation language	C
OS	Cross-platform
License	PHP License
Usual filename extensions	Common extensions .php Older, now uncommon extensions .phtml, .php4 .php3, .php5, .phps
Website	www.php.net

Some Introduction about PHP

PHP is an open source server-side scripting language designed for Web development to produce dynamic Web pages. It is one of the first developed server-side scripting languages to be embedded into an HTML source document rather than calling an external file to process data. The code is interpreted by a Web server with a PHP processor module which generates the resulting Web page. It also has evolved to include a command-line interface capability and can be used in standalone graphical applications. PHP can be deployed on most Web servers and also as a standalone shell on almost every operating system and platform, free of charge. A competitor to Microsoft's Active Server Pages (ASP) server-side script engine and similar languages, PHP is installed on more than 20 million Web sites and 1 million Web servers. Notable software that uses PHP includes Drupal, Joomla, MediaWiki, and WordPress.

PHP originally stood for Personal Home Page, it is now said to stand for PHP: Hypertext Preprocessor

PHP is free software released under the PHP License. From 1995. number of PHP versions has been released which include addition of new codes and various bugs fixes. From that time PHP has released various versions starting from 1.0.0 to latest release 5.4.10. The development of PHP 6 has been delayed because the developers have decided the current approach to handling of instance unicode is not a good one, and are considering alternate ways in the next version of PHP. The updates that were intended for PHP 6 were added to PHP 5.3.0 and 5.4.0 instead.

Beginning on June 28, 2011, the PHP Group began following a timeline for when new versions of PHP will be released. Under this timeline, at least one release should occur every month. Once per year, a minor release should occur which can include new features. Every minor release should at least have 2 years of security and bug fixes, followed by at least 1 year of only security fixes, for a total of a 3 year release process for every minor release. No new features (unless small and self-contained) will be introduced into a minor release during the 3 year release process.

Syntax of PHP : Server Side Scripting

The PHP interpreter only executes PHP code within its delimiters. Anything outside its delimiters is not processed by PHP. The most common delimiters are <?php to open and ?> to close PHP sections. <script language="php"> and </script> delimiters are also available, as are the shortened forms <? or<?= (which is used to echo back a string or variable) and ?> as well as ASP-style short forms <% or <%= and %>.

In terms of keywords and language syntax, PHP is similar to most high level languages that follow the C style syntax. if conditions, for and while loops, and function returns are similar in syntax to languages such as C, C++, C#, Java and Perl.

[ Read More ]

Continue

Simple Horizontal Navigation Bar

0 comments

Unknown

Simple Horizontal Bar is one of the commonly used Navigation system in designing website field. It is found normally on most of sites which I have browsed yet in my whole life. Although it looks nice, but it is very easy to prepare it. You just need to know some HTML and CSS basic knowledge. It depends upon UL HTML tag and some simply coded CSS Properties. First have a CSS horizontal bar.

In above picture its nor car that is bar but Home, Top Rated and Recommended is horizontal bar.

<div class="nav">
<ul>
<li>HOME</li>
<li>TOP RATED</li>
<li>RECOMMENDED</li>
</ul>
</div>

Now its time to have miracle means time to add classes or you can say css

.nav {height:40px;}
.nav ul {margin:0px; list-style-type:none; height:40px;}
.nav ul li {display:inline; float:left;}
.nav ul li a {padding:7px 14px;}

Rest of adding background and color properties, you can do yourself. Just try and have a look in your own browser.

[ Read More ]

Continue

Rearrange CSS as per User Resolution

0 comments

Unknown

Now in this fast computing world, every user or customer deals with different screen resolution monitors. Because of this thing it is difficult to make a website according to every user to provide him or her a good browsing experience on your website or any blog. It is also a big problem for various web designers also. If a user of resolution 1024x720 comes than we try to make website or arrange elements for him to give a good experience, on other hand if a user of higher resolution like 1920x1080 comes then it makes a big problem for user as well as designer. So CSS try to maintain this change by changing classes values. It doesn't requires any JavaScript, its pure CSS.

Now coming to the main point the element we are using here is @media screen. So first discuss about its conditions and properties

@media screen and (max-width: 720px)
@media screen and (min-width: 720px)
@media screen and (max-height: 720px)
@media screen and (min-height: 720px)

So it can be used both by using max and min conditions. But never try to use both at a time in your website, it will produce error and will not work properly at all. You can also use a combination of above conditions like

@media screen and (max-width: 720px; max-height:420px;)

Syntax of @media screen

.class
{
background:#444; color:white; width:1280px;
}
@media screen and (max-width: 720px)
{
.class {background:#444; color:white; width:720px;}
}

So in above code if width is less than 720px than class in @media screen will come into play while without @media screen class will be loaded if screen width is more than 720px.

[ Read More ]

Continue

Custom Internet Fonts @font-face via CSS3

0 comments

Unknown

CSS3 include this nice function supported by most browsers like IE 9, Google Chrome, Safari, Mozilla Firefox, Opera etc. The main purpose of this is to enhance the text based sites and blogs look more pretty and give look as per design of your blog. This is done by function @font-face . This function describer the remote url of your required font and your desired font name. But starting this you must have your desired font in some different formats like ttf, eot etc. You can easily colloect font by searching in google and if you can't find all formats you can use @font-face generator. You can go here to use @font-face genarator www.fontsquirrel.com/fontface/generator .

This picture will explain why custom fonts are in demand than old web-based fonts.

So after you have font in all formats we can continue and let us try this simple css.

@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

In above code the name under @font-face {font-family: myFirstfont;} is that name which you can use in any css class and properties. One thing more to tell this is that it is better to use full address (http://example.com/any.ttf) instead if only writting font name (any.ttf). This will make your font available to use n every page of website. You can also use some more properties to make your font looks cool and fine.

font-stretch - normal , condensed, expanded etc.
font-style - normal, italic and oblique.
font-weight - normal, bold 100-900 .

So next time you can use your font very esily by just writting these these few html lines

<div style="font-family: myFirstFont; font-weight:bold; color:grey;">Desire word or line</div>

So here this small and helpful post ends, if you have any question or suggestion feel free to comment.

[ Read More ]

Continue

RGBA Tutorial and Usage Tips

0 comments

Unknown

As we know RGB means combination of red, green and blue. This combination is weel known to us but it produces color flat, simple and bit boring also. But the new elemant in RGBA 'A' indicates alpha which is opacity in color or you can say transparency. Means now we can add amount of transparency of color and allow how much background color should appear. So adding lot more via CSS3 to your website color and graphics experience, this can help a lot in order to give users a dynamic experience.

Now lots of reader think that we have oacity already which works well every time like this

h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.5;
}

But now the best thing of RGBA which makes itself differ than opacity is that, you can set transparency to a single element while opacity gives transparency to every element. Now look this example having RGBA for background color only (not for text color as that of opacity do).

h1 {
color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.5);
}

As you see only transparency comes in background color but not in font color. Now alpha here is '0.5'. It can have value up to 1, where one is having no transparency and 0.1 has most. (as same as opacity concept). But we only show you background color opacity, just look little bit more about it in below picture.

h1 {

color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}

Here the special thing is transparency in font color, but background color is showing plane white having no opacity effect of 0.5 which can be explained as 50% transparent But the best part which actually makes web pages dynamic is coming now but simple as we see above. So have a fast look.

div {
border: 10px solid rgba(255, 255, 255, 0.3);
background-color: rgb(255, 255, 255);
}

So this is transparency in Border color while opacity doesn't produce this effect greatly to use in website as compared to RGBA. The really great thing about RGBA colour is that it gives us the ability to create far more graphically rich designs without the need to use images. Not only does that make for faster and lighter pages, but sites which are easier and quicker to build and maintain. CSS values can also be changed in response to user interaction or even manipulated with JavaScript in a way that’s just not so easy using images. Now lets come to the last example , which is hovering example that is similar to opacity hovering but without using imges.


div {

color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
}

div:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(142, 213, 87, 0.6);

So hovering effect example as well as css are written above. That’s a brief insight into RGBA colour, what it’s good for and how it can be used whilst providing support for older browsers. With the current lack of support in Internet Explorer, it’s probably not a technique that commercial designs will want to heavily rely on right away – simply because of the overhead of needing to think about fallback all the time.

[ Read More ]

Continue

PHP for E-mail Sending

1 comments

Unknown

E-Mail is now a pretty popular way to get your users always updated about status that what is happening on your site or blog. In this PHP can help you a lot. It is very easy to use this function once your script is ready. The php function can also send mails automatically to user on adding any update to your website or blog. For this mailing process php has added a function mail() to send mail via script or you an say via web server. The syntax of this function is

mail(to, subject, message, headers, parameters)

So it is as simple as using echo in your document. The brief information about mail() functions you can read below

To - Specifies the receiver / receivers of the email
Subject - Specifies the subject of the email. Note - This parameter cannot contain any newline characters
Message - Defines the message to be sent. Each line should be separated with a LF (\n). Lines should not exceed 70 characters
Headers - Specifies additional headers, like From, Cc, and Bcc. The additional headers should be separated with a CRLF (\r\n)
Parameters - Specifies an additional parameter to the sendmail program

Please note again -For the mail functions to be available, PHP requires an installed and working email system. The program to be used is defined by the configuration settings in the php.ini file.

Now its time for a good example to explain this very easily and clearly, So have a look

$to = "someone@example.com";
$subject = "Test mail";
$message = "This is a simple email message.";
$from = "someonelse@example.com";
$headers = "From :" . $from;
mail($to,$subject,$message,$headers);
echo "Mail Sent.";

Now lets see how to use if and else for better mailing and to stop unwanted email sending every time on opening a page. See how we can make it

if (isset($_REQUEST['email']))
//if "email" is filled out, send email
  {
  //sending email
  $email = $_REQUEST['email'] ;
  $subject = $_REQUEST['subject'] ;
  $message = $_REQUEST['message'] ;
  mail("someone@example.com", $subject,
  $message, "From:" . $email);
  echo "Thank you for using our mail form";
  }
else
//if "email" is not filled out, display the form
  {
  echo "<form method='post' action='mailform.php'>
  Email: <input name='email' type='text' /><br />
  Subject: <input name='subject' type='text' /><br />
  Message:<br />
  <textarea name='message' rows='15' cols='40'>
  </textarea><br />
  <input type='submit' />
  </form>";
  }

Here email will be sent only the form is filled, if form is not filled than the form will appear again to user. So when the submit button is clicked, page reloads and mail will be sent to given address.

Now , what more is left in post? Well, the last thing left is validating spams which is one of major problems. So we can also deal with spams. Just look this awesome code -

The FILTER_SANITIZE_EMAIL filter removes all illegal e-mail characters from a string
The FILTER_VALIDATE_EMAIL filter validates value as an e-mail address

So here our this post ends. Leave comments for further information.

[ Read More ]

Continue

PHP & CSS Tutorials

CSS - Cascading Style Sheet

PHP - Server Side Scripting Language

Simple Horizontal Navigation Bar

Rearrange CSS as per User Resolution

Custom Internet Fonts @font-face via CSS3

RGBA Tutorial and Usage Tips

PHP for E-mail Sending

Popular Posts

Translate

About Me

Popular Posts

Blog Archive

Popular Wap Link