A personal repository of random information in compensation for a fatigued biological computer
Breaded IT » Web Development » Internet Tools » CSS
http://www.libhound.com/web-development/user-interfaces/longest-list-of-css-frameworks
Layout tools
http://960.gs/
http://www.blueprintcss.org/
Made menus:
http://www.cssplay.co.uk/menus/
http://www.cssplay.co.uk/menus/pro_line_down_fly.html quite nice actually..
http://www.cssplay.co.uk/menus/skeleton3.html - cool ***
http://www.cssplay.co.uk/menus/elegant2.html - cool
http://www.cssplay.co.uk/menus/circular-sub.html coolest..
http://www.cssplay.co.uk/menus/three-up-two-down.html
http://www.cssplay.co.uk/menus/dd_valid_2.html
http://www.cssplay.co.uk/menus/flyout_4level.html
http://www.cssplay.co.uk/menus/flyoutt.html
Hover reactive buttons via CSS, generated by http://www.thesitewizard.com/
Save this into a new css file xxx.css
#tswcssbuttons { width: 180px ; text-align: center ; } #tswcssbuttons ul { margin: 0 ; padding: 0 ; list-style: none ; } #tswcssbuttons li { margin: 0 ; padding: 0 ; display: block ; list-style: none ; font-family: Arial, Helvetica, sans-serif ; } #tswcssbuttons li a { color: #fff ; background-color: #000 ; border: 1px outset #f0f0f0 ; width: 180px ; text-decoration: none ; display: block ; } #tswcssbuttons li a:hover { color: #000 ; background-color: #c0c0c0 ; } |
Add this into the target page HEAD section:
<link rel="stylesheet" type="text/css" href="http://www.test.com/tswnavbar.css" /> |
Add this into target web page:
<div id="tswcssbuttons"> <ul> <li><a href="button1">Button 1</a></li> <li><a href="button2">Button 2</a></li> <li><a href="button3">Button 3</a></li> <li><a href="button4">Button 4</a></li> <li><a href="button5">Button 5</a></li> </ul> </div> |
http://www.tizag.com/cssT/index.php
Class separates one CSS set from another.
for example:
css
p: {fontsize: 100%;}
p.halffont {fontsize: 50%;}
---
In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).
The HTML refers to the CSS by using the attributes id and class.
You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.hereiam { whatever } will only be applied to paragraph elements that have the class 'hereiam'.
html
body
<p>Normal 100 percent text</p>
<p class = "halffont">Half size text<p>
#Layout p { margin: 10px 5px 5px 0;
ID's are used to format one specific thing and are only supposed to be referenced once within a web page.
#Footer { clear: both; width: 800px; height: 5em; background: transparent url(../images/footerBottom.gif) no-repeat bottom left; text-align: center; } #Footer .footerTop { width: 100%; background: transparent url(../images/footerTop.gif) no-repeat top left; display: block; height: 2em; } #Footer p { color: #fff; font-size: 1.1em; text-align: center; margin-top: -0.6em; } #Footer a { color: #fff; text-decoration: none; } #Footer a:hover { color: #fff; text-decoration: underline; }