CSS tricks

1. css short hand rule


font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

font: bold italic small-caps 1em/1.5em verdana,sans-serif


2. Two classes together

...

3. CSS border default value

border: solid


4. CSS document for printing

variety of ways to associate media-specific stylesheets to a document


    all
    aural
    braille
    embossed
    handheld
    print
    projection
    screen
    tty
    tv


5.  External custom font

@font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}


6. CSS positioning within a container


Assign the following CSS rule to the container:

#container
{
position: relative
}


7. repeat-x repeat-y

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;


repeat-x  - background image will be repeated horizontally

repeat-y -  background image will be repeated vertically


8. Block vs. inline level elements

Block element starts on a new line.

div p h1 form ul  tags

Inline elements do not start on a new line

span img a tags


9. text-transform

capitalize | lowercase | none | uppercase

This property defines how the text will be transformed to.

Read More [...]

Posted in CSS, HTML

HTML Tags - DIV vs TABLE instead of DIV or TABLE

DIV/TABLE are HTML tags which can populate data inside the markup language. Most of us have come across the situation, where we have to choose between DIV and TABLE. Both have there own way of presenting data inside the HTML. Ofcourse TABLE tag gives easier way of displaying data like, showing a weekly/monthly/yearly report with legible heading for each column, any tabular data etc. So is it possible to use DIV instead of TABLE in the above example?, yes it is possible. Its hard for a beginner to go with a DIV, because inorder to make a perfect aligning of DIV, some styling basics (Cascading Style Sheet – CSS )also should be known. 

 Comparison

DIV	TABLE
Loads faster.	Loads slower.
Quite few tags needed (div).	More tags needed (table , tr, td, thead , tfoot ,th).
Make use of Search Engine Optimization (SEO) more powerful.	Less powerful.
Reduce size of the page significantly.	Page size increases.
Flexible.	Inflexible.
Styling issues compromised using CSS.	Only partially.

 

DIV and SPAN tags

DIV which creates a division inside html content. Usually used to dynamically populate data, using AJAX calls.SPAN also creates a division. The main difference between these two is that

• DIV creates a line break after the tag is closed.

Example 1

Example 2

Output

Example 1

Example 2

Inorder to make this in single line. This need to be changed to:

Example 1

Example 2

Output

Example 1 Example 2

• SPAN will not create any line breaks. Usually SPAN is used for styling text with the help of CSS.
  
  

  Example 1
  Example 2
  

  
  
  

  Output

  
  

  Example 1Example 2

  
  

Read More [...]

Posted in HTML, Tags