cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div style="width:910px; text-align:left; margin: 0px auto 0px auto; padding:20px;">

<span class="navpart">Cascading Style Sheet</span>

<br />

<div class="left">

<span class="bolet">CSS:</span> External, Internal, Inline (last overrides first)

&nbsp;&nbsp;&nbsp; 

/* This is a comment among CSS. */

<br /><br />

<span class="bolet">Class and id:</span>
&nbsp;

.classname 

&nbsp;

#idname

<br />

Class names can be repeated but each id must be unique.
Classes can be applied to specific elements or a combination of different elements.

<br />

img.class { ... } (applies only to pictures of that class)

<br />

.class { ... } (applies to all elements of that class)

<br /><br />

<span class="bolet">Attributes for multiple classes/ids:</span> (separate with commas) &nbsp; #group5, .group6 { ... }

<br /><br />

<span class="bolet">Element with multiple classes:</span> (separate with spaces, ids are unique) 

&nbsp; class="group1 group2"

<br /> 

&lt;span class="group1 group2"&gt; &nbsp; <span class="group1 group2"> 

.group1 { text-decoration:underline; }

.group2 { font-style:italic; } 

</span> &nbsp; &lt;/span&gt;

<br /><br />

<span class="bolet">Affect element type inside class/id:</span> &nbsp; .group0 img { ... }

<br /> 

<div id="group3" style="text-align:left;"> &lt;div id="group3"&gt; &nbsp; &lt;span&gt; &nbsp;
<span>#group3 span { font-style:italic; }</span>
&nbsp; &lt;/span&gt; &nbsp; text &nbsp;  &lt;/div&gt; </div> 

<br />

<span class="bolet">!important;</span> Added before the semi-colon on attributes so they're not overridden by the CSS order.
<br />

&lt;span class="group7" style="text-decoration:none;"&gt; &nbsp; <span class="group7" style="text-decoration:none;">  
.group7 { text-decoration:underline !important; } </span> &nbsp; &lt;/span&gt;

<br />

&lt;span class="group8" style="text-decoration:none;"&gt; &nbsp; <span class="group8" style="text-decoration:none;">  
.group8 { text-decoration:underline; } </span> &nbsp; &lt;/span&gt;

<br /><br />

<span class="bolet">Focus:</span>
&nbsp;

input:focus (selected)

&nbsp;

*:focus { outline: 0px none; } (removes on click outline)

<br /><br />

<span class="bolet">CSS Links:</span>

&nbsp;

a { }
&nbsp;
a:hover { } 
&nbsp;
a.class:hover { } 

&nbsp;

:hover can also be used with other elements.

<br /><br />

<table style="float:left; margin:0px 20px 15px 0px;"><tr>

<td>inline</td>

<td>block</td>

</tr><tr>

<td class="showbor" style="padding:5px; width:100px; text-align:left; vertical-align:top;">
<div class="showbor" style="display:inline; text-align:center;">01</div>
<div class="showbor" style="display:inline; text-align:center;">02</div>
</td>

<td class="showbor" style="padding:5px; width:100px; text-align:left; vertical-align:top;">
<span class="showbor" style="display:block; width:50px; text-align:center;">03</span>
<span class="showbor" style="display:block; width:50px; text-align:center;">04</span>
</td>

</tr><tr>

<td colspan="2">inline-block</td>

</tr><tr>

<td colspan="2" class="showbor" style="padding:5px;">
<span class="showbor" style="display:inline-block; width:50px; text-align:center;">05</span>
<span class="showbor" style="display:inline-block; width:50px; text-align:center;">06</span>
<span class="showbor" style="display:inline-block; width:50px; text-align:center;">07</span>
</td>

</tr></table>

<script>

function viblo() { 
document.getElementById("showhide").style.visibility = "visible";
document.getElementById("showhide").style.display = "block"; }

function hide() { 
document.getElementById("showhide").style.visibility = "hidden";
document.getElementById("showhide").style.display = "block"; }

function noshow() { 
document.getElementById("showhide").style.visibility = "hidden";
document.getElementById("showhide").style.display = "none"; }

</script>

<div class="showbor" style="display:inline-block; float:right; padding:5px; text-align:center; margin:0px 0px 15px 15px;">
<span class="textlink" onclick="viblo();">Visible/Block</span> <br /> 
<span class="textlink" onclick="hide();">Hidden/Block</span> <br /> 
<span class="textlink" onclick="noshow();">Hidden/None</span> 
<br />
<div class="showbor" style="width:130px; padding:5px; margin:0px auto 0px auto; display:block; visibility:visible; text-align:center;" id="showhide"> Example </div>
</div>

<span class="bolet">Display:</span>
&nbsp;

