Cheat Sheets – CSS

Cheat Sheets

Property CSS 1 CSS 2 CSS 2.1 CSS 3 Initial Value
Property CSS 1 CSS 2 CSS 2.1 CSS 3 Initial Value
alignment-adjust no no no yes auto
alignment-baseline no no no yes baseline
animation no no no yes depending on individual properties
animation-delay no no no yes 0
animation-direction no no no yes normal
animation-duration no no no yes 0
animation-iteration-count no no no yes 1
animation-name no no no yes none
animation-play-state no no no yes running
animation-timing-function no no no yes ease
appearance no no no yes normal
azimuth no yes yes yes center
backface-visibility no no no yes visible
background yes yes yes yes depending on individual properties
background-attachment yes yes yes yes scroll
background-clip no no no yes border
background-color yes yes yes yes transparent
background-image yes yes yes yes none
background-origin no no no yes padding
background-position yes yes yes yes 0% 0%
background-repeat yes yes yes yes repeat
background-size no no no yes auto
baseline-shift no no no yes baseline
binding no no no yes none
bleed no no no yes 6pt
bookmark-label no no no yes content()
bookmark-level no no no yes none
bookmark-state no no no yes open
bookmark-target no no no yes none
border yes yes yes yes depending on individual properties
border-bottom yes yes yes yes depending on individual properties
border-bottom-color no yes yes yes current color
border-bottom-left-radius no no no yes 0
border-bottom-right-radius no no no yes 0
border-bottom-style no yes yes yes none
border-bottom-width yes yes yes yes medium
border-collapse no yes yes yes separate
border-color yes yes yes yes depending on individual properties
border-image no no no yes none
border-image-outset no no no yes 0
border-image-repeat no no no yes stretch
border-image-slice no no no yes 100%
border-image-source no no no yes none
border-image-width no no no yes 1
border-left yes yes yes yes depending on individual properties
border-left-color no yes yes yes current color
border-left-style no yes yes yes none
border-left-width yes yes yes yes medium
border-radius no no no yes 0
border-right yes yes yes yes depending on individual properties
border-right-color no yes yes yes current color
border-right-style no yes yes yes none
border-right-width yes yes yes yes medium
border-spacing no yes yes yes 0
border-style yes yes yes yes depending on individual properties
border-top yes yes yes yes depending on individual properties
border-top-color no yes yes yes current color
border-top-left-radius no no no yes 0
border-top-right-radius no no no yes 0
border-top-style no yes yes yes none
border-top-width yes yes yes yes medium
border-width yes yes yes yes depending on individual properties
bottom no yes yes yes auto
box-decoration-break no no no yes slice
box-shadow no no no yes none
box-sizing no no no yes content-box
break-after no no no yes auto
break-before no no no yes auto
break-inside no no no yes auto
caption-side no yes yes yes top
clear yes yes yes yes none
clip no yes yes yes auto
color yes yes yes yes implementation dependent
color-profile no no no yes auto
column-count no no no yes auto
column-fill no no no yes balance
column-gap no no no yes normal
column-rule no no no yes depending on individual properties
column-rule-color no no no yes current color
column-rule-style no no no yes medium
column-rule-width no no no yes medium
column-span no no no yes 1
column-width no no no yes auto
columns no no no yes depending on individual properties
content no yes yes yes normal
counter-increment no yes yes yes none
counter-reset no yes yes yes none
crop no no no yes auto
cue no yes yes yes depending on individual properties
cue-after no yes yes yes none
cue-before no yes yes yes none
cursor no yes yes yes auto
direction no yes yes ? ltr
display yes yes yes yes inline
dominant-baseline no no no yes auto
drop-initial-after-adjust no no no yes text-after-edge
drop-initial-after-align no no no yes baseline
drop-initial-before-adjust no no no yes text-before-edge
drop-initial-before-align no no no yes caps-height
drop-initial-size no no no yes auto
drop-initial-value no no no yes initial
elevation no yes yes yes level
empty-cells no yes yes yes show
fit no no no yes fill
fit-position no no no yes 0% 0%
flex-align no no no yes stretch
flex-flow no no no yes row
flex-line-pack no no no yes start
flex-order no no no yes 0
flex-pack no no no yes start
float yes yes yes yes none
float-offset no no no yes 0 0
font yes yes yes yes depending on individual properties
font-family yes yes yes yes implementation dependent
font-size yes yes yes yes medium
font-size-adjust no yes no yes none
font-stretch no yes no yes normal
font-style yes yes yes yes normal
font-variant yes yes yes yes normal
font-weight yes yes yes yes normal
grid-columns no no no yes none
grid-rows no no no yes none
hanging-punctuation no no no yes none
height yes yes yes yes auto
hyphenate-after no no no yes auto
hyphenate-before no no no yes auto
hyphenate-character no no no yes auto
hyphenate-lines no no no yes no-limit
hyphenate-resource no no no yes none
hyphens no no no yes manual
icon no no no yes auto
image-orientation no no no yes auto
image-rendering no no no yes auto
image-resolution no no no yes normal
inline-box-align no no no yes last
left no yes yes yes auto
letter-spacing yes yes yes yes normal
line-break no no no yes auto
line-height yes yes yes yes normal
line-stacking no no no yes depending on individual properties
line-stacking-ruby no no no yes exclude-ruby
line-stacking-shift no no no yes consider-shifts
line-stacking-strategy no no no yes inline-line-height
list-style yes yes yes yes depending on individual properties
list-style-image yes yes yes yes none
list-style-position yes yes yes yes outside
list-style-type yes yes yes yes disc
margin yes yes yes yes depending on individual properties
margin-bottom yes yes yes yes 0
margin-left yes yes yes yes 0
margin-right yes yes yes yes 0
margin-top yes yes yes yes 0
marker-offset no yes no no auto
marks no yes no yes none
marquee-direction no no no yes forward
marquee-loop no no no yes 1
marquee-play-count no no no yes 1
marquee-speed no no no yes normal
marquee-style no no no yes scroll
max-height no yes yes yes none
max-width no yes yes yes none
min-height no yes yes yes 0
min-width no yes yes yes 0
move-to no no no yes normal
nav-down no no no yes auto
nav-index no no no yes auto
nav-left no no no yes auto
nav-right no no no yes auto
nav-up no no no yes auto
opacity no no no yes 1
orphans no yes yes yes 2
outline no yes yes yes depending on individual properties
outline-color no yes yes yes invert
outline-offset no no no yes 0
outline-style no yes yes yes none
outline-width no yes yes yes medium
overflow no yes yes yes depending on individual properties
overflow-style no no no yes auto
overflow-wrap no no no yes normal
overflow-x no no no yes visible
overflow-y no no no yes visible
padding yes yes yes yes depending on individual properties
padding-bottom yes yes yes yes 0
padding-left yes yes yes yes 0
padding-right yes yes yes yes 0
padding-top yes yes yes yes 0
page no yes no yes auto
page-break-after no yes yes yes auto
page-break-before no yes yes yes auto
page-break-inside no yes yes yes auto
page-policy no no no yes start
pause no yes yes yes implementation dependent
pause-after no yes yes yes implementation dependent
pause-before no yes yes yes implementation dependent
perspective no no no yes none
perspective-origin no no no yes 50% 50%
phonemes no no no yes implementation dependent
pitch no yes yes yes medium
pitch-range no yes yes yes 50
play-during no yes yes yes auto
position no yes yes yes static
presentation-level no no no yes 0
punctuation-trim no no no yes none
quotes no yes yes yes implementation dependent
rendering-intent no no no yes auto
resize no no no yes none
rest no no no yes implementation dependent
rest-after no no no yes implementation dependent
rest-before no no no yes implementation dependent
richness no yes yes yes 50
right no yes yes yes auto
rotation no no no yes 0
rotation-point no no no yes 50% 50%
ruby-align no no no yes auto
ruby-overhang no no no yes none
ruby-position no no no yes before
ruby-span no no no yes none
size no yes no yes auto
speak no yes yes yes normal
speak-header no yes yes yes once
speak-numeral no yes yes yes continuous
speak-punctuation no yes yes yes none
speech-rate no yes yes yes medium
stress no yes yes yes 50
string-set no no no yes none
tab-size no no no yes 8
table-layout no yes yes yes auto
target no no no yes depending on individual properties
target-name no no no yes current
target-new no no no yes window
target-position no no no yes above
text-align yes yes yes yes start
text-align-last no no no yes start
text-decoration yes yes yes yes none
text-decoration-color no no no yes currentColor
text-decoration-line no no no yes none
text-decoration-skip no no no yes objects
text-decoration-style no no no yes solid
text-emphasis no no no yes none
text-emphasis-color no no no yes currentColor
text-emphasis-position no no no yes above right
text-emphasis-style no no no yes none
text-height no no no yes auto
text-indent yes yes yes yes 0
text-justify no no no yes auto
text-outline no no no yes none
text-shadow no yes no yes none
text-space-collapse no no no yes collapse
text-transform yes yes yes yes none
text-underline-position no no no yes auto
text-wrap no no no yes normal
top no yes yes yes auto
transform no no no yes none
transform-origin no no no yes 50% 50% 0
transform-style no no no yes flat
transition no no no yes depending on individual properties
transition-delay no no no yes 0
transition-duration no no no yes 0
transition-property no no no yes all
transition-timing-function no no no yes ease
unicode-bidi no yes yes yes normal
vertical-align yes yes yes yes baseline
visibility no yes yes yes visible
voice-balance no no no yes center
voice-duration no no no yes implementation dependent
voice-family no yes yes yes implementation dependent
voice-pitch no no no yes medium
voice-pitch-range no no no yes implementation dependent
voice-rate no no no yes implementation dependent
voice-stress no no no yes moderate
voice-volume no no no yes medium
volume no yes yes yes medium
white-space yes yes yes yes normal
widows no yes yes yes 2
width yes yes yes yes auto
word-break no no no yes normal
word-spacing yes yes yes yes normal
word-wrap no no no yes normal
z-index no yes yes yes auto

