With html5 the div for a page have been provided with consistent labels they are
|Tags||Page section useuage|
|<header> ... </header>||Page header the banding section at top of page|
|<nav> ... </nav>||Navigation usually under the header|
|<aside> ... </aside>||Any side information such as ads, blog links etc|
|<article> ... </article>||The main story of the page or the page section of the page|
|<footer> ... </footer>||The bottom footer on the page, usually has contact link, toss, etc|
The tags are just block elements and still need CSS styling to make them look more then just block elements. In HTML they are used to define what the tag/block is not what it looks like. CSS is needed to define the actual appearance of each element to the browser.
Width is the width of the block or structural element. The default value is 100%.
The CSS code is to override this is
width:value where value is either pixels or per cent.
One can also set the max and min width of the box.
Height can also be set with
value need to be set in pixels because the actual height of the page in percentage would be unknown
Padding in Css covers the inside of the block element or structural element. Margins covers outside the block element or structural element. Thus, padding will put space between the elements in the block and the edge of the block. Margins puts space between each block.
Width is the content inside the box minus the margins, padding, and borders. Height is the content inside the box minus the margins, padding and borders.
The code for margins is
margin:value where value is in pixels or per cent.
|margin:value||all four sides||value is in pixels or per cent|
|margin-top:value||top margin only||value is in pixels or per cent|
|margin-bottom:value||bottom margin only||value is in pixels or per cent|
|margin-left:value||left margin only||value is in pixels or per cent|
|margin-right:value||right margin only||value is in pixels or per cent|
|margin:value value||vertical horizontal value||
value is in pixels or per cent
auto can be used for horizontal
|margin:value value value||top sides bottom||
value is in pixels or per cent
|margin:value value value value||top right bottom left||
value is in pixels or percent
|padding:value||all four sides||value is in pixels or per cent|
|padding-top:value||top only||value is in pixels or per cent|
|padding-bottom:value||bottom only||value is in pixels or per cent|
|padding-top:value||left only||value is in pixels or per cent|
|padding_right:value||right only||value is in pixels or per cent|
|padding:value value||vertical horizontal values||value is in pixels or per cent|
|padding:value value value||top sides bottom||value is in pixels or per cent|
|padding:value value value value||top right bottom left||value is in pixels or percent|
auto can be used for the horizontal value for margins. This will center the block.Comments (0)
To hover the mouse over a row and change the color of the row the style needs to come last in the list of style rules, after the nth-child. If it does not come after the nth child rule it will not apply to any of the rows selected by the nth-child rule. An example would be:
/* Highlight table row on hover */
The shape of the cursor can be changed also to some of the following shapes
This would be added to the hover rule as follows
/* Change color of row when hover and change shape of mouse */
/* changes row color */
/* changes shape of the mouse from I-bar back to arrow when hover over text in table */