display:inline; (elements are next to each other with the space the content occupies)
<br />
display:block; (new elements go to the next line)
<br />
display:inline-block; (elements are next to each other but can be given a specific size)
<br />
display:none; &nbsp; (makes elements invisible, they take up no space)
<br /><br />

<span class="bolet">Visibility:</span>
&nbsp;
visibility:visible; &nbsp; (elements are shown)
<br />
visibility:hidden; &nbsp; (makes elements invisible, they take up the same space)

<br /><br />

<script> function showtext() { 
if (document.getElementById("spoiler").style.visibility == "hidden") 
{ document.getElementById("spoiler").style.visibility = "visible"; 
document.getElementById("showhidetext").innerHTML = "Hide"; } 
else { document.getElementById("spoiler").style.visibility = "hidden"; 
document.getElementById("showhidetext").innerHTML = "Show"; } } </script>

<span class="bolet">Hidden text:</span> &nbsp; 
<span class="textlink" onclick="showtext();" id="showhidetext">Show</span> 
<span id="spoiler" style="visibility:hidden;">Secret</span>

<br />

<span class="itlet">
function showtext() { 
if (document.getElementById("spoiler").style.visibility == "hidden") 
{ document.getElementById("spoiler").style.visibility = "visible"; 
document.getElementById("showhidetext").innerHTML = "Hide"; } 
else { document.getElementById("spoiler").style.visibility = "hidden"; 
document.getElementById("showhidetext").innerHTML = "Show"; } }
</span>

<br /><br />

<span class="bolet">Mouse cursors:</span> &nbsp; 

<span style="cursor:url(design/choco1.cur),url(design/choco2.gif),auto;">cursor:url(file1.cur),url(file2.gif),auto;</span>

<span style="cursor:auto; white-space: nowrap;">cursor:auto;</span>

<span style="cursor:default; white-space:nowrap;">cursor:default;</span>

<span style="cursor:pointer; white-space:nowrap;">cursor:pointer;</span>

<span style="cursor:crosshair; white-space:nowrap;">cursor:crosshair;</span>

<span style="cursor:move; white-space:nowrap;">cursor:move;</span>

<span style="cursor:help; white-space:nowrap;">cursor:help;</span>

<span style="cursor:progress; white-space:nowrap;">cursor:progress;</span>

<span style="cursor:wait; white-space:nowrap;">cursor:wait;</span>

<span style="cursor:text; white-space:nowrap;">cursor:text;</span>

<span style="cursor:n-resize; white-space: nowrap;">cursor:n-resize;</span>

<span style="cursor:ne-resize; white-space: nowrap;">cursor:ne-resize;</span>

<span style="cursor:e-resize; white-space: nowrap;">cursor:e-resize;</span>

<span style="cursor:se-resize; white-space: nowrap;">cursor:se-resize;</span>

<span style="cursor:s-resize; white-space: nowrap;">cursor:s-resize;</span>

<span style="cursor:sw-resize; white-space: nowrap;">cursor:sw-resize;</span>

<span style="cursor:w-resize; white-space: nowrap;">cursor:w-resize;</span>

<span style="cursor:nw-resize; white-space: nowrap;">cursor:nw-resize;</span>

<span style="cursor:inherit; white-space: nowrap;">cursor:inherit;</span>

<br /><br />

<div id="scroll1" class="showbor" style="width:100px; height:80px; overflow-x:hidden; overflow-y:scroll; margin:0px 15px 15px 0px; float:left; text-align:center;">
overflow-x: hidden; overflow-y: scroll; <br /><br />
something something something </div>

<span class="bolet">Webkit Scrollbars:</span> &nbsp; 

div#scroll1::-webkit-scrollbar { width:10px; height:10px; } /* size of scrollbar */

<br />

<span style="color:#ff70c3; font-size:20px;">&hearts;</span> div#scroll1::-webkit-scrollbar-track { background-color:#ff70c3; border-radius: 50px; } /* scrollbar background */

<br />

<span style="color:#2d8fff; font-size:20px;">&spades;</span> div#scroll1::-webkit-scrollbar-thumb { background-color:#2d8fff; border-radius: 50px; } /* scroller */

<br /><br />

<div id="scroll2" class="showbor" style="width:100px; height:100px; overflow:scroll; margin:0px 0px 15px 15px; float:right; text-align:center;">
overflow: scroll; <br /><br />
something something something something something </div>

<span style="color:#33c45d; font-size:20px;">&clubs;</span> div#scroll2::-webkit-scrollbar-button { background-color:#33c45d; border-radius: 50px; } /* scrollbar button */

<br />

