No Break Space
or
<p> </p>
CSS class vs. ID
The ID selector specifies a style for a unique element, defined with a “#”. Do not start an ID with a number!
The Class selector specifies a style for a group of elements, defined with a “.”
OVERRIDE INLINE STYLES
Put the offending style into brackets [ ].
[.stylename] {font-size: 12px;}
FIX PURE AND SIMPLE THEMES TOGGLE MENU RIGHT AND BOTTOM BORDER OVERFLOW ISSUE
[.nav-menu .navmenu] {
overflow: none !important;
}
Disable links
pointer-events: none !important;
cursor: default !important;
Make an .htaccess file with these parameters to display the entire file name of the content in a directory without using an index file
Options +Indexes
IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*
Basic text link
a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: none; color: #777;}
a:active {text-decoration: none; color: #777;}
For an alternate link style
a.alt:link {text-decoration: none; color: #000; font-weight:bold;}
a.alt:visited {text-decoration: none; color: #000; font-weight:bold;}
a.alt:hover {text-decoration: none; color: #777; font-weight:bold;}
a.alt:active {text-decoration: none; color: #777; font-weight:bold;}
and the HTML is:
<a href=”yourlink.html” class=”alt”>link</a>
Mailto
<a href=”mailto:johndoe@website.com”>Contact John</a>
Inline Style
<div style=”margin-left:50px;”></div>
or add a style to any tag
<p style=”margin-left:50px;”></p>
Text Styling
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
letter-spacing: 0px;
line-height: 0px;
text-transform:uppercase;
text-transform:capitalize;
text-transform:lowercase;
Horizontal Rule
hr {background:#000; width:100px; height: 1px;}
Centering can be frustrating! Put this in your HTML
<div align=”center”></div>
Span
<span class=“xxx”></span>
Text Shadow
rgba is: red (0-255), green (0-255), blue (0-255), alpha (0.0-1)
The 3 positions (shown as px) are: X axis for centering left and right, Y axis for centering top and bottom, and the amount of blur. You can use negative numbers for the position and even apply multiple shadows at different positions and opacity for effect!
text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);
Box Shadows – Make sure you cover all of the browsers!
-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′)”;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′);
Box Shadows OFF!
-moz-box-shadow: 0px 0px 0px #444 !important;
-webkit-box-shadow: 0px 0px 0px #444 !important;
box-shadow: 0px 0px 0px #444 !important;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′)” !important;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′) !important;
Leave yourself notes in CSS
/* Enclosing a reminder about your CSS code within a /* */ comment is a great idea */
Leave yourself notes in HTML
<!– Enclosing a reminder about your CSS code within a <!– –> comment is a great idea –>
CSS Override (add this to the end of a CSS string to override any existing CSS)
!important
Want to turn an element off?
display: none;
Turn off that hyphenation!
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
word-wrap: normal;
Gradient Backgrounds
background: rgb(110,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(110,0,0,1) 0%, rgba(176,0,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,0,0,1)), color-stop(100%,rgba(176,0,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* IE10+ */
background: linear-gradient(top bottom, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6e0000′, endColorstr=’#b00010′,GradientType=0 ); /* IE6-9 */
Background Image No-Repeat
background-image: url(‘images/logo.png’);
background-repeat: no-repeat;
Float & Clear
If you float left or right you will generally want to clear the float so that text will wrap under the object you are floating. Unfortunately, there is still no float center.
<div style=”float:left;”> </div>
<div style=”float:right;”> </div>
<div style=”clear:left;”> </div>
<div style=”clear:right;”> </div>
<div style=”clear:both;”> </div>
Round Corners or Radius
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
border:1px solid #fff;
Text Selection Color
::-moz-selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;
}
::selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;
}
