CSS / HTML Snippets

In web development, time is of the essence, and efficiency is key. For designers and developers, the ability to quickly implement essential features on a webpage can make all the difference between a timely, visually stunning project and a never-ending code odyssey. That’s where CSS and HTML snippets come to the rescue, offering a treasure trove of pre-made code segments that can be copied and pasted directly into your projects.

Here is a small curated collection of CSS/HTML snippets that are indispensable for our web designers.

 

How to Make A Responsive Grid

Thanks to W3Docs

#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(33%, 33%));
grid-gap: 5px;
min-width:100%;
}
@media screen and (max-width: 1100px) {
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(33%, 49%));
grid-gap: 5px;
min-width:100%;
}
}
#grid > div {
font-size: 1.9em;
padding: .5em;
color: #fff;
background: #ccc;
text-align: center;
}
Add This To Your Page
<!– GRID –>
<div id=”grid”>
<div><!– GRID ITEM 1 –>1</div>
<div><!– GRID ITEM 2 –>2</div>
<div><!– GRID ITEM 3 –>3</div>
<div><!– GRID ITEM 4 –>4</div>
<div><!– GRID ITEM 5 –>5</div>
<div><!– GRID ITEM 6 –>6</div>
</div>

Basic Box

.basicbox {
width:80%;
min-height:300px;
margin-left:10%;
padding:20px;
color:white;
font-size:1.9em;
background:#efefef;
border:solid 1px #ccc;
}

Basic Box H2

.basicbox h2 {
color:#25aae1;
font-size:2.1em;
}

No Break Space

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

Center

<div align=”center”></div>

Span Class

<span class=“xxx”></span>

Mailto

<a href=”mailto:johndoe@website.com”>Contact John</a>

Inline Style

<div style=”margin-left:50px;”></div>
or
<p style=”margin-left:50px;”></p>

Text Shadow

text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);

A Note About Text Shadows

rgba is: red (0-255), green (0-255), blue (0-255), alpha (0.0-1)
3 shadow settings (in the example shown as px, pixels) 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 opacities for effect!)

Box Shadow

background-image: linear-gradient(to bottom right, #FFC906, #FFDD5E, #FFC906);

Example of a 3 color gradient of gold blending from top left to bottom right.

Text Links

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: #444;}

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>

Text Styling

font-size: 12px;
font-weight: normal;
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;}

Check out CSS Tricks for lots of great HR styles

Class vs. ID

The ID selector specifies a style for a unique element, defined with a “#“, #id_selector.
(Do not start an ID with a number)

The Class selector specifies a style for a group of elements, defined with a “.“, .class_selector.

Leave Yourself Notes/Comments In CSS

/* Enclosing a reminder about your CSS code within a /* */ comment is a great idea */

Leave Yourself Notes/Comments In HTML

<!– Enclosing a reminder about your HTML code within a –> <!– comment is a great idea –>

CSS Override (Add To The End Of A CSS String)

!important

Turn Off Element

display: none;

Turn Off 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>

Radius/Rounded Corners

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;
}

Override Inline Styles

Put the style into brackets [ ] to override.
[.stylename] {font-size: 12px;}

Disable links

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

.htaccess to display full file name of a directory without an index file

Options +Indexes
IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*