Posted by: Dhiraj kumar

20+ Modern CSS Frameworks

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love. In this post we includes an overview of the 20+ most popular CSS Frameworks; showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.

1. Blueprint

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

CSS Framework

2. Elements

Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.

CSS Framework

3. 960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem

CSS Framework

4. YUI

YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications. YUI is provided under a BSD license and is available on GitHub for forking and contribution.

CSS Framework

5. 52framework

CSS Framework

6. YAML

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

CSS Framework

7. BlueTrip

A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.

CSS Framework

8. css-boilerplate

A simple CSS framework.

CSS Framework

9. A CSS Framework by Mike Stenhouse

CSS Framework

10. inuit.css

Yup, ‘fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file.

CSS Framework

11. SenCSs

SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style.

CSS Framework

12. Emastic

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

CSS Framework

13. jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

CSS Framework

14. Fluid 960 Grid System

CSS Framework

15. Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

CSS Framework

16. Baseline

Baseline is a framework built around the idea of a “real” baseline grid.

CSS Framework

17. Compass

Compass is an open-source CSS Authoring Framework.

CSS Framework

18. FEM

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts

CSS Framework

19. Formee

Fresh baked forms for your websites!

CSS Framework

20. Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

CSS Framework

21. Gravity

Gravity is a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.