<span style="color:#ff9258; font-size:20px;">&diams;</span> div#scroll2::-webkit-scrollbar-corner { background-color:#ff9258; border-radius: 50px; } /* corner between bars */

<br /><br />

<div id="scroll3" class="showbor" style="width:150px; height:100px; overflow:scroll; margin:0px 15px 15px 0px; float:left; text-align:center;">
overflow: scroll; <br />
<div class="showbor" style="display:block; background-image:url(design/skyblueline.png); width:200px; height:100px; margin:10px;"></div> </div>

 div#scroll3::-webkit-scrollbar-button:horizontal:increment { background-image:url(design/scrollright.gif); 
background-position:center center; background-repeat:no-repeat; }

<br />

 div#scroll3::-webkit-scrollbar-button:horizontal:decrement { background-image:url(design/scrollleft.gif); 
background-position:center center; background-repeat:no-repeat; }

<br />

 div#scroll3::-webkit-scrollbar-button:vertical:increment { background-image:url(design/scrolldown.gif); 
background-position:center center; background-repeat:no-repeat; }

<br />

 div#scroll3::-webkit-scrollbar-button:vertical:decrement { background-image:url(design/scrollup.gif); 
background-position:center center; background-repeat:no-repeat; }

</div>
<br />
<a href="http://azurelight.net">AzureLight.net</a> | 
<a href="http://mikaristar.deviantart.com">MikariStar.DeviantArt.com</a> | 
<a href="http://artrift.com/Mikari/">ArtRift.com/Mikari/</a> | 
<a href="http://miliazure.wordpress.com">MiliAzure.WordPress.com</a>
</div>
            
          
!
            
              body { padding:0px; margin:0px; font-family:Arial; font-size:14px; line-height:20px; 
color:#393939; background-color:#c2f0ff; text-align:center; }

::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background-color:#c2f0ff; }
::-webkit-scrollbar-thumb { border-radius: 20px; background-color:#ff9adc; border: 0px none; }

.showbor { border:0px none; border:3px dotted #ff9adc; padding:0px; } 

a { color:#ff71ce; text-decoration:none; }

.group1 { text-decoration:underline; }

.group2 { font-style:italic; }

#group3 span { font-style:italic; }

.group4 { font-style:italic; }

#group5, .group6 { font-style:italic; }

.group7 { text-decoration:underline !important; }

.group8 { text-decoration:underline; }

div#scroll1::-webkit-scrollbar { width:10px; height:10px; } /* size of scrollbar */ 

div#scroll1::-webkit-scrollbar-track { background-color:#ff70c3; border-radius: 50px; } /* scrollbar background */

div#scroll1::-webkit-scrollbar-thumb { background-color:#2d8fff; border-radius: 50px; } /* scroller */

div#scroll2::-webkit-scrollbar { width:10px; height:10px; } /* size of scrollbar */ 

div#scroll2::-webkit-scrollbar-track { background-color:#ff70c3; border-radius: 50px; } /* scrollbar background */

div#scroll2::-webkit-scrollbar-thumb { background-color:#2d8fff; border-radius: 50px; } /* scroller */

div#scroll2::-webkit-scrollbar-button { background-color:#33c45d; border-radius: 50px; } /* scrollbar button background */

div#scroll2::-webkit-scrollbar-corner { background-color:#ff9258; border-radius: 50px; } /* corner between vertical and horizontal bars */

div#scroll3::-webkit-scrollbar { width:15px; height:15px; } /* size of scrollbar */ 

div#scroll3::-webkit-scrollbar-track { background-color:#ff70c3; border-radius: 50px; } /* scrollbar background */

div#scroll3::-webkit-scrollbar-thumb { background-color:#2d8fff; border-radius: 50px; } /* scroller */

div#scroll3::-webkit-scrollbar-corner { background-color:#ff9258; border-radius: 50px; } /* corner between vertical and horizontal bars */

div#scroll3::-webkit-scrollbar-button { background-color:#33c45d; border-radius: 50px; } /* scrollbar button background */

div#scroll3::-webkit-scrollbar-button:horizontal:increment { background-image:url(design/scrollright.gif); 
background-position:center center; background-repeat:no-repeat; }

div#scroll3::-webkit-scrollbar-button:horizontal:decrement { background-image:url(design/scrollleft.gif); 
background-position:center center; background-repeat:no-repeat; }

div#scroll3::-webkit-scrollbar-button:vertical:increment { background-image:url(design/scrolldown.gif); 
background-position:center center; background-repeat:no-repeat; width:10px; height:10px; }

div#scroll3::-webkit-scrollbar-button:vertical:decrement { background-image:url(design/scrollup.gif); 
background-position:center center; background-repeat:no-repeat; }
            
          
!
999px
Loading ..................

Console