DIV and SPAN in CSS

The <span> and <div> tags were introduced later in the HTML game that are very useful when dealing with Cascading Style Sheets. People tend to use them in similar fashion, but they serve different purposes.

<Div>

The <div> tag defines logical divisions in your Web page. In terms of layout, the <div> tag does only one thing, it determines the alignment of that section of your page.

<div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.

But that's not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph.

The primary attributes of the <div> tag are:

align (left|center|right|justify)
style
name

Even if you don't use style sheets or DHTML, you should get into the habit of using the <div> tag. This will give you more flexibility when more XML parsers become available. Also, you can use the NAME attribute to name your sections so that your Web pages are well formed.

Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div> align="center" to center your text and images. You can also use the text-align: center style tag.

More About the <div> Tag

<span>

The <span> tag has very similar properties to the <div> tag, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes.

The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts as a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>.

The primary attributes of the <span> tag are:

align (left|center|right|justify)
style

Use <span> when you want to change the style of elements without naming them in a separate division within the document. For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with <<span> style="color : #ff0000;">2ndWord</<span>> and it would still be a part of the <h3> tag .

CSS style properties

Font properties

Property	Value	Description
font-family	Specific font (Arial, Times, Verdana)  Familly (serif, sans-serif, fantasy, monospace, cursive)	Defines one or more font names or font families. If multiple fonts are defined, the first one found on the user's system will be used.
font-style	normal, italic, oblique	Defines the writing style
font-weight	lighter, normal, bold or bolder.  numeric value (100, 200, 300, 400, 500, 600, 700, 800, 900)	Defines the thickness of the font
font-size	xx-small, x-small, small, medium, large, x-large, xx-large  size in points (pt), cm, %	Defines the font size
font-variant	normal, small-caps	Defines a variant (small capitals)
font	font: Verdana, Arial, bold italic 8px;	Shortcut for all properties

Text and paragraphs

Property	Value	Description
color	"#RRGGBB"	Defines the text colour
line-height	line-height: 12pt;	Defines line spacing
text-align	left, center, right or justify	Defines text alignment
text-indent	text-indent: 5px;	Defines indentation
text-decoration	blink (blinking), underline (underlined), line-through(strikethrough), overline (overlined) or none (no decoration)	Defines decoration
text-shadow	text-shadow: 1px 2px 4px black;	Defines a drop shadow for the text, representing, respectively, the shadow's right-shift, down-shift, blur radius, and colour.
text-transform	uppercase, lowercase, or capitalize	Defines the case of the text
white-space	normal (text will wrap to the next line), pre (text appears with whatever blank spaces were entered), nowrap (text will not wrap)	Hyphenation
word-spacing	word-spacing: 6px;	Defines how much space to put between words
width	in points (pt), inches (in), in cm, on pixels (px), or as a %	Defines the width of a text element or image
height	in points (pt), inches (in), in cm, on pixels (px), or as a %	Defines the height of a text element or image

Background colours