CSS Framework

22. G5 Framework

G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

CSS Framework

 

Posted by: Dhiraj kumar

HTML : Introduction and Basics

HTML BASICS

HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

 <p> This is my paragraph. </p> 

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

 <p>This is my paragraph.</p> 

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the <img> tag (used to embed an image into a page) usually includes the following attributes:

 <img src = "myPic.jpg" Alt = "this is my picture" /> 

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

  • Use a doctype to describe the language (described below)
  • Write all code in lowercase letters
  • Encase all attribute values in double quotes
  • Each tag must have an end specified. This is normally done with an ending tag, but a special case allows for non-content tags.

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

 <html> <head> <title></title> </head> <body> </body> </html> 

XHTML Template

The XHTML template is a bit more complex, so it’s common to keep a copy on your desktop for quick copy and paste work, or to define it as a starting template in your editor.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title></title> </head> <body> </body> </html> 

Validation

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven’t missed anything.

Validating Tool Description
WC3 The most commonly used validator is online at http://validator.w3.org This free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a ‘spell-checker’ for your code and warns you if you made an error like forgetting to close a tag.
HTML Tidy There’s an outstanding free tool called HTML tidy which not only checks your pages for validity, but also fixes most errors automatically. Download this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser.
HTML Validator extension The extension mechanism of Firefox makes it a critical tool for web developers. The HTML Validator extension is an invaluable tool. It automatically checks any page you view in your browser against both the w3 validation engine and tidy. It can instantly find errors, and repair them on the spot with tidy. With this free extension available athttp://users.skynet.be/mgueury/mozilla/, there’s no good reason not to validate your code.

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

