CSS / HTML Cheat Sheet

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 “.”

Disable links

pointer-events: none !important;
cursor: default !important;

Make an .htaccess file with these parameters to display the entire file name of 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;

No Break Space

&nbsp;
or
<p>&nbsp;</p>

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;”>&nbsp;</div>
<div style=”float:right;”>&nbsp;</div>
<div style=”clear:left;”>&nbsp;</div>
<div style=”clear:right;”>&nbsp;</div>
<div style=”clear:both;”>&nbsp;</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;
}

Last Modified on June 8, 2016
This entry was posted in Uncategorized
Bookmark this article CSS / HTML Cheat Sheet