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.

 

Comments (0)

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.

min-width:value;

max-width:value;

Height can also be set with

height:value;

min-height:value;

max-height:value;


value need to be set in pixels because the actual height of the page in percentage would be unknown

Comments (0)

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)

Children or descendants are always in front of parents or ancestor.

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 */

tr:hover{

  background-color yellow;

}

The shape of the cursor can be changed also to some of the following shapes

Mouse pointers and cursor: property values

This would be added to the hover rule as follows

/* Change color of row when hover and change shape of mouse */

tr:hover{

   /* changes row color */

  background-color yellow;

  /* changes shape of the mouse from I-bar back to arrow when hover over text in table */

  cursor:default;

}

 

Comments (0)