Open Source Tool Description
Aptana http://www.aptana.com/ This free programmer’s editor (based on Eclipse) is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support within the editor.
Web Developer Toolbar https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox extension adds numerous debugging and web development tools to your browser.
Firebug https://addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version even works with IE.

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

Element Description
<html></html> Surrounds the entire page
<head></head> Contains header information (metadata, CSS styles, JavaScript code)
<title></title> Holds the page title normally displayed in the title bar and used in search results
<body></body> Contains the main body text. All parts of the page normally visible are in the body

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structual elements:

Element Name Description
<h1></h1> Heading 1 Reserved fo strongest emphasis
<h2></h2> Heading 2 Secondary level heading. Headings go down to level 6, but <h1> through <h3> are most common
<p></p> Paragraph Most of the body of a page should be enclosed in paragraphs
<div></div> Division Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tags:

Element Name Description
<ul></ul> Unordered list Normally these lists feature bullets (but that can be changed with CSS)
<ol></ol> Ordered list These usually are numbered, but this can be changed with CSS
<li></li> List item Used to describe a list item in an unordered list or an ordered list
<dl></dl> Definition list Used for lists with name-value pairs
<dt></dt> Definition term The name in a name-value pair. Used in definition lists
<dd></dd> Definition description The value (or definition) of a name, value pair
<table></table> Table Defines beginning and end of a table
<tr></tr> Table row Defines a table row. A table normally consists of several <tr> pairs (one per row)
<td></td> Table data Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>)
<th></th> Table heading Indicates a table cell to be treated as a heading with special formatting

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

 <ol> <li>uno</li> <li>dos</li> <li>tres</li> </ol> 

Lists can be nested inside each other

 <ul> <li>English <ol> <li>One <li>Two <li>Three </ol> </li> <li>Spanish <ol> <li>uno <li>dos <li>tres </ol> </li> </ul> 

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

 <h2>Types of list</h2> <dl> <dt>Unordered list</dt> <dd>Normally used for bulleted lists, where the order of data is not important.</dd> <dt>Ordered lists</dt> <dd>Normally use numbered items, for example a list of instructions where the order is significant.</dd> <dt>Definition list</dt> <dd>Used to describe a term and definition. Often a good alternative to a two-column table</dd> </dl> 

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (tr) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

 <table border = "1"> <tr> <th> </th> <th>English</th> <th>Spanish</th> </tr> <tr> <th>1</th> <td>One</td> <td>Uno</td> </tr> <tr> <th>2</th> <td>Two</td> <td>Dos</td> </tr> </table> 

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor)

The anchor tag is used to provide the basic web link:

 <a href = "http://www.google.com">link to Google</a> 

In this example, http://www.google.com is the site to be visited. The text “link to Google” will be highlighted as a link.

<link>

The link tag is used primarily to pull in external CSS files:

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

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

 <img src = https://dhirajkumarsingh.files.wordpress.com/2012/02/dhiraj1.jpg alt = "Dhiraj kumar" /> 

Image formatting attributes (height, width, and align) are deprecated in favor of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

 <quote>Now is the time for all good men to come to the aid of their country</quote> 

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

 <pre> for i in range(10): print i </pre> 

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

 <code> while i < 10: i += 1 print i </code> 

<blockquote>

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is (not surprisingly) a block-level tag.

 <blockquote> Quoth the raven: Nevermore </blockquote> 

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

 <span class = "highlight">This text will be highlighted. 

<em>

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

<strong>

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

FORMS

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

 <form action = ""> <fieldset> <legend>My form</legend> <label for = "txtName">Name</label> <input type = "text" id = "txtName" /> <button type = "button" Onclick = "doSomething()"> Do something </button> </fieldset> </form> 

Form

The <form></form> pair describes the form. In XHTML strict, you must indicate the form’s action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null (“”) The method attribute is used to determine whether the data is sent through the get or post mechanism.

Fieldset

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

Legend

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

Label

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element’s ID in the label’s for attribute.

Input

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

Text

This element allows a single line of text input:

 <input type = "text" id = "myText" name = "myText" /> 

Password

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

 <input type = "password" id = "myPWD" /> 

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

 <input type = "radio" name = "radSize" value = "small" id = "radSmall" selected = "selected" /> <label for = "radSmall">Small</label> <input type = "radio" name = "radSize" value = "large" id = "radLarge" /> <label for = "radLarge">Large</label> 

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkbox

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

 <input type = "checkbox" id = "chkFries" /> <label for = "chkFries">Would you like fries with that?</label> 

