Web programming Tutorial: css

Showing posts with label css. Show all posts

paper effect using css

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOi7k2Y91HG2yyFf26f1tq_xVIEfAvQ0YIGSMT4RmiH-MZ9cMK22YPnrFllj_s_EboQfmMKtmGLQ6nRslZJzGk1Ar85M_TceG9dBk54fU6joHIs4tUg5wwFMCS3HR9OYyHFcCJg9zk4Nbl/s1600/css3-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOi7k2Y91HG2yyFf26f1tq_xVIEfAvQ0YIGSMT4RmiH-MZ9cMK22YPnrFllj_s_EboQfmMKtmGLQ6nRslZJzGk1Ar85M_TceG9dBk54fU6joHIs4tUg5wwFMCS3HR9OYyHFcCJg9zk4Nbl/s320/css3-1.jpg" width="320" /></a></div>
In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS.</div>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow</h2>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
<br /></div>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> inset horizontal vertical blur spread colour<span class="token punctuation">;</span></code></pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<strong style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px; text-align: left;">Examples</strong></div>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 10px 10px<span class="token punctuation">;</span>
<span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 10px 10px 5px #888<span class="token punctuation">;</span>
<span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> inset 2px 2px 2px 2px black<span class="token punctuation">;</span>
<span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600<span class="token punctuation">;</span></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
Browser Support</h3>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
All of the major newest browsers support box-shadow property.</div>
<ul style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 24px;">
<li>Internet Explorer 9.0 and higher</li>
<li>Firefox 3.5 and higher</li>
<li>Chrome 1 and higher</li>
<li>Safari 3 and higher</li>
<li>Opera 10.5 and higher</li>
</ul>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
With many new CSS3 properties you need to prefix the property with browser specific tags.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
For firefox you need to use <em>-moz-</em>, for chrome/safari you need to use <em>-webkit</em>.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
The box-shadow property is no different.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
For Firefox 3.5 you need to prefix with -moz-boz-shadow, but for Firefox 4.0 and higher you don't need to use the prefix anymore.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
For Chrome/safari you still need to use the -webkit-box-shadow.</div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
For opera you don't need to prefix the property and can just use box-shadow.</div>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 1</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KYLOHxTLBsJW0qvYNrleqiVmp9ahV67_nA0rvDCGzTWWxJKCuTmylNxObfD9q9GbMDdnextlRWyHDVpAi9rJBeEo5OwJhCvXDDXmWdaMIgqP-8pdcyNhp66kTWBLnd_GCyX4TMn06coV/s1600/CSS-Box-Shadow-Effects1-590x206.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KYLOHxTLBsJW0qvYNrleqiVmp9ahV67_nA0rvDCGzTWWxJKCuTmylNxObfD9q9GbMDdnextlRWyHDVpAi9rJBeEo5OwJhCvXDDXmWdaMIgqP-8pdcyNhp66kTWBLnd_GCyX4TMn06coV/s320/CSS-Box-Shadow-Effects1-590x206.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
This will create a standard box shadow effect with the shadow moved into the element to create a raised box look.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<div>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect1">
	<h3>Effect 1</h3>
</div></code></pre>
</div>
<br />
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 1
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect1</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 10px 6px -6px #777<span class="token punctuation">;</span>
	   <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span> 0 10px 6px -6px #777<span class="token punctuation">;</span>
	        <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 0 10px 6px -6px #777<span class="token punctuation">;</span>
