TV CSS-Style

tudalen css.style {

'This is a page dedicated to CSS scripty bits'

This started out as a list of codes to copy and paste, that might still come.
I'm learning that the reality of building, is different.
None the less I've added some very useful links at the bottom.

[ oo1 }	This is all IMG CSS Copied from unknown page too long ago, thank you any way.	<!--============================== BackGround ydi hwn yn CSS <style type="text/css"> BODY { background: url("http://style.com/marble.png") } </style ===========> Darn nesa o esponiad BackGrounds repeat The image is repeated both horizontally and vertically. repeat-x The image is repeated horizontally only. repeat-y The image is repeated vertically only. no-repeat The image is not repeated: only one copy of the image is drawn. Example(s): BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; } Maer code yma yn gwneud y llyn Ganoli, wedyn copio ei hyn i greu patrwm mewn lein ar yr axes 'y' ==========> This example creates an infinite vertical band that remains "glued" to the viewport when the element is scrolled. BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; } ==========> <percentage> <percentage> With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area. <length> <length> With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area. top left and left top Same as '0% 0%'. top, top center, and center top Same as '50% 0%'. right top and top right Same as '100% 0%'. left, left center, and center left Same as '0% 50%'. center and center center Same as '50% 50%'. right, right center, and center right Same as '100% 50%'. bottom left and left bottom Same as '0% 100%'. bottom, bottom center, and center bottom Same as '50% 100%'. bottom right and right bottom Same as '100% 100%'. If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, (e.g., '50% 2cm'). Negative positions are allowed. Keywords cannot be combined with percentage values or length values (all possible combinations are given above). Example(s): BODY { background: url("banner.jpeg") right top } /* 100% 0% / BODY { background: url("banner.jpeg") top center } / 50% 0% / BODY { background: url("banner.jpeg") center } / 50% 50% / BODY { background: url("banner.jpeg") bottom } / 50% 100% */ If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding area. For example, BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } In the example above, the (single) image is placed in the lower-right corner of the viewport. ================================ TO FIX BGROUND IMAGE IN PLACE <body bgproperties="fixed"> or <style> body {background-attachment:fixed} </style> =============================== Adding A Background Image To A TextArea <style> textarea{ background-image:url(blue_saturn.jpg); color:ff0000; } </style> //-->
[ oo2 }	Borders==CSS Style, with thanks to W3C, without whom none of this could be.	<!-- <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p>The "border-style" property is not recognized by Netscape 4.</p> <p>Netscape 6 supports all border styles.</p> <p>Internet Explorer 5.5 supports all border styles. Internet Explorer 4.0 - 5.0 do not support the "dotted" and "dashed" values</p> <p class="dotted"> A dotted border</p> <p class="dashed"> A dashed border</p> <p class="solid"> A solid border</p> <p class="double"> A double border</p> <p class="groove"> A groove border</p> <p class="ridge"> A ridge border</p> <p class="inset"> An inset border</p> <p class="outset"> An outset border</p> ============================= div.whatEver { bla:150px; bla:30px; bla:0px; border:1px solid black; border-top:1px solid #ffffff; border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; } ============================= table {border-width: thin medium thick none} top border will be thin, right border will be medium, bottom border will be thick, left side will have no border //-->
[ oo3 }	CSS ScrollBars	<!--- <style type="text/css"> <!== BODY{ scrollbar-face-color:#076076; scrollbar-arrow-color:#ff9922; scrollbar-track-color:'#cacaca'; scrollbar-shadow-color:'cac8ae'; scrollbar-highlight-color:'ffffff'; scrollbar-3dlight-color:#0099a2; scrollbar-darkshadow-Color:#94b2b4; } //--> //-->
[ oo4 }		<!--- a:link { text-decoration:none; color: #DCDCDC; } a:visited { text-decoration:none; color: #FFFFF0; } a:active{ text-decoration:none; color: #8B0000; } a:hover{ text-decoration:none; color: #FF6347; } //-->
[ oo5 }		<!-- //-->
[ oo6 }		<!-- //-->

[ An element can make/have more than one 'CSS attributes/properties' call. eg ; <table class='bobuncle fannyaunt' ....etc, calls to CSS ; table.bobuncle {...blablabla! and/or .fannyaunt {.....tym ti tym ti di , which gives the table both props'.
The same 'CSS attributes/properties' can be given, in the <style> dept to different element, in the <body> dept, by stating comma separated choices/class 'calls',
like, 'p.bobUncle, li.fannyAunt, div.cousinDick { width:importantinches;.....'. But do then look out for repeated and/or crossed prop/style command calls ]