Hidden

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

 <input type = "hidden" name = "txtHidden" value = "recipe for secret sauce" /> 

Note that the data is still not protected in any meaningful way.

Button

Buttons are used to signal user input. Buttons can be created through the input tag:

 <input type = "button" value = "launch the missiles" onclick = "launchMissiles()" /> 

This will create a button with the caption “launch the missiles.” When the button is clicked, the page will attempt to run a JavaScript function called “launchMissiles()”Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

 <button type = "button" Onclick = "launchMissiles()"> Launch the missiles </button> 

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

Reset

The reset button automatically resets all elements in its form to their default values. It doesn’t require any other attributes.

 <input type = "reset" /> <button type = "reset""> Reset </button> 

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

 <select id = "selColor"> <option value = "#000000">black</option> <option value = "#FF0000">red</option> <option value = "#FFFFFF">white</option> </select> 

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

 <select id = "selColor" size = "3" multiple = "multiple"> <option value = "#000000">black</option> <option value = "#FF0000">red</option> <option value = "#FFFFFF">white</option> </select> 

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

Font

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

B (bold)

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

Character Name Code Note
Non-breaking space &nbsp; Adds white space
< Less than &lt; Used to display HTML code or mathematics
> Greater than &gt; Used to display HTML code or mathematics
& Ampersand &amp; If you’re not displaying an entity but really want the & symbol
© Copyright &copy; Copyright symbol
® Registered trademark &reg; Registered trademark

Numerous other HTML entities are available and can be found in online resources like w3schools.

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Most of the updated browsers now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 5+, Safari 4+, Chrome 5+, Opera 7+  (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

 <video src = "myVideo.ogg" autoplay> Your browser does not support the video tag. </video> <audio src = "myAudio.ogg" controls> Your browsers does not support the audio tag </audio> 

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The Canvas tag

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

Font Face

This is actually a CSS improvement, but it’s much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Posted by: Dhiraj kumar

CSS : A introduction of Cascading Style Sheets

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

ABOUT CSS

As Cascading Style Sheets mature as a language of design and a tool of Web site and application management, a deep understanding of how the language really works is essential. However, most people have learned CSS the same way they’ve learned HTML,by viewing source, copying template codes, reading books and articles. While this “bootstrap” method of learning is often the best way to find great techniques, it may not be the best for knowing how to manage, debug, customize and even advance those techniques.

What our training hasn’t necessarily provided are the core concepts within CSS. This is why the Core CSS series may contain simple examples of things you already know. You’ll just get to know them better here! In this foundational reference card, you’ll find not only a bit of history and rationale for use, rule structure and syntax, but also a thorough resource as to the Cascade, inheritance and specificity,core principles of CSS that will expand and strengthen your professional ability to work with CSS.

CSS RATIONALE AND USE

The idea behind CSS is not a new one. We’ve seen the separation of presentation before in desktop publishing, where master style sheets can be created to control the layout, typefaces and colors used in a given design. Cascading Style Sheets were conceived to do exactly that: Remove the style from the document and place it separately from the code to be styled.

The benefits, when used carefully, can be outstanding. Some benefits of using style sheets include:

  • Design flexibility
    More image options
    Better typographic control
    Far more flexible layout options
    Print design support
    Handheld device design support
  • Easier site maintenance
    One style sheet, infinite pages
    Design changes are very easy
    Changes can be made quickly
    Reduces time to launch
  • Measurable returns
    Faster loading documents
    Far smaller documents
    User experience improves
    Accessibility improves
    SEO (search engine optimization) improves

The first proposal for CSS was made by Håkon Wium Lie, now CTO of Opera Software. He worked with Bert Bos to co-author the first CSS specification, which believe it or not, became a recommendation in 1996! By 1998 CSS 2.0 brought us richer options, as we find later in advancing versions CSS 2.1 and CSS 3.0.

Version Date Implementations
CSS 1.0 First proposed 1994, First specification in 1996 Still flawed CSS 1 portions in all CSS browsers
CSS 2.0 1998 No full implementation
CSS 2.1 Not yet published as a complete specification Some close to complete implementations
CSS 3.0 (Modular) Certain modules are ahead of others in development Some CSS 3.0 features are implemented in versions of WebKit, Mozilla and Opera browsers

Posted by: Dhiraj kumar