Setting style <div class="style1"> <div style="color:#FF0000"> <span style="color:#FF0000">colored</span> Size width: 100%; height: 20px; Padding padding: 2px; (All) padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; Margin margin: 2px; (All) margin: 1px 2px; (Top+Bottom, Right+Left) margin: 1px 2px 3px; (Top, Right+Left, Bottom) margin: 1px 2px 3px 4px; (Top, Right, Bottom, Left) margin-top: 2px; margin-right: 2px; margin-bottom: […]
Category: CSS
.CSS Basics(6)
.Debugging CSS(1)
.Examples(14)
Align(3)
Animation(1)
Background(4)
Border(2)
Browser(2)
Button(2)
Columns(1)
CSS Files(1)
Defines(1)
Display(2)
Files(3)
Float(2)
Forms(9)
Hidden(1)
Images(7)
Links(1)
Lists(2)
Margin(1)
Maths(1)
Override Styles(2)
Padding(1)
Positioning(2)
Responsive CSS(4)
Spacing(2)
Text(13)
Variables(1)
Visibility(1)
Zoom(1)
Calculations
Comments
/* My Comment */
Cursor / Mouse Pointer
Changing cursor when over a class to be a pointer (e.g. indicate a link present)
Hover
You can use :Hover on anything – doesn't have to be a link E.g. .my_style_name:Hover { color: #000000; } Tool Tip Style Hover Text You can use the title attribute to add pop up text to most things: <span title="Text that will show on hover">Text on page</span> Using CSS instead when you want to […]
Important
p { color: red !important; }
Rollover buttons
Based on this guide http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript Create your image double height with the roll over image in the bottom half In the <head> <style type=”text/css”> a.myrollover { display: block; width: 80px; height: 30px; background-image: url(‘button_combined.png’); } a.myrollover:hover { background-position: center bottom; } </style> Then for your link <a href=”#” class=”myrollover”></a>
Scroll Bar Box
Fixed size box with scroll bars pre { background-color:#FDFDFD; font: 1.0em ‘Courier New’, Courier, Fixed; overflow: auto; line-height: 1em; width: 640px; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; padding: 5px; text-align: left; Scroll bars only appear when you hover pre { background-color:#FDFDFD; font: 1.0em ‘Courier New’, Courier, Fixed; overflow: hidden; line-height: 1em; width: […]
Tables
HTML <table id=”my_table”> CSS table#my_table { border-collapse:none; width:100% } table#my_table td { margin: 1px; color: #000; padding: 2px 1px; text-align: center; font-weight: bold; } table#my_table td a:hover { text-decoration:none; }
Width
Calculate width based on total width Width only as wide as needed for the text Min width needed to fit the content Min possible (move things under each other to minimise) Min needed without making thinner than normal