</code></pre>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: #272822; color: #f8f8f2; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; text-align: left; word-spacing: normal;">}</span></div>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 2</h2>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ7AvzFuZpy4cM-KWKwW_ynU6tJAsoqTu1S5bf_YEmQG-Jjr1kdAEDqMuqswKysria_K8ONtSLlnBlV-UsPsy8iwCHWTXI_Go4lfTQYT2vHOVREBm5kSvFnXdGaE_-H_lrsbsjDSVUif1W/s1600/CSS-Box-Shadow-Effects2-590x206.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ7AvzFuZpy4cM-KWKwW_ynU6tJAsoqTu1S5bf_YEmQG-Jjr1kdAEDqMuqswKysria_K8ONtSLlnBlV-UsPsy8iwCHWTXI_Go4lfTQYT2vHOVREBm5kSvFnXdGaE_-H_lrsbsjDSVUif1W/s320/CSS-Box-Shadow-Effects2-590x206.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect2">
	<h3>Effect 2</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 2
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect2
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect2:before, .effect2:after
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">max-width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span> #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect2:after
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 3</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEydgSmnUociWibGJzITaTYuqkVN6Yz94Fp-Gi0P8-EYAcSPNnduKTfAWPKT6Cb3LYzclLbxCNaSZLl6rp07zKN0OUfi1JjGxeSdkFoeL2GF-CoOD5wyEuYcLbSE9xroPXOesvYa1xl5MC/s1600/CSS-Box-Shadow-Effects3-590x205.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEydgSmnUociWibGJzITaTYuqkVN6Yz94Fp-Gi0P8-EYAcSPNnduKTfAWPKT6Cb3LYzclLbxCNaSZLl6rp07zKN0OUfi1JjGxeSdkFoeL2GF-CoOD5wyEuYcLbSE9xroPXOesvYa1xl5MC/s320/CSS-Box-Shadow-Effects3-590x205.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
This uses half of the effect approve and will add a lifted corner to the bottom left of the box.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect3">
	<h3>Effect 3</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 3
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect3
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect3:before
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">max-width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span> #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span> rotate(-3deg)<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 4</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Lk5uj6ma5FBJOIadRJ3Mw5iIavuLv2s-yxP-aJdnIz8LMnK563wQFKshgQ2lw5f9D-v-96fwG9RzAkY7064V5mkojdHLt-DZd0Q5Iv7KCGrJW3Nr8O5bgdZgd_bFHBEDEPUv-o3k_CtP/s1600/CSS-Box-Shadow-Effects4-590x205.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Lk5uj6ma5FBJOIadRJ3Mw5iIavuLv2s-yxP-aJdnIz8LMnK563wQFKshgQ2lw5f9D-v-96fwG9RzAkY7064V5mkojdHLt-DZd0Q5Iv7KCGrJW3Nr8O5bgdZgd_bFHBEDEPUv-o3k_CtP/s320/CSS-Box-Shadow-Effects4-590x205.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
Effect 4 will lift the corner on the bottom right of the box.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect4">
	<h3>Effect 4</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 4
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect4
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect4:after
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">max-width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span> #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 0 15px 10px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span> rotate(3deg)<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 5</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsyvBADqDazJNDo9BVBo79aTN7lEgAgPPs0Okwrq9GWONjJXdW45wB8tHBWWofVZTHcAEzsrjB57-1JZNr-OuIIwg01uxuIR_eydPvDerllLvs8t75xMIHOl49vbqBnsHNOlgBhhzlgab/s1600/CSS-Box-Shadow-Effects5-590x223.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsyvBADqDazJNDo9BVBo79aTN7lEgAgPPs0Okwrq9GWONjJXdW45wB8tHBWWofVZTHcAEzsrjB57-1JZNr-OuIIwg01uxuIR_eydPvDerllLvs8t75xMIHOl49vbqBnsHNOlgBhhzlgab/s320/CSS-Box-Shadow-Effects5-590x223.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
This is expands on the effect 2 and will increase the angle of the shadows.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect5">
	<h3>Effect 5</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 5
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect5
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect5:before, .effect5:after
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">max-width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span> #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span> 0 35px 20px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span> 0 35px 20px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span> 0 35px 20px #777<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span> rotate(-8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span> rotate(-8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span> rotate(-8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span> rotate(-8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span> rotate(-8deg)<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect5:after
</span><span class="token punctuation">{</span>
  <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span> rotate(8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span> rotate(8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span> rotate(8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span> rotate(8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span> rotate(8deg)<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 6</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9FxGk9jxhUZPSAz9yf45f6I1d8b_5RnFcslXSRLRToqKkNf5-Q42ZRkcbH_YhTtbPCtxVasTRtNYdiADWdGnKHZ1nMvrcljH5o7JvGyCPW2_iqdpjQokLFyy9jjWytSNtUOpLkM2IyZqJ/s1600/CSS-Box-Shadow-Effects6-590x192.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9FxGk9jxhUZPSAz9yf45f6I1d8b_5RnFcslXSRLRToqKkNf5-Q42ZRkcbH_YhTtbPCtxVasTRtNYdiADWdGnKHZ1nMvrcljH5o7JvGyCPW2_iqdpjQokLFyy9jjWytSNtUOpLkM2IyZqJ/s320/CSS-Box-Shadow-Effects6-590x192.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
This effect will create a curved shadow at the bottom of the box.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect6">
	<h3>Effect 6</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 6
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect6
</span><span class="token punctuation">{</span>
  	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>       
    <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
       <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
            <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect6:before, .effect6:after
</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> 
    <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span>-1<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-moz-border-radius</span><span class="token punctuation">:</span>100px / 10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">border-radius</span><span class="token punctuation">:</span>100px / 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 7</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBY9-WNnG33u3GV2BQU3bZf7lzMHfUU0DlSvKc8-ijN1gT0CxLwFalleGHF3PTbQyWExphNndNsX-aeo2gguCUg1asVf3QUsPPv_GpCkls_Ymacl2LyuJKuTdGYoYFuh8mVzpQgSFTpVQ8/s1600/CSS-Box-Shadow-Effects7-590x202.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBY9-WNnG33u3GV2BQU3bZf7lzMHfUU0DlSvKc8-ijN1gT0CxLwFalleGHF3PTbQyWExphNndNsX-aeo2gguCUg1asVf3QUsPPv_GpCkls_Ymacl2LyuJKuTdGYoYFuh8mVzpQgSFTpVQ8/s320/CSS-Box-Shadow-Effects7-590x202.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
This effect uses the previous effect and adds another shadow to the top of the box.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect7">
	<h3>Effect 7</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 7
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect7
</span><span class="token punctuation">{</span>
  	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>       
    <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
       <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
            <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect7:before, .effect7:after
</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> 
    <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span>-1<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-moz-border-radius</span><span class="token punctuation">:</span>100px / 10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">border-radius</span><span class="token punctuation">:</span>100px / 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token selector" style="color: #a6e22e;">.effect7:after
</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> 
    <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span> 
       <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span>     
        <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span>     
         <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span> 
            <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<h2 style="color: #333333; font-family: Ubuntu, sans-serif;">
CSS Box Shadow Effect 8</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbTUbCF_mrCl0XArV062L3ODBeHA8h4-bx0KbvC0mFxYCCQzTuKql4CGzR9gFvEkP3GkxR48PhKZpEl4nEIsznSKfaOPtWvBVtAVDJITQS0YKmXyKc8D2_45UVwNHPgfdueSwL_K_-7OP/s1600/CSS-Box-Shadow-Effects8-590x199.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="107" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbTUbCF_mrCl0XArV062L3ODBeHA8h4-bx0KbvC0mFxYCCQzTuKql4CGzR9gFvEkP3GkxR48PhKZpEl4nEIsznSKfaOPtWvBVtAVDJITQS0YKmXyKc8D2_45UVwNHPgfdueSwL_K_-7OP/s320/CSS-Box-Shadow-Effects8-590x199.png" width="320" /></a></div>
<div style="color: #333333; font-family: Ubuntu, sans-serif; font-size: 18px; line-height: 30px;">
The final effect will add rounded shadows to either side of the box.</div>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The HTML</h3>
<pre class="language-html" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code><div class="box effect8">
	<h3>Effect 8</h3>
</div></code></pre>
<h3 style="color: #333333; font-family: Ubuntu, sans-serif;">
The CSS</h3>
<pre class=" language-css" style="background-color: #272822; border-bottom-left-radius: 0.3em; border-bottom-right-radius: 0.3em; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; color: #f8f8f2; direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 18px; line-height: 24px; margin-bottom: 0.5em; margin-top: 0.5em; overflow: auto; padding: 1em; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px;"><code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token selector" style="color: #a6e22e;">.box h3</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.box </span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">width</span><span class="token punctuation">:</span>70%<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">background</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
	<span class="token property" style="color: #f92672;">margin</span><span class="token punctuation">:</span>40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true" style="color: slategrey;">/*==================================================
 * Effect 8
 * ===============================================*/</span>
<span class="token selector" style="color: #a6e22e;">.effect8
</span><span class="token punctuation">{</span>
  	<span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>       
    <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
       <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
            <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span>0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector" style="color: #a6e22e;">.effect8:before, .effect8:after
</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> 
    <span class="token property" style="color: #f92672;">z-index</span><span class="token punctuation">:</span>-1<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-webkit-box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-moz-box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">box-shadow</span><span class="token punctuation">:</span>0 0 20px rgba(0,0,0,0.8)<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">top</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">bottom</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-moz-border-radius</span><span class="token punctuation">:</span>100px / 10px<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">border-radius</span><span class="token punctuation">:</span>100px / 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token selector" style="color: #a6e22e;">.effect8:after
</span><span class="token punctuation">{</span>
	<span class="token property" style="color: #f92672;">right</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> 
    <span class="token property" style="color: #f92672;">left</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span>
    <span class="token property" style="color: #f92672;">-webkit-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span> 
       <span class="token property" style="color: #f92672;">-moz-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span>     
        <span class="token property" style="color: #f92672;">-ms-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span>     
         <span class="token property" style="color: #f92672;">-o-transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span> 
            <span class="token property" style="color: #f92672;">transform</span><span class="token punctuation">:</span>skew(8deg) rotate(3deg)<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<div>
<code class=" language-css" style="direction: ltr; font-family: Consolas, Monaco, 'Andale Mono', monospace; tab-size: 4; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px; word-spacing: normal;"><span class="token punctuation"><br /></span></code></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>

paper effect using css

In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box s...

2:20 AM

CSS Tutorial Advanced

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSPdobQakTUpz5zNeNbM4nLoaPcY91il64_OWQ5g221s_dzrqZ_nI_FSwODlirg20zQ6J0cbosKsqbfzMdk5vLTgBkSAfbUEghKqoDWTi61ANfxh6piGf9Mn3FWrnC_etvE3uI2asJRxgA/s1600/css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSPdobQakTUpz5zNeNbM4nLoaPcY91il64_OWQ5g221s_dzrqZ_nI_FSwODlirg20zQ6J0cbosKsqbfzMdk5vLTgBkSAfbUEghKqoDWTi61ANfxh6piGf9Mn3FWrnC_etvE3uI2asJRxgA/s320/css.jpg" width="320" /></a></div>
<br />
The CSS Advanced Tutorial is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.<span id="more-117" style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The Display Property</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
A key trick to the manipulation of HTML elements is understanding that there’s nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser’s default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The most fundamental types of display are <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inline</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">block-line</strong> and none and they can be manipulated with the display property and the values <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inline</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">block</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">none</strong>.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inline</strong> does just what it says – elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">block</strong> puts a line break before and after the element. <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Header</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">paragraph</strong> elements are examples of elements that are traditionally displayed block-line.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">none</strong>, well, doesn’t display the element, which may sound pretty useless but can be used to good effect with accessibility considerations (see Accessible Links), alternate stylesheets or advanced hover effects.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The original default style-sheet for this site for example, manipulates a few traditionally in-line and block-line elements to fit the design.</div>
<pre>h1 {
display: inline;
font-size: 2em;
}

#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
</pre>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">This enabled the title ‘w3programmers.com’ and the tag-line to be displayed next to each other rather than above and below each other while maintaining optimum accessibility.</span></div>
<div>
<pre>#navigation, #seeAlso, #comments, #standards {
display: none;
}
</pre>
</div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The above code is used in the print-only styles to basically ‘turn-off’ those elements, such as navigation, which are insignificant to the single page.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">display</strong>: <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">none</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">visibility</strong>: <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">hidden</strong> vary in that <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">display</strong>: <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">none</strong> takes the element completely out of play, where as <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">visibility</strong>: <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">hidden</strong> keeps the element and its flow in place without visually representing its contents. For example, if the second paragraph of 3 were set to <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">display</strong>: <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">none</strong>, the first paragraph would run straight in to the third whereas if it were set to visibility: hidden, there would be a gap where the paragraph should be.</div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Tables</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Perhaps the best way to understand the table-related display property values is to think of HTML tables.<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table</strong> is the initial display and you can mimic the tr and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">td</strong> elements with the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-row</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-cell</strong>values respectively.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The display property goes further by offering <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-colum</strong>n, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-row-group</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-column-group</strong>,<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-header-group</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-footer-group</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">table-caption</strong> as values, which are all quite self-descriptive. The immediately obvious benefit of these values is that you can construct a table by columns, rather than the row-biased method used in HTML.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Finally, the value <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">inline-table</strong> basically sets the table without line breaks before and after it.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Getting carried away with CSS tables can seriously damage your accessibility. HTML should be used to convey meaning, so if you have tabular data it should be arranged in HTML tables. Using CSS tables exclusively could result in a mash of data that is completely unreadable without the CSS. Bad. And not in a Michael Jackson way.</div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Other display types</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">list-item</strong> is self descriptive and displays as in the way that you would usually expect an <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">li</strong> HTML element to. To work properly then, elements displayed this way should be nested in a <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ul</strong> or <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ol</strong> element.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">run-in</strong> makes an element either <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">in-line</strong> or <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">block-line</strong> depending on the display of its parent. It doesn’t work on IE or Mozilla based browsers. Very helpful.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">compact</strong> also makes the element inline or block-line depending on the context. It doesn’t work that well either…</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">marker</strong> is used exclusively with the :<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">before</strong> and :<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">after</strong> pseudo elements to define the display of the value of the content property. The automatic display of the content property is already marker, so this is only useful if you are overriding a previous display property for the pseudo element.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Page Layout</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn’t, it’s just different and actually makes much more sense.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
You need to look at each part of the page as an individual chunk that you can shove wherever you choose. You can place these chunks absolutely or relative to another chunk.</div>
<h2 id="c1" style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Positioning</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">position</strong> property is used to define whether an element is <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">absolute</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">relative</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">static</strong> or <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">fixed</strong>.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The value static is the default value for elements and renders the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">position</strong> in the normal order of things, as they appear in the HTML.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">relative</strong> is much like static, but the element can be offset from its original position with the properties <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">top</strong>,<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">right</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bottom</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">left</strong>.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">absolute</strong> pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute element can be placed anywhere on the page using top, right, bottom and left.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">fixed</strong> behaves like <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">absolute</strong>, but it will absolutely position an element in reference to the browser window as opposed to the web page, so, theoretically, fixed elements should stay exactly where they are on the screen even when the page is scrolled. Why theoretically? Why else – this works great in browsers such as Mozilla and Opera, but in IE it doesn’t work at all.</div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Layout using absolute positioning</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
You can create a traditional two-column layout with absolute positioning if you have something like the following HTML:</div>
<pre><div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>

<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
</pre>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">And if you apply the following CSS:</span></div>
<div>
<pre>#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#content {
margin-left: 10em;
}
</pre>
</div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
You will see that this will set the navigation bar to the left and set the width to 10 em’s. Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page, so all that is needed is to set the left margin of the content area to be equal to the width of the navigation bar.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
How bloody easy. And you aren’t limited to this two-column approach. With clever positioning, you can arrange as many blocks as you like. If you wanted to add a third column, for example, you could add a ‘navigation2′ chunk to the HTML and change the CSS to:</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The only downside to absolutely positioned elements is that because they live in a world of their own, there is no way of accurately determining where they end. If you were to use the examples above and all of your pages had small navigation bars and large content areas, you would be okay, but, especially when using relative values for widths and sizes, you often have to abandon any hope of placing anything, such as a footer, below these elements. If you wanted to do such a thing, it would be necessary to float your chunks, rather than absolutely positioning them.</div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Floating</h2>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Floating is normally used to position smaller elements within a page (in the original default CSS for this site, the ‘Next Page’ links in the <a href="http://www.w3programmers.com/2012/04/03/html-basics/" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">HTML Beginner Tutorial</a> and <a href="http://www.w3programmers.com/2012/04/09/css-beginner-tutorial/" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">CSS Beginner Tutorial</a> are floated right. See also the :first-letter example in Pseudo Elements), but it can also be used with bigger chunks, such as navigation columns.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Taking the HTML example below, you could apply the following CSS:</div>
<pre>#navigation {
float: left;
width: 10em;
}

#navigation2 {
float: right;
width: 10em;
}

#content {
margin: 0 10em;
}
</pre>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify;">If you do not want the next element to wrap around the floating objects, you can apply the clear property. clear: left will clear left floated elements, clear: right will clear right floated elements and clear: both will clear both left and right floated elements. So if, for example, you wanted a footer to your page, you could add a chunk of HTML with the id ‘footer’ and then add the following CSS:</span></div>
<div>
<pre>#footer {
clear: both;
}
</pre>
</div>
<div>
<br /></div>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
And there you have it. A footer that will appear underneath all columns, regardless of the length of any of them.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
This has been a general introduction to positioning and floating, with emphasis to the larger ‘chunks’ of a page, but remember, these methods can be applied to any element within those chunks too. With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY web design and there is nothing that can be done in tables that can not be done with CSS.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
The ONLY reason for using tables for layout at all is if you are trying to accommodate ancient browsers. This is where CSS really shows its advantages – it results in a highly accessible page a fraction of the weight of an equivalent table-based page.</div>
<div id="intro" style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<h1 style="border: 0px; clear: both; color: black; font-family: inherit; font-size: 15px; font-style: inherit; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
At-Rules</h1>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
At-rules encapsulate a bunch of <abbr style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: dotted; border-width: 0px 0px 1px; cursor: help; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" title="Cascading Style Sheets">CSS</abbr> rules and apply them to something specific. Woo.</div>
<h2 id="c1" style="border: 0px; clear: both; color: black; font-family: inherit; font-size: 15px; font-style: inherit; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
Importing</h2>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
The import at-rule will bolt on another style sheet. For example, if you want to add the styles of another style sheet to your existing one, you would add something like:</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
@import url(addonstyles.css);</div>
<div style="border: 0px; font-family: inherit; font-style: inherit; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
This is often used in place of the <code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">link</code> element to link a CSS file to an <abbr style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: dotted; border-width: 0px 0px 1px; cursor: help; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" title="HyperText Markup Language">HTML</abbr> page, by essentially having an internal style sheet that looks something like this:</div>
<pre style="color: black; line-height: normal; text-align: start;"><style type="text/css" media="all">@import url(monkey.css);</style>
</pre>
<div>
<br /></div>
<div>
<div style="border: 0px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
The benefit of this is that older browsers, such as Netscape 4.x don’t have a clue about at-rules and so won’t link to the style-sheet, which, if you have well-structured markup, will leave functional (although un-styled) plain HTML.</div>
<h2 style="border: 0px; clear: both; color: black; font-size: 15px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
Media types</h2>
<div style="border: 0px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
The <code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">media</code> at-rule will apply its contents to a specified media, such as print. For example:</div>
<pre style="color: black; line-height: normal; text-align: start;">@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}

#navigation {
display: none;
}
}</pre>
<pre style="color: black; line-height: normal; text-align: start;"><div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The media-type can be:</div>
<ul style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    all – for every media under, over, around and in the sun.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    aural – for speech synthesizers.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    handheld – for handheld devices.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    print – for printers.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    projection – for projectors.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    screen – for computer screens.</li>
</ul>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
You can also use braille, embossed, tty or tv.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Note: having said all of that, the only media-types currently supported by IE are all, screen and print.</div>
<h2 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Character sets</h2>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">charset</strong> at-rule simply sets the character set encoding of an external stylesheet. It would appear at the top of the stylesheet and look something like <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">@charset “ISO-8859-1″;</strong></div>
<h2 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Font faces</h2>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font-face</strong> at-rule is used for a detailed description of a font and can embed an external font in your CSS.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
It requires a font-family descriptor, which the font can be referenced to, the value of which can be an existing font name (so overwriting that font when conditions are met) or it can be a completely new name. To embed a font, the src descriptor is used. Other descriptors added to the<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> font-face</strong> at-rule become conditions for that embedded font to be used, for example, if you were to add a<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> font-weight: bold</strong> style to the at-rule, the src of the font-family will only be applied to a selector with the<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> font-family</strong> property if the<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">font-weight</strong> property is also set to <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">bold</strong>.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
You might use a font-face at-rule like this:</div>
<pre>@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}