Property	Value	Description
background-color	"#RRGGBB"	Defines a background colour
background-image	url(http://url)	Defines a background image
background-repeat	repeat, repeat-x, repeat-y, no-repeat	Defines how the background image repeats
background-attachment	scroll, fixed	Specifies if the background image will stay in place when the screen scrolls
background-position	top, middle, bottom, left, center or right	Positions the image relative to the upper-left corner
background	background: url(test.jpg) fixed repeat;	Shortcut for background properties

Margins

Property	Example	Description
margin-top	margin-top: 5px;	Value of top margin
margin-right	margin-right: 0.5em;	Value of right margin
margin-bottom	margin-bottom: 2pt;	Value of bottom margin
margin-left	margin-left: 0;	Value of left margin
margin	margin: 5px 0.5em 2pt 0;	Shortcut for margin properties

Borders

Property	Value	Description
border[-top -left -bottom -right]-width	in points (pt), inches (in), in cm, on pixels (px), or as a %	Border thickness [for the location given]
border[-top -left -bottom -right]-color	border-left-color: #RRGGBB;	Border colour [for the location given]
border[-top -left -bottom -right]-style	solid, dashed, dotted, double or ridge	Border style [for the location given]
border-collapse	collapse separate	Adds or removes "3D" effect
Border	border: 1px 0 0 2px dotted green;	Global shortcut for border properties

Padding

Property	Value	Description
padding-top	padding-top: 3px;	Padding between the element and the top border
padding-right	padding-right: 0.25em;	Padding between the element and the right border
padding-bottom	padding-bottom: 0;	Padding between the element and the bottom border
padding-left	padding-left: 2pt;	Padding between the element and the left border
padding	padding: 3px 0.25em 0 2pt;	Shortcut for all padding properties

Tables

Property	Value	Description
border-collapse	separate or collapse	Merges cell borders (collapse), doesn't merge them (separate)
border-spacing	border-spacing: 4px;	Cell spacing
caption-side	top, bottom, left or right	Placing the table's caption
empty-cells	show or collapse	Display (show) or hide (collapse) empty cells
table-layout	fixed (independent of cell content) or auto(depending on cell content)	Fixed or variable width
speak-headers	always (always before each cell) or once(just once)	Property for the blind and visually impaired, indicating how sound behaves when reading table header cells

Lists

Property	Value	Description
list-style-type	decimal, upper-roman, lower-latin, disc, circle, square or none	Type of bullets and numbering
list-style-image	list-style-image: url(image.png);	Personalise bullets with an image
list-style-position	inside or outside	Specifies bullet indentation
list-style		Shortcut to list properties

Page layout

Property	Value	Description
@page	@page(size: portrait)	Defines print layout
size	auto, landscape or portrait	Printing format
margin-top	margin-top: 3 cm;	Top margin
margin-right	margin-right: 1.5 cm;	Right margin
margin-bottom	margin-bottom: 1 cm;	Bottom margin
margin-left	margin-left: 2 cm;	Left margin
marks	crop (crop marks), cross (cross marks), none (no marks)	Crop marks and cross marks
page-break-before	Always, avoid	Forces a page break before an element
page-break-after	Always, avoid	Forces a page break after an element
orphans	orphans: 2;	Avoids having orphaned lines at the end of a page. Defines the minimum number of lines of an element that are left at the bottom of a page before a page break.
widows	widows: 1;	Avoids having widowed lines at the end of a page. Defines the minimum number of lines of an element that are left at the top of a page after a page break.

ABOUT DHTML CSS and DOM

Q: What is DHTML?

 

• DHTML stands for Dynamic Hypertext Markup Language is a combination of technologies for creating dynamic web sites. General phenomenon that DHTML is combination of html 4.0,style sheets and JavaScript.
  
• "DHTML is term used by some vendors to describe the combination of HTML,Style sheets and scripts that allows documents to be animated."
  

 

Q: What is CSS?

 

• We can look at Cascading Style Sheets (CSS) from a number of contextual perspectives. CSS were created to provide a powerful, yet flexible means for formatting HTML content.CSS contains formatting options using "STYLE" that can be applied to document elements.CSS stored in "*.css" file
  
• CSS help designers to do less work on the html elements for formatting elements color, font, backgrounds etc. that helps designer to maintain one theme in the entire website.
  
• HTML tags are used to display contain in document while CSS used to set different looks in to the document so contain can be display in effective manner.
  
• Major browser supporting CSS and its normally extension is "CSS", you can embedded CSS with you html document using <link> tag.
  

Syntax:

Selector

{

    Property : value;

}

Selector - can be any html element.

Property – is attribute you wish to change.

Value- is value for attribute property and value separated by colon " : ".

For e.g.

Body { color: black }

Here body of document will be in black color.

Q: What is DOM ?

• The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.
  
• With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the XML internal and external subsets have not yet been specified.
  
• As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications. The DOM is designed to be used with any programming language.