In your html / php file add this (The old type=”text/css” is no longer required) Create your styles.css file An example with a good main stylesheet default content
Category: .Examples
Responsive(1)
Centered Page
Basic Centered Page <style type="text/css"> .page_main { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 6px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } </style> </head> <body> <div class="page_main"> </div> </body>
Classes Of Things
Referring To The Class Name Of Specific Tags Hide the li class "comments" in ul "meta-single": ul.meta-single li.comments { display: none; }
Clear Floats
Clear Floats
Creating A Page On A Background
CSS .page_background { background-color: #FFFFFF; width: 924px; padding: 8px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: 0px; } .page_background_shaddow_top { width: 950px; padding: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(images/background_drop_shaddow_top.gif); height: 5px; } .page_background_shaddow_middle { width: 950px; padding: 0px; background-image: url(images/background_drop_shaddow_sides.gif); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; […]
Draw Box
<div style="width:20px; height:6px; background: #FF0000;"></div>
Hide Items Using CSS
.post-date { display: none; }
Insert Margin
Insert Margin <div style=”margin-top: 10px;”></div> <div style=”padding-top: 10px;”></div>
Positioning An Image
Positioning An Image <div style=”padding-top:14px; padding-left:20px;”> <div style=”width:165px; height:60px;”> <img src=”/home/my_image.png” alt=”Home” /> </div> </div>
Rows Of DIV Boxes
3 DIV boxes aligned in a single row Center align the group of boxes