p {
font-family: somerandomfontname;
font-weight: bold;
}
</pre>
<div>
</div>
<div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
This will apply the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">somefont.eot</strong> font to paragraphs (it would not if the p selector was not set to<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> font-weight: bold</strong>).</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Support for embedded fonts is patchy at best. Mozilla based browsers don’t support them and have no immediate plans to do so. Only Internet Explorer seems to have any kind of decent support and this is by no means straightforward. To embed fonts with IE, you need to use Microsoft’s WEFT software, which will convert the characters of a TrueType font into a condensed OpenType font (and this can then only be used on the <acronym style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: dotted; border-width: 0px 0px 1px; cursor: help; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" title="Universal Resource Identifier">URI</acronym> that you specify). Because of this limited (and quite complicated) compatibility, it is best not to use fonts that do not have an adequate alternative system font.</div>
<h2 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Pages</h2>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The page at-rule is for<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> paged media</strong> and is an advanced way to apply styles to printed media. It defines a<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">page block</strong> that extends on the box model (see Margins and Padding) so that you can define the size and presentation of a single page.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
There are a number of conventions that apply to page at-rules, such as there is no padding or border and this isn’t a computer screen we’re talking about – pixels and ems as units aren’t allowed.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
There are a number of specific properties that can be used, such as <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">size</strong>, which can be set to <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">portrait</strong>,<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">landscape</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">auto</strong> or a <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">length</strong>. The <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">marks</strong> property can also be used to define crop marks.</div>
<pre>@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
</pre>
</div>
<div>
</div>
<div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Pseudo classes for paged media</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
There are three pseudo classes that are used specifically in conjunction with the page at-rule, which would take the form of <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">@page :pseudo-class { stuff }</strong>.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
:<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">first</strong> applies to the first page of the paged media.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:left</strong> and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">:right</strong> apply to left-facing and right-facing pages respectively. This might be used to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
There are a number of other facets specific to the page at-rule such as page-breaks and named pages, but seeing as this at-rule works on hardly any browser, you’ve probably wasted enough time reading this part anyway. It’s a nice enough idea though…</div>
<h1 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Pseudo Elements</h1>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Pseudo elements suck on to selectors much like pseudo classes, taking the form of<code style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">selector:pseudoelement { property: value; }</code>. There are four of the suckers.</div>
<h2 id="c1" style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
First letters and First lines</h2>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The first-letter pseudo element applies to the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">first letter</strong> of an element and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">first-line</strong> to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:</div>
<pre>p:first-letter {
font-size: 3em;
float: left;
}

