More css HTML and css 2012 Brian Davison

DIV Use... to mark a division or section of your Web page Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rhoncus aliquam metus id gravida.

css box model

Specifying Borders You can change three attributes of a border: style, width and colour p { border: solid thin black } You can specify these one at a time div { border-style: solid; border-width: thin; border-color: black; } You can specify the border in just one direction: div.c0 { border-left: solid thin black } Instead of style solid you can have –none –dotted –dashed

Specifying lengths and widths You can specify border width as: –2pt –2px –0.1cm –0.05em –thin –thick Using point size (pt) is good; this means that it will print on paper well.

Color, background color, padding You can change the background color from the default value “transparent” You can change the text color from the default value “black” The padding shows how much space there is between the text and the border. If you use a background color you usually need to increase the padding. h1 { color:white; background-color: black; padding 3pt;}

Positioning DIVs

The position attribute Inline –DIVs can appear next to each other Relative –Takes up space vertically on the page –Can be positioned horizontally Absolute –Does not take up space vertically –Always in the same position relative to the top of the page Fixed –Does not take up space vertically –Always in the same position relative to the window

Floating DIVS float = 'left' float = 'right' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit ornare vulputate. Nam venenatis orci at risus pretium imperdiet. Fusce quam quam, iaculis eget convallis elementum, condimentum sed nulla. Quisque sit amet metus vitae lorem auctor sollicitudin. Pellentesque eu odio libero. Curabitur nec mi arcu. Nulla consectetur ultrices turpis, in dictum diam placerat at. Phasellus odio felis, egestas vitae malesuada sagittis, imperdiet aliquam libero. Vestibulum velit orci, interdum a lacinia a, malesuada non ante. Etiam augue libero, sollicitudin fermentum elementum in, auctor quis libero. Fusce in libero eros. Phasellus leo arcu,. auctor a hendrerit eu, cursus vel augue. Curabitur est lectus, malesuada ut vehicula at, ultrices sit amet urna.

Rollover effects Use :hover as a selector: a:hover { red; } div#rollover div:hover { padding-left: 10 pt; }

Nesting rules A rule can select an element inside another: div#a div#b { color: red; }

Revealing hidden elements using :hover ? div#c:hover div#d{ display:block; } div#d{ display:none; float: right; }