p:first-line {
font-weight: bold;
}
</pre>
</div>
<div>
</div>
<div>
<h2 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Before and after</h2>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The value of the content property can be <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">open-quote</strong>, <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">close-quote</strong>,<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> no-open-quote</strong>,<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> no-close-quote</strong>, any<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> string enclosed</strong> in quotation marks or any image using url(imagename).</div>
<pre>blockquote:before {
content: open-quote;
}

blockquote:after {
content: close-quote;
}

li:before {
content: "POW: "
}

p:before {
content: url(images/jam.jpg)
}
</pre>
</div>
<div>
</div>
<div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Sounds great, dunnit? Well, as with so many things (-sigh-), most users won’t be able to see the before or after effects because IE just can’t be bothered with them. Lazy lazy lazy.</div>
<h1 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Specificity</h1>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
It may not seem like something that important, and in most cases you won’t come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts turning up.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
If the selectors are the same then the latest one will always take precedence. For example, if you had:</div>
<pre>p { color: red; }
p { color: blue; }
</pre>
</div>
<div>
</div>
<div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
p elements would be coloured blue because that rule came last.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
However, you won’t usually have identical selectors with conflicting declarations on purpose (because there’s not much point). Conflicts quite legitimately come up, however, when you have nested selectors. In the following example:</div>
<pre>div p { color: red; }
p { color: blue; }
</pre>
</div>
<div>
</div>
<div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
It might seem that p elements within a div element would be coloured blue, seeing as a rule to colour p elements blue comes last, but they would actually be coloured red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value.</div>
<ul style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    p has a specificity of 1 (1 HTML selector)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    div p has a specificity of 2 (2 HTML selectors; 1+1)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    .tree has a specificity of 10 (1 class selector)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    #baobab has a specificity of 100 (1 id selector)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">    body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)</li>
</ul>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.</div>
<pre style="background-color: #f4f4f4; border: 0px; color: #373737; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; line-height: 1.5; margin-bottom: 1.625em; outline: 0px; overflow: auto; padding: 0.75em 1.625em; vertical-align: baseline;"><code class="css" style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="selector" style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">p </span>{ <span class="property" style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color</span>: red; } <span class="selector" style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">p </span>{ <span class="property" style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">color</span>: blue; }</code></pre>
</div>
</pre>
</div>
</div>
</div>
</div>

CSS Tutorial Advanced

The CSS Advanced Tutorial is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious ...

1:48 AM